[ { "property": "--_star_", "document": "---\ntitle: 'Custom properties (--*): CSS variables'\nslug: Web/CSS/--*\ntags:\n - CSS\n - CSS Custom Properties\n - Guide\n - Reference\nbrowser-compat: css.properties.custom-property\n---\n{{CSSRef}}\n\nProperty names that are prefixed with `--`, like `--example-name`, represent _custom properties_ that contain a value that can be used in other declarations using the {{cssxref(\"var\", \"var()\")}} function.\n\nCustom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.\n\n{{CSSInfo}}\n\n## Syntax\n\n```css\n--somekeyword: left;\n--somecolor: #0000ff;\n--somecomplexvalue: 3px 6px rgb(20, 32, 54);\n```\n\n- ``\n - : This value matches any sequence of one or more tokens, so long as the sequence does not contain an disallowed token. It represents the entirety of what a valid declaration can have as its value.\n\n> **Note:** Custom property names are case sensitive — `--my-color` will be treated as a separate custom property to `--My-color`.\n\n### Formal syntax\n\n{{CSSSyntax}}\n\n## Example\n\n### HTML\n\n```html\n

This paragraph should have a blue background and yellow text.

\n

This paragraph should have a yellow background and blue text.

\n
\n

This paragraph should have a green background and yellow text.

\n
\n```\n\n### CSS\n\n```css\n:root {\n --first-color: #16f;\n --second-color: #ff7;\n}\n\n#firstParagraph {\n background-color: var(--first-color);\n color: var(--second-color);\n}\n\n#secondParagraph {\n background-color: var(--second-color);\n color: var(--first-color);\n}\n\n#container {\n --first-color: #290;\n}\n\n#thirdParagraph {\n background-color: var(--first-color);\n color: var(--second-color);\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Example', 500, 130)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n- The {{cssxref(\"var\", \"var()\")}} function\n" }, { "property": "-moz-float-edge", "document": "---\ntitle: '-moz-float-edge'\nslug: Web/CSS/-moz-float-edge\ntags:\n - CSS\n - CSS Property\n - CSS:Mozilla Extensions\n - Layout\n - NeedsCompatTable\n - Non-standard\n - recipe:css-property\nbrowser-compat: css.properties.-moz-float-edge\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe non-standard **`-moz-float-edge`** [CSS](/en-US/docs/Web/CSS) property specifies whether the height and width properties of the element include the margin, border, or padding thickness.\n\n```css\n/* Keyword values */\n-moz-float-edge: border-box;\n-moz-float-edge: content-box;\n-moz-float-edge: margin-box;\n-moz-float-edge: padding-box;\n\n/* Global values */\n-moz-float-edge: inherit;\n-moz-float-edge: initial;\n-moz-float-edge: unset;\n```\n\n## Syntax\n\n### Values\n\n- `border-box`\n - : The height and width properties include the content, padding and border but not the margin.\n- `content-box`\n - : The height and width properties include the content, but not the padding, border or margin.\n- `margin-box`\n - : The height and width properties include the content, padding, border and margin.\n- `padding-box`\n - : The height and width properties include the content and padding but not the border or margin.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

\n
\n```\n\n### CSS\n\n```css\n.box {\n display: block;\n height: 5px;\n margin: 0.5em auto 0.5em auto;\n color: gray;\n -moz-float-edge: margin-box;\n box-sizing: border-box;\n}\n```\n\n### Result\n\n{{ EmbedLiveSample('Examples') }}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{bug(432891)}}\n" }, { "property": "-moz-force-broken-image-icon", "document": "---\ntitle: '-moz-force-broken-image-icon'\nslug: Web/CSS/-moz-force-broken-image-icon\ntags:\n - CSS\n - NeedsCompatTable\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-force-broken-image-icon\n---\n{{Non-standard_header}}{{CSSRef}}\n\nThe **`-moz-force-broken-image-icon`** extended CSS property can be used to force the broken image icon to be shown even when a broken image has an `alt` attribute.\n\n## Syntax\n\n### Values\n\n- {{cssxref(\"<integer>\")}}\n - : A value of `1` means that the broken image icon is shown even if the image has an {{HTMLElement(\"img\", \"alt\", \"#attr-alt\")}} attribute. When the value `0` is used the image will act as usual and only display the `alt` attribute.\n\n> **Note:** Even if the value is set to `1` the `alt` attribute will still be displayed, alongside the broken image icon.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\nBroken image link\n```\n\n### CSS\n\n```css\nimg {\n -moz-force-broken-image-icon: 1;\n height: 100px;\n width: 100px;\n}\n```\n\n### Result\n\n{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}\n\n> **Note:** Unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if `-moz-force-broken-image-icon` is set to `1`.\n\n## Notes\n\n- This property will only work in Gecko-based browsers.\n- The use of this property is not recommended. A proper `alt` attribute should be used instead.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{ Bug(58646) }}\n" }, { "property": "-moz-image-rect", "document": "---\ntitle: '-moz-image-rect'\nslug: Web/CSS/-moz-image-rect\ntags:\n - CSS\n - CSS Function\n - CSS Images\n - CSS:Mozilla Extensions\n - Function\n - Non-standard\n - Reference\nbrowser-compat: css.types.-moz-image-rect\n---\n{{CSSRef}}{{Non-standard_Header}}\n\nThe **`-moz-image-rect`** value for [CSS](/en-US/docs/Web/CSS) {{CSSxRef(\"background-image\")}} lets you use a portion of a larger image as a background.\n\n## Syntax\n\n```css\n-moz-image-rect({{CSSxRef(\"url\", \"url()\")}}, top, right, bottom, left);\n```\n\n### Values\n\n- {{CSSxRef(\"url\", \"url()\")}}\n - : The URI of the image from which to take the sub-image.\n- `top`\n - : The top edge, specified as an {{CSSxRef(\"<integer>\")}} or {{CSSxRef(\"<percentage>\")}}, of the sub-image within the specified image.\n- `right`\n - : The right edge, specified as an {{CSSxRef(\"<integer>\")}} or {{CSSxRef(\"<percentage>\")}}, of the sub-image within the specified image.\n- `bottom`\n - : The bottom edge, specified as an {{CSSxRef(\"<integer>\")}} or {{CSSxRef(\"<percentage>\")}}, of the sub-image within the specified image.\n- `left`\n - : The left edge, specified as an {{CSSxRef(\"<integer>\")}} or {{CSSxRef(\"<percentage>\")}}, of the sub-image within the specified image.\n\n## Description\n\nThis property allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.\n\nThis works very similarly to the {{CSSxRef(\"-moz-image-region\")}} property, which is used with the {{CSSxRef(\"list-style-image\")}} property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.\n\nThe syntax for the rectangle is similar to the [`rect()`](/en-US/docs/Web/CSS/shape#syntax) function generating a {{CSSxRef(\"<shape>\")}} CSS type. All four values are relative to the upper left corner of the image.\n\n## Examples\n\nThis example loads an image and uses it in four segments to draw the Firefox logo in four {{HTMLElement(\"div\")}} blocks. Clicking on their container causes the four segments to rotate around by swapping the {{CSSxRef(\"background-image\")}} property values among the four {{HTMLElement(\"div\")}} blocks.\n\n### CSS\n\nThe CSS defines one container style, then the styles for the four boxes that comprise the complete image.\n\nThe container looks like this:\n\n```css\n#container {\n width:267px;\n height:272px;\n top:100px;\n left:100px;\n position:absolute;\n font-size:16px;\n text-shadow:white 0px 0px 6px;\n text-align:center;\n}\n```\n\nThen the four boxes defining the segments of the image are defined. Let's look at them one at a time.\n\n```css\n#box1 {\n background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);\n width:133px;\n height:136px;\n position:absolute;\n}\n```\n\nThis is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file `firefox.jpg`.\n\n```css\n#box2 {\n background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);\n width:133px;\n height:136px;\n position:absolute;\n}\n```\n\nThis defines the top-right corner of the image.\n\nThe other corners follow a similar pattern:\n\n```css\n#box3 {\n background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);\n width:133px;\n height:136px;\n position:absolute;\n}\n#box4 {\n background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);\n width:133px;\n height:136px;\n position:absolute;\n}\n```\n\n### HTML\n\nThe HTML is quite simple:\n\n```html\n
\n
Top left
\n
Top right
\n
Bottom left
\n
Bottom right
\n
\n```\n\nThis places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger {{HTMLElement(\"div\")}} block whose primary purpose is to receive click events and dispatch them to our JavaScript code.\n\n### The JavaScript code\n\nThis code handles the click event when the container receives a mouse click.\n\n```js\nfunction rotate() {\n var prevStyle = window.getComputedStyle(document.getElementById(\"box4\"), null).getPropertyValue(\"background-image\");\n\n // Now that we've saved the last one, start rotating\n\n for (var i=1; i<=4; i++) {\n var curId = \"box\" + i;\n\n // Shift the background images\n\n var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue(\"background-image\");\n document.getElementById(curId).style.backgroundImage = prevStyle;\n prevStyle = curStyle;\n }\n}\n```\n\nThis uses {{DOMxRef(\"window.getComputedStyle()\")}} to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By copying the values of the {{CSSxRef(\"background-image\")}} property from one element to the next with each mouse click, we achieve the desired effect.\n\n### What it looks like\n\n{{EmbedLiveSample(\"Examples\",\"400\",\"400\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)\n- [CSS Backgrounds and Borders module](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders)\n" }, { "property": "-moz-orient", "document": "---\ntitle: '-moz-orient'\nslug: Web/CSS/-moz-orient\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-orient\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-moz-orient`** [CSS](/en-US/docs/Web/CSS) property specifies the orientation of the element to which it's applied.\n\n## Syntax\n\nThe `-moz-orient` property is specified as one of the keyword values chosen from the list below.\n\n### Values\n\n- `inline`\n - : The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.\n- `block`\n - : The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.\n- `horizontal`\n - : The element is rendered horizontally.\n- `vertical`\n - : The element is rendered vertically.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

\n The following progress meter\n is horizontal (the default):\n

\n\n\n

\n The following progress meter\n is vertical:\n

\n\n```\n\n### CSS\n\n```css\n.vert {\n -moz-orient: vertical;\n width: 16px;\n height: 150px;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\",\"200\",\"360\")}}\n\n## Specifications\n\nNot part of any standard. Though [submitted](https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html) to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, `-moz-orient`).\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"box-orient\")}}\n" }, { "property": "-moz-image-region", "document": "---\ntitle: '-moz-image-region'\nslug: Web/CSS/-moz-image-region\ntags:\n - CSS\n - CSS Property\n - CSS:Mozilla Extensions\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-image-region\n---\n{{CSSRef}}{{Non-standard_Header}}\n\nFor certain XUL elements and pseudo-elements that use an image from the {{CSSxRef(\"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.\n\n```css\n/* Keyword value */\n-moz-image-region: auto;\n\n/* value */\n-moz-image-region: rect(0, 8px, 4px, 4px);\n\n/* Global values */\n-moz-image-region: inherit;\n-moz-image-region: initial;\n-moz-image-region: unset;\n```\n\nThe syntax is similar to the {{CSSxRef(\"clip\")}} property. All four values are relative to the upper left corner of the image.\n\n> **Note:** For a system that works on any background, see {{CSSxRef(\"-moz-image-rect\")}}.\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Automatically defines the region of the image to use.\n- [``](/en-US/docs/Web/CSS/shape)\n - : 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.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Clipping an image\n\n```css\n#example-button {\n /* display only the 4x4 area from the top left of this image */\n list-style-image: url(\"chrome://example/skin/example.png\");\n -moz-image-region: rect(0px, 4px, 4px, 0px);\n}\n#example-button:hover {\n /* use the 4x4 area to the right of the first for the hovered button */\n -moz-image-region: rect(0px, 8px, 4px, 4px);\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"-moz-image-rect\")}}\n" }, { "property": "-moz-outline-radius-bottomright", "document": "---\ntitle: '-moz-outline-radius-bottomright'\nslug: Web/CSS/-moz-outline-radius-bottomright\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - NeedsContent\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-outline-radius-bottomright\n---\n{{CSSRef}}{{deprecated_header}}\n\nIn Mozilla applications, the **`-moz-outline-radius-bottomright`** [CSS](/en-US/docs/Web/CSS) property can be used to round the bottom-right corner of an element's {{cssxref(\"outline\")}}.\n\n## Syntax\n\nThe value of `-moz-outline-radius-bottomright` is either a CSS {{cssxref(\"length\", \"<length>\")}} or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The {{cssxref(\"calc\", \"calc()\")}} function may be used as well.\n\n### Values\n\n- ``\n - : The radius of the circle defining the curvature of the bottom and right edges of the element, specified as a CSS {{cssxref(\"length\", \"<length>\")}}.\n- ``\n - : The radius of the circle defining the rounding of the bottom-right corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the bottom and right sides of the border box.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

Look at this paragraph's bottom-right corner.

\n```\n\n### CSS\n\n```css\np {\n margin: 5px;\n border: solid cyan;\n outline: dotted red;\n -moz-outline-radius-bottomright: 2em;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n> **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- See the {{cssxref(\"-moz-outline-radius\")}} property for more information.\n" }, { "property": "-moz-outline-radius-topright", "document": "---\ntitle: '-moz-outline-radius-topright'\nslug: Web/CSS/-moz-outline-radius-topright\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - NeedsContent\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-outline-radius-topright\n---\n{{CSSRef}}{{deprecated_header}}\n\nIn Mozilla applications, the **`-moz-outline-radius-topright`** [CSS](/en-US/docs/Web/CSS) property can be used to round the top-right corner of an element's {{cssxref(\"outline\")}}.\n\n## Syntax\n\nThe value of `-moz-outline-radius-topright` is either a CSS [``](/en-US/docs/Web/CSS/length) or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The [`calc()`]() function may be used as well.\n\n### Values\n\n- ``\n - : The radius of the circle defining the curvature of the top and right edges of the element, specified as a CSS [``](/en-US/docs/Web/CSS/length).\n- ``\n - : The radius of the circle defining the rounding of the top-right corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the top and right sides of the border box.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

Look at this paragraph's top-right corner.

\n```\n\n### CSS\n\n```css\np {\n margin: 5px;\n border: solid cyan;\n outline: dotted red;\n -moz-outline-radius-topright: 2em;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n> **Note:** The example above will not display the desired effect if you are viewing this in a browser other than Firefox.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- See the {{cssxref(\"-moz-outline-radius\")}} property for more information.\n" }, { "property": "-moz-outline-radius-bottomleft", "document": "---\ntitle: '-moz-outline-radius-bottomleft'\nslug: Web/CSS/-moz-outline-radius-bottomleft\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - NeedsContent\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-outline-radius-bottomleft\n---\n{{CSSRef}}{{deprecated_header}}\n\nIn Mozilla applications, the **`-moz-outline-radius-bottomleft`** [CSS](/en-US/docs/Web/CSS) property can be used to round the bottom-left corner of an element's {{cssxref(\"outline\")}}.\n\n## Syntax\n\nThe value of `-moz-outline-radius-bottomleft` is either a CSS {{cssxref(\"length\", \"<length>\")}} or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The {{cssxref(\"calc\", \"calc()\")}} function may be used as well.\n\n### Values\n\n- ``\n - : The radius of the circle defining the curvature of the bottom and left edges of the element, specified as a CSS {{cssxref(\"length\", \"<length>\")}}.\n- ``\n - : The radius of the circle defining the rounding of the bottom-left corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the bottom and left sides of the border box.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Rounding a outline\n\nSince this is a Firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than Firefox.\n\n#### HTML\n\n```html\n

Look at this paragraph's bottom-left corner.

\n```\n\n#### CSS\n\n```css\np {\n margin: 10px;\n border: solid cyan;\n outline: dotted green;\n -moz-outline-radius-bottomleft: 2em;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Rounding_a_outline\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- See the {{cssxref(\"-moz-outline-radius\")}} property for more information.\n" }, { "property": "-moz-outline-radius-topleft", "document": "---\ntitle: '-moz-outline-radius-topleft'\nslug: Web/CSS/-moz-outline-radius-topleft\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - NeedsContent\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-outline-radius-topleft\n---\n{{CSSRef}}{{deprecated_header}}\n\nIn Mozilla applications, the **`-moz-outline-radius-topleft`** [CSS](/en-US/docs/Web/CSS) property can be used to round the top-left corner of an element's {{cssxref(\"outline\")}}.\n\n## Syntax\n\nThe value of `-moz-outline-radius-topleft` is either a CSS [``](/en-US/docs/Web/CSS/length) or a [percentage](/en-US/docs/Web/CSS/percentage) of the corresponding dimensions of the border box. The [`calc()`]() function may be used as well.\n\n### Values\n\n- ``\n - : The radius of the circle defining the curvature of the top and left edges of the element, specified as a CSS [``](/en-US/docs/Web/CSS/length).\n- ``\n - : The radius of the circle defining the rounding of the top-left corner of the element, specified as the [percentages](/en-US/docs/Web/CSS/percentage) of the top and left sides of the border box.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\nThe example below will not display the desired effect if you are viewing this in a browser other than Firefox.\n\n### HTML\n\n```html\n

Look at this paragraph's top-left corner.

\n```\n\n### CSS\n\n```css\np {\n margin: 5px;\n border: solid cyan;\n outline: dotted red;\n -moz-outline-radius-topleft: 2em;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- See the {{cssxref(\"-moz-outline-radius\")}} property for more information.\n" }, { "property": "-moz-outline-radius", "document": "---\ntitle: '-moz-outline-radius'\nslug: Web/CSS/-moz-outline-radius\ntags:\n - CSS\n - CSS Property\n - CSS:Mozilla Extensions\n - Non-standard\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.-moz-outline-radius\n---\n{{CSSRef}}{{deprecated_header}}\n\nIn Mozilla applications like Firefox, the **`-moz-outline-radius`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) can be used to give an element's {{cssxref(\"outline\")}} rounded corners.\n\n```css\n/* One value */\n-moz-outline-radius: 25px;\n\n/* Two values */\n-moz-outline-radius: 25px 1em;\n\n/* Three values */\n-moz-outline-radius: 25px 1em 12%;\n\n/* Four values */\n-moz-outline-radius: 25px 1em 12% 4mm;\n\n/* Global values */\n-moz-outline-radius: inherit;\n-moz-outline-radius: initial;\n-moz-outline-radius: unset;\n```\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`-moz-outline-radius-bottomleft`](/en-US/docs/Web/CSS/-moz-outline-radius-bottomleft)\n- [`-moz-outline-radius-bottomright`](/en-US/docs/Web/CSS/-moz-outline-radius-bottomright)\n- [`-moz-outline-radius-topleft`](/en-US/docs/Web/CSS/-moz-outline-radius-topleft)\n- [`-moz-outline-radius-topright`](/en-US/docs/Web/CSS/-moz-outline-radius-topright)\n\n## Syntax\n\n### Values\n\n> **Note:** Elliptical outlines and `` values follow the syntax described in {{cssxref(\"border-radius\")}}.\n\nOne, two, three or four `` values, represents one of:\n\n- {{cssxref(\"<length>\")}}\n - : See {{cssxref(\"<length>\")}} for possible values.\n- {{cssxref(\"<percentage>\")}}\n - : A {{cssxref(\"<percentage>\")}}; see {{cssxref(\"border-radius\")}} for details.\n\n\n\n- If a single value is set, it applies to all 4 corners.\n- If two values are set, the first one applies to the top-left and bottom-right corners and the second one to the top-right and bottom-left corners.\n- If three values are set, the first one applies to the top-Left corner, the second one to the top-right and bottom-left corners and the third one to the bottom-right corner.\n- If four values are set, the first one applies to the top-left corner, the second one to the top-right corner, the third one to the bottom-right corner and the fourth one to the bottom-left corner.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Rounding an outline\n\nNote: This example will not display the desired effect if you are viewing this in a browser other than Firefox.\n\n#### HTML\n\n```html\n

This element has a rounded outline!

\n```\n\n#### CSS\n\n```css\np {\n margin: 5px;\n border: 1px solid black;\n outline: dotted red;\n -moz-outline-radius: 12% 1em 25px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Rounding_an_outline')}}\n\n## Notes\n\n- `dotted` or `dashed` radiused corners were rendered as solid until Firefox 50, {{bug(\"382721\")}}\n- Future versions of Gecko/Firefox may drop this property completely. See {{bug(\"593717\")}}.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)\n- Related CSS properties:\n\n - [`outline`](/en-US/docs/Web/CSS/outline)\n" }, { "property": "-moz-user-focus", "document": "---\ntitle: '-moz-user-focus'\nslug: Web/CSS/-moz-user-focus\ntags:\n - '-moz-user-focus'\n - CSS\n - CSS:Mozilla Extensions\n - NeedsContent\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-user-focus\n---\n{{CSSRef}} {{Non-standard_header}}\n\nThe **`-moz-user-focus`** [CSS](/en-US/docs/Web/CSS) property is used to indicate whether an element can have the focus.\n\n```css\n/* Keyword values */\n-moz-user-focus: normal;\n-moz-user-focus: ignore;\n\n/* Global values */\n-moz-user-focus: inherit;\n-moz-user-focus: initial;\n-moz-user-focus: unset;\n```\n\nBy setting its value to `ignore`, you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence.\n\n{{cssinfo}}\n\n> **Note:** This property doesn't work for XUL {{XULElem(\"textbox\")}} elements, because the `textbox` itself never takes focus. Instead, XBL creates an anonymous HTML {{HTMLElement(\"input\")}} element inside the `textbox`, and that element is what receives focus. You can stop the `textbox` from taking keyboard focus by setting its tab index to `-1`, and from taking mouse focus by preventing the default action of `mousedown` events.\n\n## Syntax\n\n### Values\n\n- `ignore`\n - : The element does not accept the keyboard focus and will be skipped in the tab order.\n- `normal`\n - : The element can accept the keyboard focus.\n- `select-after`\n - : ?\n- `select-before`\n - : ?\n- `select-menu`\n - : ?\n- `select-same`\n - : ?\n- `select-all`\n - : ?\n- `none`\n - : ?\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n\n```\n\n### CSS\n\n```css\n.ignored {\n -moz-user-focus: ignore;\n}\n```\n\n## Specifications\n\nNot part of any standard. A similar property, `user-focus`, was proposed in [early drafts of a predecessor of the CSS3 UI specification](https://www.w3.org/TR/2000/WD-css3-userint-20000216), but was rejected by the working group.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"-moz-user-input\")}}\n- {{cssxref(\"-moz-user-modify\")}}\n- {{cssxref(\"-moz-user-select\")}}\n" }, { "property": "-moz-user-input", "document": "---\ntitle: '-moz-user-input'\nslug: Web/CSS/-moz-user-input\ntags:\n - CSS\n - CSS Property\n - CSS:Mozilla Extensions\n - Deprecated\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-moz-user-input\n---\n{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}}\n\nIn Mozilla applications, **`-moz-user-input`** determines if an element will accept user input.\n\n```css\n/* Keyword values */\n-moz-user-input: none;\n-moz-user-input: enabled;\n-moz-user-input: disabled;\n\n/* Global values */\n-moz-user-input: inherit;\n-moz-user-input: initial;\n-moz-user-input: unset;\n```\n\nFor elements that normally take user input, such as a {{HTMLElement(\"textarea\")}}, the initial value of `-moz-user-input` is `enabled`.\n\n> **Note:** `-moz-user-input` was one of the proposals leading to the proposed CSS 3 {{cssxref(\"user-input\")}} property, which has not yet reached Candidate Recommendation (call for implementations). A similar property, `user-focus`, was proposed in [early drafts of a predecessor of the CSS3 UI specification](https://www.w3.org/TR/2000/WD-css3-userint-20000216), but was rejected by the working group.\n\n## Syntax\n\n### Values\n\n- none\n - : The element does not respond to user input, and it does not become {{CSSxRef(\":active\")}}.\n- enabled\n - : The element accepts user input. For textboxes, this is the default behavior. **Please note that this value is no longer supported in Firefox 60 onwards ({{bug(1405087)}}).**\n- disabled\n - : The element does not accept user input. However, this is not the same as setting {{XULAttr(\"disabled\")}} to true, in that the element is drawn normally. **Please note that this value is no longer supported in Firefox 60 onwards ({{bug(1405087)}}).**\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Disabling user input for an element\n\n```css\ninput.example {\n /* The user will be able to select the text, but not change it. */\n -moz-user-input: disabled;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"-moz-user-focus\")}}\n- {{CSSxRef(\"-moz-user-modify\")}}\n- {{CSSxRef(\"-moz-user-select\")}}\n" }, { "property": "-webkit-border-before", "document": "---\ntitle: '-webkit-border-before'\nslug: Web/CSS/-webkit-border-before\ntags:\n - '-webkit-border-before'\n - CSS\n - CSS Property\n - CSS:WebKit Extensions\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-border-before\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-border-before`** [CSS](/en-US/docs/Web/CSS) property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.\n\n```css\n/* Border values */\n-webkit-border-before: 1px;\n-webkit-border-before: 2px dotted;\n-webkit-border-before: medium dashed blue;\n\n/* Global values */\n-webkit-border-before: inherit;\n-webkit-border-before: initial;\n-webkit-border-before: unset;\n```\n\n`-webkit-border-before` can be used to set the values for one or more of: {{cssxref(\"-webkit-border-before-width\")}}, {{cssxref(\"-webkit-border-before-style\")}}, and {{cssxref(\"-webkit-border-before-color\")}}. It maps to a physical border depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"border-top\")}}, {{cssxref(\"border-right\")}}, {{cssxref(\"border-bottom\")}}, or {{cssxref(\"border-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\nIt relates to {{cssxref(\"-webkit-border-after\")}}, {{cssxref(\"-webkit-border-start\")}}, and {{cssxref(\"-webkit-border-end\")}}, which define the other borders of the element.\n\nThis property is on the standard track as {{cssxref(\"border-block-start\")}}.\n\n## Syntax\n\n### Values\n\nOne or more of the following, in any order:\n\n- `<'border-width'>`\n - : See {{cssxref(\"border-width\")}}\n- `<'border-style'>`\n - : See {{cssxref(\"border-style\")}}\n- `<'color'>`\n - : See {{cssxref(\"color\")}}\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Applying a border with vertical text\n\n#### HTML\n\n```html\n
\n

Example text

\n
\n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n -webkit-border-before: 5px dashed blue;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Applying_a_border_with_vertical_text\", 140, 140)}}\n\n## Specifications\n\nNot part of any standard, but it relates to the standards-track {{cssxref(\"border-block-start\")}} property.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"border-block-start\")}}\n- The mapped physical properties: {{cssxref(\"border-top\")}}, {{cssxref(\"border-right\")}}, {{cssxref(\"border-bottom\")}}, and {{cssxref(\"border-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "-webkit-box-reflect", "document": "---\ntitle: '-webkit-box-reflect'\nslug: Web/CSS/-webkit-box-reflect\ntags:\n - '-webkit-box-reflect'\n - CSS\n - CSS Property\n - CSS:WebKit Extensions\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-box-reflect\n---\n{{CSSRef}}{{Non-standard_Header}}\n\nThe **`-webkit-box-reflect`** [CSS](/en-US/docs/Web/CSS) property lets you reflect the content of an element in one specific direction.\n\n```css\n/* Direction values */\n-webkit-box-reflect: above;\n-webkit-box-reflect: below;\n-webkit-box-reflect: left;\n-webkit-box-reflect: right;\n\n/* Offset value */\n-webkit-box-reflect: below 10px;\n\n/* Mask value */\n-webkit-box-reflect: below 0 linear-gradient(transparent, white);\n\n/* Global values */\n-webkit-box-reflect: inherit;\n-webkit-box-reflect: initial;\n-webkit-box-reflect: unset;\n```\n\n> **Warning:** This feature is **not intended to be used by Web sites**. To achieve reflection on the Web, the standard way is to use the CSS {{CSSxRef(\"element\", \"element()\")}} function.\n\n## Syntax\n\n### Values\n\n- `above`_,_ `below`_,_ `right`_,_ `left`\n - : Are keywords indicating in which direction the reflection is to happen.\n- {{CSSxRef(\"<length>\")}}\n - : Indicates the size of the reflection.\n- {{CSSxRef(\"<image>\")}}\n - : Describes the mask to be applied to the reflection.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Specifications\n\nNot part of any standard. The standard way to do reflection in CSS is to use the CSS {{CSSxRef(\"element\", \"element()\")}} function.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The Apple [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html).\n- The Webkit [specification](https://webkit.org/blog/182/css-reflections/).\n- Lea Verou's article on reflection using [CSS features on the standard track](https://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/).\n" }, { "property": "-webkit-line-clamp", "document": "---\ntitle: '-webkit-line-clamp'\nslug: Web/CSS/-webkit-line-clamp\ntags:\n - '-webkit-line-clamp'\n - CSS\n - CSS Property\n - Non-standard\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-line-clamp\n---\n{{CSSRef}}\n\nThe **`-webkit-line-clamp`** CSS property allows limiting of the contents of a {{Glossary(\"block container\")}} to the specified number of lines.\n\nIt only works in combination with the {{cssxref(\"display\")}} property set to `-webkit-box` or `-webkit-inline-box` and the {{cssxref(\"-webkit-box-orient\")}} property set to `vertical`.\n\nIn most cases you will also want to set {{cssxref(\"overflow\")}} to `hidden`, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.\n\nWhen applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.\n\n> **Note:** This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The [CSS Overflow Module Level 3](https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp) specification also defines a {{cssxref(\"line-clamp\")}} property, which is meant to replace this property and avoid its issues.\n\n## Syntax\n\n```css\n/* Keyword value */\n-webkit-line-clamp: none;\n\n/* values */\n-webkit-line-clamp: 3;\n-webkit-line-clamp: 10;\n\n/* Global values */\n-webkit-line-clamp: inherit;\n-webkit-line-clamp: initial;\n-webkit-line-clamp: unset;\n```\n\n- `none`\n - : This value specifies that the content won't be clamped.\n- {{cssxref(\"integer\")}}\n - : This value specifies the number of lines after which the content will be clamped. It must be greater than 0.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Truncating a paragraph\n\n#### HTML\n\n```html\n

\n In this example the -webkit-line-clamp property is set to 3, which means the text is clamped after three lines.\n An ellipsis will be shown at the point where the text is clamped.\n

\n```\n\n#### CSS\n\n```css\np {\n width: 300px;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n overflow: hidden;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Truncating_a_paragraph\", \"100%\", \"130\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Line Clampin' (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/)\n- {{cssxref(\"line-clamp\")}}\n" }, { "property": "-webkit-mask-attachment", "document": "---\ntitle: '-webkit-mask-attachment'\nslug: Web/CSS/-webkit-mask-attachment\ntags:\n - CSS\n - CSS Property\n - Layout\n - Non-standard\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-attachment\n---\n{{CSSRef}}{{Non-standard_Header}}\n\nIf a {{CSSxRef(\"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.\n\n```css\n/* Keyword values */\n-webkit-mask-attachment: scroll;\n-webkit-mask-attachment: fixed;\n-webkit-mask-attachment: local;\n\n/* Multiple values */\n-webkit-mask-attachment: scroll, local;\n-webkit-mask-attachment: fixed, local, scroll;\n\n/* Global values */\n-webkit-mask-attachment: inherit;\n-webkit-mask-attachment: initial;\n-webkit-mask-attachment: unset;\n```\n\n## Syntax\n\n### Values\n\n- scroll\n - : If `scroll` is specified, the mask image scrolls within the viewport along with the block that contains the mask image.\n- fixed\n - : If `fixed` is specified, the mask image does not scroll with its containing element, instead remaining stationary within the viewport.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Fixing a mask image to the viewport\n\n```css\nbody {\n -webkit-mask-image: url('images/mask.png');\n -webkit-mask-attachment: fixed;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"mask\")}}\n- {{CSSxRef(\"mask-clip\")}}\n- {{CSSxRef(\"-webkit-mask-box-image\")}}\n- {{CSSxRef(\"mask-origin\")}}\n- {{CSSxRef(\"mask-image\")}}\n- {{CSSxRef(\"-webkit-mask-composite\")}}\n- {{CSSxRef(\"mask-repeat\")}}\n" }, { "property": "-webkit-mask-box-image", "document": "---\ntitle: '-webkit-mask-box-image'\nslug: Web/CSS/-webkit-mask-box-image\ntags:\n - CSS\n - Layout\n - Non-standard\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-box-image\n---\n{{ CSSRef() }} {{ Non-standard_header() }}\n\n`-webkit-mask-box-image` sets the mask image for an element's border box.\n\n- {{ Xref_cssinitial() }}: none\n- Applies to: all elements\n- {{ Xref_cssinherited() }}: no\n- Media: {{ Xref_cssvisual() }}\n- {{ Xref_csscomputed() }}: as specified\n\n## Syntax\n\n```\n-webkit-mask-box-image: [ ]\n```\n\nWhere:\n\n- \\\n - : `{{cssxref(\"url\", \"<uri>\")}} | | none`\n- \\ \\ \\ \\\n - : ` | `\n- \\ \\\n - : `repeat | stretch | round | space`\n\n### Values\n\n- \\\n - : The location of the image resource to be used as a mask image.\n- \\\n - : A `-webkit-gradient` function to be used as a mask image.\n- none\n - : Used to specify that a border box is to have no mask image.\n- \\\n - : The size of the mask image's offset. See {{cssxref(\"<length>\")}} for possible units.\n- \\\n - : The mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height).\n- repeat\n - : 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.\n- stretch\n - : The mask image is stretched to contain the border box exactly.\n- round\n - : The mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box.\n- space\n - : The mask image is repeated as many times as possible without stretching. There is no partial mask image at the end of the border box.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Setting an image\n\n```css\n.exampleone {\n -webkit-mask-box-image: url('mask.png');\n}\n```\n\n### Offsetting and filling an image\n\n```css\n.exampletwo {\n -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n{{ cssxref(\"mask\") }}, {{ cssxref(\"mask-origin\") }}, {{ cssxref(\"-webkit-mask-attachment\") }},{{ cssxref(\"mask-clip\") }},{{ cssxref(\"mask-image\") }},{{ cssxref(\"-webkit-mask-composite\") }},{{ cssxref(\"mask-repeat\") }}\n" }, { "property": "-webkit-mask-composite", "document": "---\ntitle: '-webkit-mask-composite'\nslug: Web/CSS/-webkit-mask-composite\ntags:\n - '-webkit-mask-composite'\n - CSS\n - CSS Masking\n - CSS Property\n - CSS:WebKit Extensions\n - Non-standard\n - Reference\n - mask-composite\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-composite\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-mask-composite`** property specifies the manner in which multiple mask images applied to the same element are composited with one another. Mask images are composited in the opposite order that they are declared with the {{CSSxRef(\"-webkit-mask-image\")}} property.\n\n```css\n/* Keyword values */\n-webkit-mask-composite: clear;\n-webkit-mask-composite: copy;\n-webkit-mask-composite: source-over;\n-webkit-mask-composite: source-in;\n-webkit-mask-composite: source-out;\n-webkit-mask-composite: source-atop;\n-webkit-mask-composite: destination-over;\n-webkit-mask-composite: destination-in;\n-webkit-mask-composite: destination-out;\n-webkit-mask-composite: destination-atop;\n-webkit-mask-composite: xor;\n\n/* Global values */\n-webkit-mask-composite: inherit;\n-webkit-mask-composite: initial;\n-webkit-mask-composite: unset;\n```\n\n> **Note:** There is a standardized {{CSSxRef(\"mask-composite\")}} property covering parts of this non-standard property using different keywords.\n\n## Syntax\n\n### Values\n\n- `clear`\n - : Overlapping pixels in the source mask image and the destination mask image are cleared.\n- `copy`\n - : The source mask image replaces the destination mask image.\n- `source-over`\n - : The source mask image is rendered over the destination mask image.\n- `source-in`\n - : 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.\n- `source-out`\n - : Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.\n- `source-atop`\n - : 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.\n- `destination-over`\n - : The destination mask image is rendered over the source mask image.\n- `destination-in`\n - : 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.\n- `destination-out`\n - : Overlapping pixels in the source mask image and the destination mask image are cleared; all remaining pixels of the source mask image are rendered.\n- `destination-atop`\n - : 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.\n- `xor`\n - : Overlapping pixels in the source mask image and the destination mask image become fully transparent if they are both fully opaque.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Compositing with XOR\n\n```css\n.example {\n -webkit-mask-image: url(mask1.png), url('mask2.png');\n -webkit-mask-composite: xor, source-over;\n}\n```\n\n## Specifications\n\nNot part of any standard. This property is specified as {{CSSxRef(\"mask-composite\")}} using different values.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"mask-composite\")}}\n" }, { "property": "-webkit-mask-position-x", "document": "---\ntitle: '-webkit-mask-position-x'\nslug: Web/CSS/-webkit-mask-position-x\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-position-x\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe `-webkit-mask-position-x` CSS property sets the initial horizontal position of a mask image.\n\n```css\n/* Keyword values */\n-webkit-mask-position-x: left;\n-webkit-mask-position-x: center;\n-webkit-mask-position-x: right;\n\n/* values */\n-webkit-mask-position-x: 100%;\n-webkit-mask-position-x: -50%;\n\n/* values */\n-webkit-mask-position-x: 50px;\n-webkit-mask-position-x: -1cm;\n\n/* Multiple values */\n-webkit-mask-position-x: 50px, 25%, -3em;\n\n/* Global values */\n-webkit-mask-position-x: inherit;\n-webkit-mask-position-x: initial;\n-webkit-mask-position-x: unset;\n```\n\n{{cssinfo}}\n\n## Syntax\n\n### Values\n\n- ``\n - : 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.\n- **`left`**\n - : Equivalent to `0%`.\n- **`center`**\n - : Equivalent to `50%`.\n- **`right`**\n - : Equivalent to `100%`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Horizontally positioning a mask image\n\n```css\n.exampleOne {\n -webkit-mask-image: url(mask.png);\n -webkit-mask-position-x: right;\n}\n\n.exampleTwo {\n -webkit-mask-image: url(mask.png);\n -webkit-mask-position-x: 25%;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n{{cssxref(\"-webkit-mask-position\")}}, {{cssxref(\"-webkit-mask-position-y\")}}, {{cssxref(\"-webkit-mask-origin\")}}, {{cssxref(\"-webkit-mask-attachment\")}}\n" }, { "property": "-webkit-mask-repeat-x", "document": "---\ntitle: '-webkit-mask-repeat-x'\nslug: Web/CSS/-webkit-mask-repeat-x\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-repeat-x\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe `-webkit-mask-repeat-x` property specifies whether and how a mask image is repeated (tiled) horizontally.\n\n```css\n/* Keyword values */\n-webkit-mask-repeat-x: repeat;\n-webkit-mask-repeat-x: no-repeat;\n-webkit-mask-repeat-x: space;\n-webkit-mask-repeat-x: round;\n\n/* Multiple values */\n-webkit-mask-repeat-x: repeat, no-repeat, space;\n\n/* Global values */\n-webkit-mask-repeat-x: inherit;\n-webkit-mask-repeat-x: initial;\n-webkit-mask-repeat-x: unset;\n```\n\n## Syntax\n\n### Values\n\n- repeat\n - : The mask image is repeated both horizontally and vertically.\n- no-repeat\n - : 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.\n- repeat\n - : The mask image is repeated both horizontally and vertically.\n- space\n - : 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 {{cssxref(\"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.\n- round\n - : 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.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using a repeating or non-repeating mask image\n\n```css\n.exampleone {\n -webkit-mask-image: url('mask.png');\n -webkit-mask-repeat-x: repeat;\n}\n\n.exampletwo {\n -webkit-mask-image: url('mask.png');\n -webkit-mask-repeat-x: no-repeat;\n}\n```\n\n### Using multiple mask images\n\nYou can specify a different `` for each mask image, separated by commas:\n\n```css\n.examplethree {\n -webkit-mask-image: url('mask1.png'), url('mask2.png');\n -webkit-mask-repeat-x: repeat, space;\n}\n```\n\nEach image is matched with the corresponding repeat style, from first specified to last.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n{{cssxref(\"-webkit-mask-repeat\")}}, {{cssxref(\"-webkit-mask-repeat-y\")}}\n" }, { "property": "-webkit-mask-repeat-y", "document": "---\ntitle: '-webkit-mask-repeat-y'\nslug: Web/CSS/-webkit-mask-repeat-y\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-repeat-y\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe `-webkit-mask-repeat-y` property sets whether and how a mask image is repeated (tiled) vertically.\n\n```css\n/* Keyword values */\n-webkit-mask-repeat-y: repeat;\n-webkit-mask-repeat-y: no-repeat;\n-webkit-mask-repeat-y: space;\n-webkit-mask-repeat-y: round;\n\n/* Multiple values */\n-webkit-mask-repeat-y: repeat, no-repeat, space;\n\n/* Global values */\n-webkit-mask-repeat-y: inherit;\n-webkit-mask-repeat-y: initial;\n-webkit-mask-repeat-y: unset;\n```\n\n## Syntax\n\n### Values\n\n- repeat\n - : The mask image is repeated vertically.\n- no-repeat\n - : 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.\n- repeat\n - : The mask image is repeated vertically.\n- space\n - : 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 {{cssxref(\"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.\n- round\n - : 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.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using a repeating or non-repeating mask image\n\n```css\n.exampleone {\n -webkit-mask-image: url('mask.png');\n -webkit-mask-repeat-y: repeat;\n}\n\n.exampletwo {\n -webkit-mask-image: url('mask.png');\n -webkit-mask-repeat-y: no-repeat;\n}\n```\n\n### Using multiple mask images\n\nYou can specify a different `` for each mask image, separated by commas:\n\n```css\n.examplethree {\n -webkit-mask-image: url('mask1.png'), url('mask2.png');\n -webkit-mask-repeat-y: repeat, space;\n}\n```\n\nEach image is matched with the corresponding repeat style, from first specified to last.\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n{{cssxref(\"-webkit-mask-repeat\")}}, {{cssxref(\"-webkit-mask-repeat-x\")}}\n" }, { "property": "-webkit-tap-highlight-color", "document": "---\ntitle: '-webkit-tap-highlight-color'\nslug: Web/CSS/-webkit-tap-highlight-color\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Non-standard\n - Reference\n - WebKit\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-tap-highlight-color\n---\n{{ CSSRef() }}\n\n{{ Non-standard_header() }}\n\n**`-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.\n\n```css\n-webkit-tap-highlight-color: red;\n-webkit-tap-highlight-color: transparent; /* for removing the highlight */\n```\n\n## Syntax\n\n### Values\n\nA {{Cssxref(\"<color>\")}}.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\nNot part of any standard. Apple has [a description in the Safari Web Content Guide](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5).\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions)\n- Related CSS pseudo-classes:\n\n - [`:hover`](/en-US/docs/Web/CSS/:hover)\n - [`:active`](/en-US/docs/Web/CSS/:active)\n - [`:visited`](/en-US/docs/Web/CSS/:visited)\n" }, { "property": "-webkit-text-fill-color", "document": "---\ntitle: '-webkit-text-fill-color'\nslug: Web/CSS/-webkit-text-fill-color\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-text-fill-color\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-text-fill-color`** CSS property specifies the fill [color](/en-US/docs/Web/CSS/color_value) of characters of text. If this property is not set, the value of the {{cssxref(\"color\")}} property is used.\n\n```css\n/* values */\n-webkit-text-fill-color: red;\n-webkit-text-fill-color: #000000;\n-webkit-text-fill-color: rgb(100, 200, 0);\n\n/* Global values */\n-webkit-text-fill-color: inherit;\n-webkit-text-fill-color: initial;\n-webkit-text-fill-color: unset;\n```\n\n## Syntax\n\n### Values\n\n- ``\n - : The foreground fill color of the element's text content.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Changing the fill color\n\n#### CSS\n\n```css\np {\n margin: 0;\n font-size: 3em;\n -webkit-text-fill-color: green;\n}\n```\n\n#### HTML\n\n```html\n

This text is green.

\n```\n\n#### Results\n\n{{EmbedLiveSample(\"Changing_the_fill_color\", \"380px\", \"60px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)\n- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)\n- {{cssxref(\"-webkit-text-stroke-color\")}}\n- {{cssxref(\"-webkit-text-stroke-width\")}}\n- {{cssxref(\"-webkit-text-stroke\")}}\n" }, { "property": "-webkit-text-stroke-color", "document": "---\ntitle: '-webkit-text-stroke-color'\nslug: Web/CSS/-webkit-text-stroke-color\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - WebKit\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-text-stroke-color\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-text-stroke-color`** CSS property specifies the stroke [color](/en-US/docs/Web/CSS/color_value) of characters of text. If this property is not set, the value of the {{cssxref(\"color\")}} property is used.\n\n```css\n/* values */\n-webkit-text-stroke-color: red;\n-webkit-text-stroke-color: #e08ab4;\n-webkit-text-stroke-color: rgb(200, 100, 0);\n\n/* Global values */\n-webkit-text-stroke-color: inherit;\n-webkit-text-stroke-color: initial;\n-webkit-text-stroke-color: unset;\n```\n\n## Syntax\n\n### Values\n\n- ``\n - : The color of the stroke.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Varying the stroke color\n\n#### HTML\n\n```html\n

Text with stroke

\n\n```\n\n#### CSS\n\n```css\np {\n margin: 0;\n font-size: 4em;\n -webkit-text-stroke-width: 3px;\n -webkit-text-stroke-color: #ff0000; /* Can be changed in the live sample */\n}\n```\n\n```js hidden\nvar colorPicker = document.querySelector(\"input\");\ncolorPicker.addEventListener(\"change\", function(evt) {\n document.querySelector(\"p\").style.webkitTextStrokeColor = evt.target.value;\n});\n```\n\n#### Results\n\n{{EmbedLiveSample(\"Varying_the_stroke_color\", \"500px\", \"100px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)\n- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)\n- {{cssxref(\"-webkit-text-fill-color\")}}\n- {{cssxref(\"-webkit-text-stroke-width\")}}\n- {{cssxref(\"-webkit-text-stroke\")}}\n" }, { "property": "-webkit-text-stroke", "document": "---\ntitle: '-webkit-text-stroke'\nslug: Web/CSS/-webkit-text-stroke\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - WebKit\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.-webkit-text-stroke\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-text-stroke`** [CSS](/en-US/docs/Web/CSS) property specifies the [width](/en-US/docs/Web/CSS/length) and [color](/en-US/docs/Web/CSS/color_value) of strokes for text characters. This is a shorthand property for the longhand properties {{cssxref(\"-webkit-text-stroke-width\")}} and {{cssxref(\"-webkit-text-stroke-color\")}}.\n\n```css\n/* Width and color values */\n-webkit-text-stroke: 4px navy;\ntext-stroke: 4px navy;\n\n/* Global values */\n-webkit-text-stroke: inherit;\n-webkit-text-stroke: initial;\n-webkit-text-stroke: unset;\ntext-stroke: inherit;\ntext-stroke: initial;\ntext-stroke: unset;\n```\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`-webkit-text-stroke-color`](/en-US/docs/Web/CSS/-webkit-text-stroke-color)\n- [`-webkit-text-stroke-width`](/en-US/docs/Web/CSS/-webkit-text-stroke-width)\n\n## Syntax\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The width of the stroke.\n- {{cssxref(\"<color>\")}}\n - : The color of the stroke.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Adding a red text stroke\n\n#### HTML\n\n```html\n

The stroke of this text is red.

\n```\n\n#### CSS\n\n```css\n#example {\n font-size: 3em;\n margin: 0;\n -webkit-text-stroke: 2px red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Adding_a_red_text_stroke\", 600, 60)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)\n- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)\n- {{cssxref(\"-webkit-text-stroke-width\")}}\n- {{cssxref(\"-webkit-text-stroke-color\")}}\n- {{cssxref(\"-webkit-text-fill-color\")}}\n" }, { "property": "-webkit-text-security", "document": "---\ntitle: '-webkit-text-security'\nslug: Web/CSS/-webkit-text-security\ntags:\n - CSS\n - CSS Property\n - NeedsCompatTable\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-text-security\n---\n{{ CSSRef() }} {{ Non-standard_header() }}\n\n**`-webkit-text-security`** is a non-standard CSS property that obfuscates characters in a {{HtmlElement(\"form\")}} field (such as {{HtmlElement(\"input\")}} or {{HtmlElement(\"textarea\")}}) by replacing them with a shape. It only affects fields that are _not_ of `type=password`.\n\n## Syntax\n\n```css\n-webkit-text-security: circle;\n-webkit-text-security: disc;\n-webkit-text-security: square;\n-webkit-text-security: none;\n```\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Obscuring a text input\n\nTry typing in the field below. If your browser supports this property, the characters should be visually replaced with squares.\n\n#### HTML\n\n```html\n\n\n```\n\n#### CSS\n\n```css\ninput {\n -webkit-text-security: square;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Obscuring_a_text_input\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions)\n" }, { "property": "-webkit-mask-position-y", "document": "---\ntitle: '-webkit-mask-position-y'\nslug: Web/CSS/-webkit-mask-position-y\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-mask-position-y\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe `-webkit-mask-position-y` CSS property sets the initial vertical position of a mask image.\n\n```css\n/* Keyword values */\n-webkit-mask-position-y: top;\n-webkit-mask-position-y: center;\n-webkit-mask-position-y: bottom;\n\n/* values */\n-webkit-mask-position-y: 100%;\n-webkit-mask-position-y: -50%;\n\n/* values */\n-webkit-mask-position-y: 50px;\n-webkit-mask-position-y: -1cm;\n\n/* Multiple values */\n-webkit-mask-position-y: 50px, 25%, -3em;\n\n/* Global values */\n-webkit-mask-position-y: inherit;\n-webkit-mask-position-y: initial;\n-webkit-mask-position-y: unset;\n```\n\n{{cssinfo}}\n\n## Syntax\n\n### Values\n\n- ``\n - : 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.\n- **`top`**\n - : Equivalent to `0%`.\n- **`bottom`**\n - : Equivalent to `100%`.\n- **`center`**\n - : Equivalent to `50%`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Vertically positioning a mask image\n\n```css\n.exampleOne {\n -webkit-mask-image: url(mask.png);\n -webkit-mask-position-y: bottom;\n}\n\n.exampleTwo {\n -webkit-mask-image: url(mask.png);\n -webkit-mask-position-y: 25%;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n{{cssxref(\"-webkit-mask-position\")}}, {{cssxref(\"-webkit-mask-position-x\")}}, {{cssxref(\"-webkit-mask-origin\")}}, {{cssxref(\"-webkit-mask-attachment\")}}\n" }, { "property": "-webkit-touch-callout", "document": "---\ntitle: '-webkit-touch-callout'\nslug: Web/CSS/-webkit-touch-callout\ntags:\n - CSS\n - CSS Property\n - Layout\n - NeedsLiveSample\n - Non-standard\n - Reference\n - WebKit\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-touch-callout\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe `-webkit-touch-callout` [CSS](/en-US/docs/Web/CSS) property controls the display of the default callout shown when you touch and hold a touch target.\n\nWhen a target is touched and held on iOS, Safari displays a callout information about the link. This property allows disabling that behavior.\n\n```css\n/* Keyword values */\n-webkit-touch-callout: default;\n-webkit-touch-callout: none;\n\n/* Global values */\n-webkit-touch-callout: initial;\n-webkit-touch-callout: inherit;\n-webkit-touch-callout: unset;\n```\n\n## Syntax\n\n### Values\n\n- `default`\n - : The default callout is displayed.\n- `none`\n - : The callout is disabled.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Turn off touch callout\n\n```css\n.example {\n -webkit-touch-callout: none;\n}\n```\n\n## Specifications\n\nNot part of any standard. Apple has a [description in the Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout).\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions)\n- [-webkit-touch-callout in the Apple developer documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout)\n" }, { "property": "@charset", "document": "---\ntitle: '@charset'\nslug: Web/CSS/@charset\ntags:\n - At-rule\n - CSS\n - Layout\n - Reference\n - Web\nbrowser-compat: css.at-rules.charset\n---\n{{ CSSRef }}\n\nThe **`@charset`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements), it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#conditional_group_rules). If several `@charset` at-rules are defined, only the first one is used, and it cannot be used inside a `style` attribute on an HTML element or inside the {{ HTMLElement(\"style\") }} element where the character set of the HTML page is relevant.\n\n```css\n@charset \"utf-8\";\n```\n\nThis at-rule is useful when using non-ASCII characters in some CSS properties, like {{ cssxref(\"content\") }}.\n\nAs there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a result) :\n\n1. The value of the [Unicode byte-order](https://en.wikipedia.org/wiki/Byte_order_mark) character placed at the beginning of the file.\n2. The value given by the `charset` attribute of the `Content-Type:` HTTP header or the equivalent in the protocol used to serve the style sheet.\n3. The `@charset` CSS at-rule.\n4. Use the character encoding defined by the referring document: the `charset` attribute of the {{ HTMLElement(\"link\") }} element. This method is obsoleted in HTML5 and must not be used.\n5. Assume that the document is UTF-8\n\n## Syntax\n\n```css\n@charset \"UTF-8\";\n@charset \"iso-8859-15\";\n```\n\nwhere:\n\n- _charset_\n - : Is a {{cssxref(\"<string>\")}} denoting the character encoding to be used. It must be the name of a web-safe character encoding defined in the [IANA-registry](https://www.iana.org/assignments/character-sets/character-sets.xhtml), and must be double-quoted, following exactly one space character (U+0020), and immediately terminated with a semicolon. If several names are associated with an encoding, only the one marked with *preferred* must be used.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Valid and invalid charset declarations\n\n```css\n@charset \"UTF-8\"; /* Set the encoding of the style sheet to Unicode UTF-8 */\n@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */\n@charset \"UTF-8\"; /* Invalid, more than one space */\n @charset \"UTF-8\"; /* Invalid, there is a character (a space) before the at-rule */\n@charset UTF-8; /* Invalid, without ' or \", the charset is not a CSS {{cssxref(\"<string>\")}} */\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Character set](/en-US/docs/Glossary/character_set) glossary entry\n- [Unicode](/en-US/docs/Glossary/Unicode) glossary entry\n" }, { "property": "@color-profile", "document": "---\ntitle: '@color-profile'\nslug: Web/CSS/@color-profile\ntags:\n - At-rule\n - CSS\n - Reference\n - Web\n - Property\n - Color\n - color-profile\nbrowser-compat: css.at-rules.color-profile\n---\n{{CSSRef}}\n\nThe **`@color-profile`** [CSS](/en-US/docs/Web/CSS) {{cssxref(\"at-rule\")}} defines and names a color profile which can later be used in the {{cssxref(\"color_value/color\", \"color()\")}} function to specify a color.\n\n## Syntax\n\n```css\n@color-profile --swop5c {\n src: url('https://example.org/SWOP2006_Coated5v2.icc');\n}\n```\n\n### Descriptors\n\n- `src`\n - : Specifies the URL to retrieve the color-profile information from.\n- `rendering-intent`\n\n - : If the color profile contains more than one rendering intent, this descriptor allows one to be selected as the one to use to define how to map the color to smaller {{glossary(\"gamut\")}}s than this profile is defined over.\n\n If used, it must be one of the following keywords:\n\n - `relative-colorimetric`\n - : Media-relative colorimetric is required to leave source colors that fall inside the destination medium {{glossary(\"gamut\")}} unchanged relative to the respective media white points. Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.\n - `absolute-colorimetric`\n - : ICC-absolute colorimetric is required to leave source colors that fall inside the destination medium {{glossary(\"gamut\")}} unchanged relative to the adopted white (a perfect reflecting diffuser). Source colors that are out of the destination medium gamut are mapped to colors on the gamut boundary using a variety of different methods.\n - `perceptual`\n - : This method is often the preferred choice for images, especially when there are substantial differences between the source and destination (such as a screen display image reproduced on a reflection print). It takes the colors of the source image and re-optimizes the appearance for the destination medium using proprietary methods.\n - `saturation`\n - : This option was created to preserve the relative saturation (chroma) of the original, and to keep solid colors pure. However, it experienced interoperability problems like the perceptual intent.\n\n## Examples\n\nThis example is from the specification and demonstrates using offset printing to ISO 12647-2:2004 using the CGATS/SWOP TR005 2007 characterization data on grade 5 paper with an ink limit of 300% Total Area Coverage, and medium gray component replacement (GCR).\n\nThe `src` descriptor specifies the URL to retrieve the color-profile information from.\n\n```css\n@color-profile --swop5c {\n src: url('https://example.org/SWOP2006_Coated5v2.icc');\n}\n.header {\n background-color: color(--swop5c 0% 70% 20% 0%);\n}\n```\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n" }, { "property": "@document", "document": "---\ntitle: '@document'\nslug: Web/CSS/@document\ntags:\n - At-rule\n - CSS\n - Reference\n - Deprecated\nbrowser-compat: css.at-rules.document\n---\n{{CSSRef}}{{Deprecated_header}}\n\nThe **`@document`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.\n\n```css\n@document url(\"https://www.example.com/\") {\n h1 {\n color: green;\n }\n}\n```\n\n## Syntax\n\nAn `@document` rule can specify one or more matching functions. If any of the functions apply to a given URL, the rule will take effect on that URL. The functions available are:\n\n- `url()`, which matches an exact URL.\n- `url-prefix()`, which matches if the document URL starts with the value provided.\n- `domain()`, which matches if the document URL is on the domain provided (or a subdomain of it).\n- `media-document()`, with the parameter of video, image, plugin or all.\n- `regexp()`, which matches if the document URL is matched by the [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) provided. The expression must match the entire URL.\n\nThe values provided to the `url()`, `url-prefix()`, `domain()`, and `media-document()` functions can be optionally enclosed by single or double quotes. The values provided to the `regexp()` function _must_ be enclosed in quotes.\n\nEscaped values provided to the `regexp()` function must additionally be escaped from the CSS. For example, a `.` (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to `\\.`), then escape that string using CSS rules (to `\\\\.`).\n\n`@document` is currently only supported in Firefox; if you wanted to replicate using such functionality in your own non-Firefox browser, you could try using [this polyfill](https://github.com/An-Error94/Handy-Scripts/tree/master/%40document-polyfill) by @An-Error94, which uses a combination of a user script, [data-\\* attributes](/en-US/docs/Web/HTML/Global_attributes/data-*), and [attribute selectors](/en-US/docs/Web/CSS/Attribute_selectors).\n\n> **Note:** There is a -moz-prefixed version of this property — `@-moz-document`. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks (See {{bug(1035091)}}).\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying document for CSS rule\n\n```css\n@document url(\"http://www.w3.org/\"),\n url-prefix(\"http://www.w3.org/Style/\"),\n domain(\"mozilla.org\"),\n media-document(\"video\"),\n regexp(\"https:.*\") {\n /* CSS rules here apply to:\n - The page \"http://www.w3.org/\"\n - Any page whose URL begins with \"http://www.w3.org/Style/\"\n - Any page whose URL's host is \"mozilla.org\"\n or ends with \".mozilla.org\"\n - Any standalone video\n - Any page whose URL starts with \"https:\" */\n\n /* Make the above-mentioned pages really ugly */\n body {\n color: purple;\n background: yellow;\n }\n}\n```\n\n## Specifications\n\n[Initially](https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document) in {{SpecName('CSS3 Conditional')}}, `@document` has been [postponed](https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) to Level 4 then removed.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Per-site user style sheet rules](https://lists.w3.org/Archives/Public/www-style/2004Aug/0135) on the www-style mailing list.\n" }, { "property": "@font-face", "document": "---\ntitle: '@font-face'\nslug: Web/CSS/@font-face\ntags:\n - '@font-face'\n - At-rule\n - CSS\n - CSS Fonts\n - Fonts\n - Nick Names\n - Reference\n - typography\nbrowser-compat: css.at-rules.font-face\n---\n{{CSSRef}}\n\nThe **`@font-face`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own computer.\n\n## Syntax\n\n```css\n@font-face {\n font-family: \"Open Sans\";\n src: url(\"/fonts/OpenSans-Regular-webfont.woff2\") format(\"woff2\"),\n url(\"/fonts/OpenSans-Regular-webfont.woff\") format(\"woff\");\n}\n```\n\n### Descriptors\n\n- {{cssxref(\"@font-face/ascent-override\", \"ascent-override\")}}\n - : Defines the ascent metric for the font.\n- {{cssxref(\"@font-face/descent-override\", \"descent-override\")}}\n - : Defines the descent metric for the font.\n- {{cssxref(\"@font-face/font-display\", \"font-display\")}}\n - : Determines how a font face is displayed based on whether and when it is downloaded and ready to use.\n- {{cssxref(\"@font-face/font-family\", \"font-family\")}}\n - : Specifies a name that will be used as the font face value for font properties.\n- {{cssxref(\"@font-face/font-stretch\", \"font-stretch\")}}\n - : A {{cssxref(\"font-stretch\")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-stretch: 50% 200%;`\n- {{cssxref(\"@font-face/font-style\", \"font-style\")}}\n - : A {{cssxref(\"font-style\")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-style: oblique 20deg 50deg;`\n- {{cssxref(\"@font-face/font-weight\", \"font-weight\")}}\n - : A {{cssxref(\"font-weight\")}} value. Accepts two values to specify a range that is supported by a font-face, for example `font-weight: 100 400;`\n- {{cssxref(\"@font-face/font-variant\", \"font-variant\")}}\n - : A {{cssxref(\"font-variant\")}} value.\n- {{cssxref(\"font-feature-settings\", \"font-feature-settings\")}}\n - : Allows control over advanced typographic features in OpenType fonts.\n- {{cssxref(\"@font-face/font-variation-settings\", \"font-variation-settings\")}}\n - : Allows low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features to vary, along with their variation values.\n- {{cssxref(\"@font-face/line-gap-override\", \"line-gap-override\")}}\n - : Defines the line gap metric for the font.\n- {{cssxref(\"@font-face/size-adjust\", \"size-adjust\")}}{{experimental_inline}}\n - : Defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.\n- {{cssxref(\"@font-face/src\", \"src\")}}\n\n - : Specifies the resource containing the font data. This can be a URL to a remote font file location or the name of a font on the user's computer.\n\n To provide the browser with a hint as to what format a font resource is — so it can select a suitable one — it is possible to include a format type inside a `format()` function:\n\n ```css\n src: url(ideal-sans-serif.woff) format(\"woff\"),\n url(basic-sans-serif.ttf) format(\"truetype\");\n ```\n\n The available types are: `\"woff\"`, `\"woff2\"`, `\"truetype\"`, `\"opentype\"`, `\"embedded-opentype\"`, and `\"svg\"`.\n\n- {{cssxref(\"@font-face/unicode-range\", \"unicode-range\")}}\n - : The range of Unicode code points to be used from the font.\n\n## Description\n\nIf the `local()` function is provided, specifying a font name to look for on the user's computer, and if the {{Glossary(\"user agent\")}} finds a match, that local font is used. Otherwise, the font resource specified using the `url()` function is downloaded and used.\n\nBy allowing authors to provide their own fonts, `@font-face` makes it possible to design content without being limited to the so-called \"web-safe\" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.\n\nIt's common to use both `url()` and `local()` together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.\n\nThe `@font-face` at-rule may be used not only at the top level of a CSS, but also inside any [CSS conditional-group at-rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).\n\n### Font MIME Types\n\n| Format | MIME type |\n| ---------------------- | ------------ |\n| TrueType | `font/ttf` |\n| OpenType | `font/otf` |\n| Web Open Font Format | `font/woff` |\n| Web Open Font Format 2 | `font/woff2` |\n\n### Notes\n\n- Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless [HTTP access controls](/en-US/docs/Web/HTTP/CORS) are used to relax this restriction.\n- `@font-face` cannot be declared within a CSS selector. For example, the following will not work:\n\n ```css example-bad\n .className {\n @font-face {\n font-family: MyHelvetica;\n src: local(\"Helvetica Neue Bold\"),\n local(\"HelveticaNeue-Bold\"),\n url(MgOpenModernaBold.ttf);\n font-weight: bold;\n }\n }\n ```\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying a downloadable font\n\nThis example specifies a downloadable font to use, applying it to the entire body of the document:\n\n```html\n\n\n Web Font Sample\n \n\n\n This is Bitstream Vera Serif Bold.\n\n\n```\n\nThe output of this example code looks like so:\n\n{{EmbedGHLiveSample(\"css-examples/web-fonts/basic-web-font.html\", '100%', 50)}}\n\n### Specifying local font alternatives\n\nIn this example, the user's local copy of \"Helvetica Neue Bold\" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named \"MgOpenModernaBold.ttf\" is used instead:\n\n```css\n@font-face {\n font-family: MyHelvetica;\n src: local(\"Helvetica Neue Bold\"),\n local(\"HelveticaNeue-Bold\"),\n url(MgOpenModernaBold.ttf);\n font-weight: bold;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [About WOFF](/en-US/docs/Web/Guide/WOFF)\n- [FontSquirrel @font-face generator](https://www.fontsquirrel.com/tools/webfont-generator)\n- [Beautiful fonts with @font-face](https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/)\n- [Font Library](https://fontlibrary.org/)\n" }, { "property": "@font-feature-values", "document": "---\ntitle: '@font-feature-values'\nslug: Web/CSS/@font-feature-values\ntags:\n - At-rule\n - CSS\n - CSS Fonts\n - Reference\nbrowser-compat: css.at-rules.font-feature-values\n---\n{{CSSRef}}\n\nThe **`@font-feature-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule ) lets you use a common name in the {{cssxref(\"font-variant-alternates\")}} property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.\n\nThe `@font-feature-values` at-rule may be used either at the top level of your CSS or inside any [CSS conditional-group at-rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).\n\n## Syntax\n\n### Feature value blocks\n\n- `@swash`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"swash()\", \"#swash()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. A swash feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.\n- `@annotation`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"annotation()\", \"#annotation()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. An annotation feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.\n- `@ornaments`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"ornaments()\", \"#ornaments()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. An ornaments feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.\n- `@stylistic`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"stylistic()\", \"#stylistic()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. A stylistic feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.\n- `@styleset`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"styleset()\", \"#styleset()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. A styleset feature value definition allows an unlimited number of values: `ident1: 2 4 12 1` maps to the OpenType values `ss02`, `ss04`, `ss12`, and `ss01`. Note that values higher than `99` are valid, but don't map to any OpenType values and are ignored.\n- `@character-variant`\n - : Specifies a feature name that will work with the {{cssxref(\"font-variant-alternates\", \"character-variant()\", \"#character-variant()\")}} functional notation of {{cssxref(\"font-variant-alternates\")}}. A character-variant feature value definition allows either one or two values: `ident1: 3` maps to `cv03=1`, and `ident2: 2 4` maps to `cv02=4`, but `ident2: 2 4 5` is invalid.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using @styleset in a @font-feature-values rule\n\n```css\n/* At-rule for \"nice-style\" in Font One */\n@font-feature-values Font One {\n @styleset {\n nice-style: 12;\n }\n}\n\n/* At-rule for \"nice-style\" in Font Two */\n@font-feature-values Font Two {\n @styleset {\n nice-style: 4;\n }\n}\n\n…\n\n/* Apply the at-rules with a single declaration */\n.nice-look {\n font-variant-alternates: styleset(nice-style);\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The {{cssxref(\"font-variant-alternates\")}} property that uses values that this at-rule defines.\n" }, { "property": "@counter-style", "document": "---\ntitle: '@counter-style'\nslug: Web/CSS/@counter-style\ntags:\n - At-rule\n - CSS\n - CSS Counter\n - Reference\n - counter\nbrowser-compat: css.at-rules.counter-style\n---\n{{CSSRef}}\n\nThe **`@counter-style`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you define counter styles that are not part of the predefined set of styles. A `@counter-style` rule defines how to convert a counter value into a string representation.\n\n```css\n@counter-style thumbs {\n system: cyclic;\n symbols: \"\\1F44D\";\n suffix: \" \";\n}\n\nul {\n list-style: thumbs;\n}\n```\n\nThe initial version of CSS defined a set of useful counter styles. However, although more styles were added to this set of predefined styles over the years, this system proved too restrictive to fulfill the needs of worldwide typography. The `@counter-style` at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.\n\n## Syntax\n\n### Descriptors\n\nEach `@counter-style` is identified by a name and has a set of descriptors.\n\n- {{cssxref(\"@counter-style/system\", \"system\")}}\n - : Specifies the algorithm to be used for converting the integer value of a counter to a string representation.\n\n\n\n- {{cssxref(\"@counter-style/negative\", \"negative\")}}\n - : Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.\n\n\n\n- {{cssxref(\"@counter-style/prefix\", \"prefix\")}}\n - : Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.\n\n\n\n- {{cssxref(\"@counter-style/suffix\", \"suffix\")}}\n - : Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Suffixes come after the marker representation.\n\n\n\n- {{cssxref(\"@counter-style/range\", \"range\")}}\n - : Defines the range of values over which the counter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.\n\n\n\n- {{cssxref(\"@counter-style/pad\", \"pad\")}}\n - : Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.\n\n\n\n- {{cssxref(\"@counter-style/fallback\", \"fallback\")}}\n - : Specifies a system to fall back into if either the specified system is unable to construct the representation of a counter value or if the counter value is outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.\n\n\n\n- {{cssxref(\"@counter-style/symbols\", \"symbols\")}}\n\n - : Specifies the symbols that are to be used for the marker representations. Symbols can contain strings, images, or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.\n\n The below `@counter-style` rule uses images instead of character symbols. Image values for symbols is currently an 'at risk' feature, and is not implemented in any browser.\n\n ```css\n @counter-style winners-list {\n system: fixed;\n symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);\n suffix: \" \";\n }\n ```\n\n\n\n- {{cssxref(\"@counter-style/additive-symbols\", \"additive-symbols\")}}\n - : While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on _additive tuples_ described in this descriptor. Each additive tuple consists of a counter symbol and a non-negative integer weight. The additive tuples must be specified in the descending order of their weights.\n\n\n\n- {{cssxref(\"@counter-style/speak-as\", \"speak-as\")}}\n - : Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying symbols with counter-style\n\n```css\n@counter-style circled-alpha {\n system: fixed;\n symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;\n suffix: \" \";\n}\n```\n\nThe above counter style rule can be applied to lists like this:\n\n```css\n.items {\n list-style: circled-alpha;\n}\n```\n\nWhich will produce lists like this:\n\nⒶ One\nⒷ Two\nⒸ Three\nⒹ Four\nⒺ FIve\n...\n...\nⓎ Twenty Five\nⓏ Twenty Six\n27 Twenty Seven\n28 Twenty Eight\n29 Twenty Nine\n30 Thirty\n\nSee more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/).\n\n### Ready-made counter styles\n\nFind a collection of over 100 `counter-style` code snippets in the [Ready-made Counter Styles](https://www.w3.org/TR/predefined-counter-styles/) document. This document provides counter styles that meet the needs of languages and cultures around the world.\n\nThe [Counter styles converter](https://r12a.github.io/app-counters/) pulls from this list to test and create copy and paste code for counter styles.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"list-style\")}}, {{Cssxref(\"list-style-image\")}}, {{Cssxref(\"list-style-position\")}}, {{Cssxref(\"list-style-type\")}}\n- {{cssxref(\"symbols\", \"symbols()\")}}, the functional notation creating anonymous counter styles.\n- CSS {{Cssxref(\"counter\", \"counter()\")}} and {{Cssxref(\"counters\", \"counters()\")}} functions\n- [Counter style demo](https://mdn.github.io/css-examples/counter-style-demo/) ([code](https://github.com/mdn/css-examples/tree/main/counter-style-demo))\n" }, { "property": "@import", "document": "---\ntitle: '@import'\nslug: Web/CSS/@import\ntags:\n - At-rule\n - CSS\n - CSS Cascade\n - CSS Conditional Rules\n - Reference\nbrowser-compat: css.at-rules.import\n---\n{{CSSRef}}\n\nThe **`@import`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) is used to import style rules from other stylesheets.\n\n## Syntax\n\n```css\n@import url;\n@import url list-of-media-queries;\n@import url supports( supports-query );\n@import url supports( supports-query ) list-of-media-queries;\n@import url layer;\n@import url layer( layer-name );\n@import url layer( layer-name ) list-of-media-queries;\n@import url layer( layer-name ) supports( supports-query ) list-of-media-queries;\n```\n\nwhere:\n\n- _url_\n - : Is a {{CSSxRef(\"<string>\")}}, a ``, or a {{CSSxRef(\"url\")}} function representing the location of the resource to import. The URL may be absolute or relative.\n- _list-of-media-queries_\n - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.\n- _supports-query_\n - : Is either a {{CSSxRef(\"@supports\", \"<supports-condition>\", \"#Syntax\")}} or a {{CSSxRef(\"Syntax\", \"<declaration>\", \"#CSS_declarations\")}}. If the import conditions do not match, the rules in the imported stylesheet do not apply.\n- _layer-name_\n - : Is the name of a [cascade layer](/en-US/docs/Web/CSS/@layer) into which the contents of the linked resource are imported.\n\n## Description\n\nImported rules must come before all other types of rules, except {{CSSxRef(\"@charset\")}} rules. The `@import` rule is not a [nested statement](/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](/en-US/docs/Web/CSS/At-rule#Conditional_Group_Rules).\n\nSo that {{glossary(\"user agents\")}} can avoid retrieving resources for unsupported media types, authors may specify media-dependent import conditions. These conditional imports specify comma-separated [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) after the URL. In the absence of any media query, the import is unconditional. Specifying `all` for the `list-of-media-queries` has the same effect.\n\nThe `@import` rule can also be used to create a [cascade layer](/en-US/docs/Web/CSS/@layer) by importing rules from a linked resource. Rules can also be imported into an existing cascade layer. The `layer` keyword or the `layer()` function is used with `@import` for this purpose. Declarations in style rules from imported stylesheets interact with the cascade as if they were written literally into the stylesheet at the point of the import.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Importing CSS rules\n\n```css\n@import 'custom.css';\n@import url(\"chrome://communicator/skin/\");\n```\n\nThe two examples above show how to specify the _url_ as a `` and as a `url()` function.\n\n### Importing CSS rules conditionally\n\n```css\n@import url(\"fineprint.css\") print;\n@import url(\"bluish.css\") print, screen;\n@import \"common.css\" screen;\n@import url('landscape.css') screen and (orientation: landscape);\n@import url(\"narrow.css\") supports(display: flex) screen and (max-width: 400px);\n```\n\nThe `@import` rules in the above examples show media-dependent conditions that will need to be true before the linked CSS rules are applied.\n\nSo for instance, the last `@import` rule will load the `narrow.css` stylesheet if the user agent supports [`display: flex`](/en-US/docs/Web/CSS/display#display_flex). The [media query](en-US/docs/Web/CSS/Media_Queries/Using_media_queries), using the `and` operator, further specifies to apply the style rules only to a screen device with a maximum viewport width of 400px.\n\n### Importing CSS rules into a cascade layer\n\n```css\n@import 'theme.css' layer(utilities);\n```\n\nIn the above example, a cascade layer named `utilities` is created and it will include rules from the imported stylesheet `theme`.\n\n```css\n@import url(headings.css) layer(default);\n@import url(links.css) layer(default);\n\n@layer default {\n audio[controls] {\n display: block;\n }\n}\n```\n\nIn the above example, the rules in `headings.css` and `links.css` stylesheets cascade within the same layer as the `audio[controls]` rule.\n\n```css\n@import 'theme.css' layer();\n@import 'style.css' layer;\n```\n\nThis is an example of creating two separate anonymous cascade layers and importing the linked rules into each one separately. A cascade layer declared without a name is an anonymous cascade layer. Anonymous cascade layers are finalized when created: they do not provide any means for re-arranging or adding styles and they cannot be referenced from outside.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"@media\")}}\n- {{CSSxRef(\"@supports\")}}\n" }, { "property": "-webkit-overflow-scrolling", "document": "---\ntitle: '-webkit-overflow-scrolling'\nslug: Web/CSS/-webkit-overflow-scrolling\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-overflow-scrolling\n---\n{{CSSRef}} {{Non-standard_header}}\n\nThe `-webkit-overflow-scrolling` [CSS](/en-US/docs/Web/CSS) property controls whether or not touch devices use momentum-based scrolling for a given element.\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Use \"regular\" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.\n- `touch`\n - : 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.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
\n

\n This paragraph has momentum scrolling\n

\n
\n
\n

\n This paragraph does not.\n

\n
\n```\n\n### CSS\n\n```css\ndiv {\n width: 100%;\n overflow: auto;\n}\n\np {\n width: 200%;\n background: #f5f9fa;\n border: 2px solid #eaf2f4;\n padding: 10px;\n}\n\n.scroll-touch {\n -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */\n}\n\n.scroll-auto {\n -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */\n}\n```\n\n### Results\n\n{{EmbedLiveSample('Examples')}}\n\n## Specifications\n\nNot part of any standard. Apple has [a description in the Safari CSS Reference](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling).\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS-Tricks article with demo](https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)\n- [Smashing Magazine - describing the effect of scroll bouncing and how it works on different web browsers](https://www.smashingmagazine.com/2018/08/scroll-bouncing-websites/)\n- [Safari 13 Release notes](https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes): Indicates the addition of support for one-finger accelerated scrolling to all frames and `overflow:scroll` elements, eliminating the need to set `-webkit-overflow-scrolling: touch`.\n" }, { "property": "-webkit-text-stroke-width", "document": "---\ntitle: '-webkit-text-stroke-width'\nslug: Web/CSS/-webkit-text-stroke-width\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - WebKit\n - recipe:css-property\nbrowser-compat: css.properties.-webkit-text-stroke-width\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`-webkit-text-stroke-width`** [CSS](/en-US/docs/Web/CSS) property specifies the width of the stroke for text.\n\n## Syntax\n\n```css\n/* Keyword values */\n-webkit-text-stroke-width: thin;\n-webkit-text-stroke-width: medium;\n-webkit-text-stroke-width: thick;\n\n/* values */\n-webkit-text-stroke-width: 2px;\n-webkit-text-stroke-width: 0.1em;\n-webkit-text-stroke-width: 1mm;\n-webkit-text-stroke-width: 5pt;\n\n/* Global values */\n-webkit-text-stroke-width: inherit;\n-webkit-text-stroke-width: initial;\n-webkit-text-stroke-width: unset;\n```\n\n### Values\n\n- ``\n - : The width of the stroke.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Varying stroke widths\n\n#### CSS\n\n```css\np {\n margin: 0;\n font-size: 4em;\n -webkit-text-stroke-color: red;\n}\n\n#thin {\n -webkit-text-stroke-width: thin;\n}\n\n#medium {\n -webkit-text-stroke-width: 3px;\n}\n\n#thick {\n -webkit-text-stroke-width: 1.5mm;\n}\n```\n\n#### HTML\n\n```html\n

Thin stroke

\n

Medium stroke

\n

Thick stroke

\n```\n\n#### Results\n\n{{EmbedLiveSample(\"Varying_stroke_widths\", \"450px\", \"230px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Surfin' Safari blog post announcing this feature](https://webkit.org/blog/85/introducing-text-stroke/)\n- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)\n- {{cssxref(\"-webkit-text-stroke-color\")}}\n- {{cssxref(\"-webkit-text-stroke\")}}\n- {{cssxref(\"-webkit-text-fill-color\")}}\n" }, { "property": "@keyframes", "document": "---\ntitle: '@keyframes'\nslug: Web/CSS/@keyframes\ntags:\n - Animations\n - At-rule\n - CSS\n - Reference\nbrowser-compat: css.at-rules.keyframes\n---\n{{CSSRef}}\n\nThe **`@keyframes`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than [transitions](/en-US/docs/Web/CSS/CSS_Transitions).\n\n## Syntax\n\n```css\n@keyframes slidein {\n from {\n transform: translateX(0%);\n }\n\n to {\n transform: translateX(100%);\n }\n}\n```\n\n### Values\n\n- {{cssxref(\"custom-ident\")}}\n - : A name identifying the keyframe list. This must match the identifier production in CSS syntax.\n- `from`\n - : A starting offset of `0%`.\n- `to`\n - : An ending offset of `100%`.\n- {{cssxref(\"<percentage>\")}}\n - : A percentage of the time through the animation sequence at which the specified keyframe should occur.\n\n## Description\n\nTo use keyframes, create a `@keyframes` rule with a name that is then used by the {{ cssxref(\"animation-name\") }} property to match an animation to its keyframe declaration. Each `@keyframes` rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.\n\nYou can list the keyframe percentages in any order; they will be handled in the order they should occur.\n\nJavaScript can access the `@keyframes` at-rule with the CSS object model interface {{domxref(\"CSSKeyframesRule\")}}.\n\n### Valid keyframe lists\n\nIf a keyframe rule doesn't specify the start or end states of the animation (that is, `0%`/`from` and `100%`/`to`), browsers will use the element's existing styles for the start/end states. This can be used to animate an element from its initial state and back.\n\nProperties that can't be animated in keyframe rules are ignored, but supported properties will still be animated.\n\n### Resolving duplicates\n\nIf multiple keyframe sets exist for a given name, the last one encountered by the parser is used. `@keyframes` rules don't cascade, so animations never derive keyframes from more than one rule set.\n\nIf a given animation time offset is duplicated, all keyframes in the `@keyframes` rule for that percentage are used for that frame. There is cascading within a `@keyframes` rule if multiple keyframes specify the same percentage values.\n\n### When properties are left out of some keyframes\n\nProperties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. For example:\n\n```css\n@keyframes identifier {\n 0% { top: 0; left: 0; }\n 30% { top: 50px; }\n 68%, 72% { left: 50px; }\n 100% { top: 100px; left: 100%; }\n}\n```\n\nHere, the {{ cssxref(\"top\") }} property animates using the `0%`, `30%`, and `100%` keyframes, and {{ cssxref(\"left\") }} animates using the `0%`, `68%`, `72%` and `100%` keyframes.\n\n### When a keyframe is defined multiple times\n\nIf a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. For example:\n\n```css\n@keyframes identifier {\n 0% { top: 0; }\n 50% { top: 30px; left: 20px; }\n 50% { top: 10px; }\n 100% { top: 0; }\n}\n```\n\nIn this example, at the `50%` keyframe, the values used are `top: 10px` and `left: 20px`.\n\nCascading keyframes are supported starting in Firefox 14.\n\n### `!important` in a keyframe\n\nDeclarations in a keyframe qualified with `!important` are ignored.\n\n```css\n@keyframes important1 {\n from { margin-top: 50px; }\n 50% { margin-top: 150px !important; } /* ignored */\n to { margin-top: 100px; }\n}\n\n@keyframes important2 {\n from { margin-top: 50px;\n margin-bottom: 100px; }\n to { margin-top: 150px !important; /* ignored */\n margin-bottom: 50px; }\n}\n```\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### CSS animation examples\n\nSee [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for examples.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)\n- {{domxref(\"AnimationEvent\")}}\n" }, { "property": "@layer", "document": "---\ntitle: '@layer'\nslug: Web/CSS/@layer\ntags:\n - At-rule\n - CSS\n - Reference\n - Web\n - layer\n - cascade\nbrowser-compat: css.at-rules.layer\n---\n{{CSSRef}}\n\nThe **`@layer`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) declares a _cascade layer_. Rules within a cascade layer cascade together, giving more control over the cascade to web developers.\n\n```css\n@layer utilities {\n /* creates a named layer called utilities. */\n}\n```\n\n## Syntax\n\nThe `@layer` at-rule is used to create a cascade layer in one of three ways. The first is as in the example above, creating a block at-rule with the CSS rules for that layer inside.\n\n```css\n@layer utilities {\n .padding-sm {\n padding: .5rem;\n }\n\n .padding-lg {\n padding: .8rem;\n }\n}\n```\n\nA cascade layer can be created with {{cssxref(\"@import\")}}, in this case the rules would be in the imported stylesheet:\n\n```css\n@import 'utilities.css' layer(utilities);\n```\n\nYou can also create a named cascade layer without assigning any styles. This can be a single name:\n\n```css\n@layer utilities;\n```\n\nOr, multiple layers can be defined at once. For example:\n\n```css\n@layer theme, layout, utilities;\n```\n\nThis is useful because the initial order in which layers are declared indicates which layer has precedence. As with declarations, the last layer to be listed will win if declarations are found in multiple layers. Therefore, with the preceding example, if a competing rule was found in `theme` and `utilities` the one in `utilities` would win and be applied.\n\nThe rule in `utilities` would be applied _even if it has lower specificity_ than the rule in `theme`. This is because once layer order has been established, specificity and order of appearance are ignored. This enables the creation of simpler CSS selectors, as you do not have to ensure that a selector will have high enough specificity to override competing rules, all you need to ensure is that it appears in a later layer.\n\n> **Note:** Having declared your layer names, thus setting their order, you can add CSS rules to the layer by re-declaring the name. The styles are then appended to the layer and the layer order will not be changed.\n\nAny styles not in a layer are gathered together and placed into an anonymous layer that comes after all the declared layers. This means that any styles declared outside of a layer will override styles declared in a layer.\n\n### Nesting layers\n\nLayers may be nested. For example:\n\n```css\n@layer framework {\n @layer layout {\n\n }\n}\n```\n\nTo append rules to the `layout` layer inside `framework` join the two names with a `.`.\n\n```css\n@layer framework.layout {\n p {\n margin-block: 1rem;\n }\n}\n```\n\n### Anonymous layers\n\nIf a layer is created with no name, for example:\n\n```css\n@layer {\n p {\n margin-block: 1rem;\n }\n}\n```\n\nThen an anonymous, unnamed, layer is created. This functions in the same way as named layers, however rules cannot be assigned to it later.\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Simple example\n\nIn the following example, two CSS rules are created. One for the {{htmlelement(\"p\")}} element outside of any layer and one inside a layer named `type` for `.box p`.\n\nWithout layers, the selector `.box p` would have the highest specificity and therefore the text `Hello, world!` will display in green. As the `type` layer comes before the anonymous layer created to hold non-layer content, the text will be purple.\n\nAlso notice order. Even though we declare the non-layered style first, it's still applied _after_ the layer styles.\n\n#### HTML\n\n```html\n
\n

Hello, world!

\n
\n```\n\n#### CSS\n\n```css\np {\n color: rebeccapurple;\n}\n\n@layer type {\n .box p {\n font-weight: bold;\n font-size: 1.3em;\n color: green;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Simple_example\")}}\n\n### Assigning rules to existing layers\n\nIn the following example, two layers are created with no rules applied, then CSS rules are applied to the two layers. The `base` layer defines a color, border, font-size, and padding. The `special` layer defines a different color. As `special` comes last when the layers were defined, the color it provides is used and the text is displayed using `rebeccapurple`. All of the other rules from `base` still apply.\n\n#### HTML\n\n```html\n
I am displayed in color: rebeccapurple\nbecause the special layer comes after the base layer.\nMy green border, font-size, and padding come from the base layer.
\n```\n\n#### CSS\n\n```css\n@layer base, special;\n\n@layer special {\n .item {\n color: rebeccapurple;\n }\n}\n\n@layer base {\n .item {\n color: green;\n border: 5px solid green;\n font-size: 1.3em;\n padding: .5em;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Assigning_rules_to_existing_layers\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [The Future of CSS: Cascade Layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/)\n" }, { "property": "@media", "document": "---\ntitle: '@media'\nslug: Web/CSS/@media\ntags:\n - '@media'\n - At-rule\n - CSS\n - Conditional\n - Reference\nbrowser-compat: css.at-rules.media\n---\n{{CSSRef}}\n\nThe **`@media`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) can be used to apply part of a style sheet based on the result of one or more [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.\n\n> **Note:** In JavaScript, the rules created using `@media` can be accessed with the {{domxref(\"CSSMediaRule\")}} CSS object model interface.\n\n## Syntax\n\nThe `@media` at-rule may be placed at the top level of your code or nested inside any other [conditional group at-rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).\n\n```css\n/* At the top level of your code */\n@media screen and (min-width: 900px) {\n article {\n padding: 1rem 3rem;\n }\n}\n\n/* Nested within another conditional at-rule */\n@supports (display: flex) {\n @media screen and (min-width: 900px) {\n article {\n display: flex;\n }\n }\n}\n```\n\nFor a discussion of media query syntax, please see [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax).\n\n## Description\n\n### Media types\n\n_Media types_ describe the general category of a device.\nExcept when using the `not` or `only` logical operators, the media type is optional and the `all` type is implied.\n\n- `all`\n - : Suitable for all devices.\n- `print`\n - : Intended for paged material and documents viewed on a screen in print preview mode. (Please see [paged media](/en-US/docs/Web/CSS/Paged_Media) for information about formatting issues that are specific to these formats.)\n- `screen`\n - : Intended primarily for screens.\n\n> **Note:** CSS2.1 and [Media Queries 3](https://drafts.csswg.org/mediaqueries-3/#background) defined several additional media types (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, and `aural`), but they were deprecated in [Media Queries 4](https://dev.w3.org/csswg/mediaqueries/#media-types) and shouldn't be used.\n\n### Media features\n\n_Media features_ describe specific characteristics of the {{glossary(\"user agent\")}}, output device, or environment.\nMedia feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.\n\n- {{cssxref(\"@media/any-hover\", \"any-hover\")}}\n - : Does any available input mechanism allow the user to hover over elements?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/any-pointer\", \"any-pointer\")}}\n - : Is any available input mechanism a pointing device, and if so, how accurate is it?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/aspect-ratio\", \"aspect-ratio\")}}\n - : Width-to-height aspect ratio of the viewport\n- {{cssxref(\"@media/color\", \"color\")}}\n - : Number of bits per color component of the output device, or zero if the device isn't color\n- {{cssxref(\"@media/color-gamut\", \"color-gamut\")}}\n - : Approximate range of colors that are supported by the user agent and output device.\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/color-index\", \"color-index\")}}\n - : Number of entries in the output device's color lookup table, or zero if the device does not use such a table\n- {{cssxref(\"@media/device-aspect-ratio\", \"device-aspect-ratio\")}} {{deprecated_inline}}\n - : Width-to-height aspect ratio of the output device.\n Deprecated in Media Queries Level 4.\n- {{cssxref(\"@media/device-height\", \"device-height\")}} {{deprecated_inline}}\n - : Height of the rendering surface of the output device.\n Deprecated in Media Queries Level 4.\n- {{cssxref(\"@media/device-width\", \"device-width\")}} {{deprecated_inline}}\n - : Width of the rendering surface of the output device. Deprecated in Media Queries Level 4.\n- {{cssxref(\"@media/display-mode\", \"display-mode\")}}\n - : The display mode of the application, as specified in the web app manifest's [`display`](/en-US/docs/Web/Manifest#display) member.\n Defined in the [Web App Manifest spec](https://w3c.github.io/manifest/#the-display-mode-media-feature).\n- {{cssxref(\"@media/dynamic-range\", \"dynamic-range\")}}\n - : Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.\n- {{cssxref(\"@media/forced-colors\", \"forced-colors\")}}\n - : Detect whether user agent restricts color palette.\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/grid\", \"grid\")}}\n - : Does the device use a grid or bitmap screen?\n- {{cssxref(\"@media/height\", \"height\")}}\n - : Height of the viewport.\n- {{cssxref(\"@media/hover\", \"hover\")}}\n - : Does the primary input mechanism allow the user to hover over elements?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/inverted-colors\", \"inverted-colors\")}}\n - : Is the user agent or underlying OS inverting colors?\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/monochrome\", \"monochrome\")}}\n - : Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome.\n- {{cssxref(\"@media/orientation\", \"orientation\")}}\n - : Orientation of the viewport.\n- {{cssxref(\"@media/overflow-block\", \"overflow-block\")}}\n - : How does the output device handle content that overflows the viewport along the block axis?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/overflow-inline\", \"overflow-inline\")}}\n - : Can content that overflows the viewport along the inline axis be scrolled?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/pointer\", \"pointer\")}}\n - : Is the primary input mechanism a pointing device, and if so, how accurate is it?\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/prefers-color-scheme\", \"prefers-color-scheme\")}}\n - : Detect if the user prefers a light or dark color scheme.\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/prefers-contrast\", \"prefers-contrast\")}}\n - : Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors.\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/prefers-reduced-motion\", \"prefers-reduced-motion\")}}\n - : The user prefers less motion on the page.\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/resolution\", \"resolution\")}}\n - : Pixel density of the output device.\n- {{cssxref(\"@media/scripting\", \"scripting\")}}\n - : Detects whether scripting (i.e. JavaScript) is available.\n Added in Media Queries Level 5.\n- {{cssxref(\"@media/update-frequency\", \"update\")}}\n - : How frequently the output device can modify the appearance of content.\n Added in Media Queries Level 4.\n- {{cssxref(\"@media/video-dynamic-range\", \"video-dynamic-range\")}}\n - : Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.\n- {{cssxref(\"@media/width\", \"width\")}}\n - : Width of the viewport including width of scrollbar.\n\n### Logical operators\n\nThe _logical operators_ `not`, `and`, and `only` can be used to compose a complex media query.\nYou can also combine multiple media queries into a single rule by separating them with commas.\n\n- `and`\n - : Used for combining multiple media features together into a single media query, requiring each chained feature to return `true` for the query to be `true`.\n It is also used for joining media features with media types.\n- `not`\n - : Used to negate a media query, returning `true` if the query would otherwise return `false`.\n If present in a comma-separated list of queries, it will only negate the specific query to which it is applied.\n If you use the `not` operator, you _must also_ specify a media type.\n\n > **Note:** In Level 3, the `not` keyword can't be used to negate an individual media feature expression, only an entire media query.\n- `only`\n - : Applies a style only if an entire query matches.\n It is useful for preventing older browsers from applying selected styles.\n When not using `only`, older browsers would interpret the query `screen and (max-width: 500px)` as `screen`, ignoring the remainder of the query, and applying its styles on all screens.\n If you use the `only` operator, you _must also_ specify a media type.\n- `,` (comma)\n - : Commas are used to combine multiple media queries into a single rule.\n Each query in a comma-separated list is treated separately from the others\n Thus, if any of the queries in a list is `true`, the entire media statement returns `true`.\n In other words, lists behave like a logical `or` operator.\n\n## Accessibility concerns\n\nTo best accommodate people who adjust a site's text size, use [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values)s when you need a {{cssxref(\"<length>\")}} for your [media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).\n\nBoth [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) and [`px`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) are valid units, but [`em`](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numeric_values) works better if the user changes the browser text size.\n\nAlso consider using Level 4 media queries to improve the user's experience. For example, `prefers-reduced-motion` to [detect if the user has requested that the system minimize the amount of animation](/en-US/docs/Web/CSS/@media/prefers-reduced-motion) or motion it uses.\n\n## Security\n\nBecause media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a \"fingerprint\" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.\n\nBecause of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's \"Resist Fingerprinting\" setting is enabled, many media queries report default values rather than values representing the actual device state.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Testing for print and screen media types\n\n```css\n@media print {\n body { font-size: 10pt; }\n}\n\n@media screen {\n body { font-size: 13px; }\n}\n\n@media screen, print {\n body { line-height: 1.2; }\n}\n\n@media only screen\n and (min-width: 320px)\n and (max-width: 480px)\n and (resolution: 150dpi) {\n body { line-height: 1.4; }\n}\n```\n\nIntroduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples:\n\n```css\n@media (height > 600px) {\n body { line-height: 1.4; }\n}\n\n@media (400px <= width <= 700px) {\n body { line-height: 1.4; }\n}\n```\n\nFor more examples, please see [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\n- In JavaScript, `@media` can be accessed via the CSS object model interface {{domxref(\"CSSMediaRule\")}}.\n- [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features)\n- [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features)\n" }, { "property": "@namespace", "document": "---\ntitle: '@namespace'\nslug: Web/CSS/@namespace\ntags:\n - At-rule\n - CSS\n - CSS Namespaces\n - Layout\n - Reference\n - Web\nbrowser-compat: css.at-rules.namespace\n---\n{{CSSRef}}\n\n**`@namespace`** is an [at-rule](/en-US/docs/Web/CSS/At-rule) that defines [XML namespaces](/en-US/docs/Namespaces) to be used in a [CSS](/en-US/docs/Glossary/CSS) [style sheet](/en-US/docs/Web/API/StyleSheet).\n\n## Syntax\n\n```css\n/* Default namespace */\n@namespace url(XML-namespace-URL);\n@namespace \"XML-namespace-URL\";\n\n/* Prefixed namespace */\n@namespace prefix url(XML-namespace-URL);\n@namespace prefix \"XML-namespace-URL\";\n```\n\n## Description\n\nThe defined namespaces can be used to restrict the [universal](/en-US/docs/Web/CSS/Universal_selectors), [type](/en-US/docs/Web/CSS/Type_selectors), and [attribute](/en-US/docs/Web/CSS/Attribute_selectors) [selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors) to only select elements within that namespace. The `@namespace` rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.\n\nAny `@namespace` rules must follow all {{cssxref(\"@charset\")}} and {{cssxref(\"@import\")}} rules, and precede all other at-rules and [style declarations](/en-US/docs/Web/API/CSSStyleDeclaration) in a style sheet.\n\n`@namespace` can be used to define the **default namespace** for the style sheet. When a default namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace.\n\nThe `@namespace` rule can also be used to define a **namespace prefix**. When a universal, type, or attribute selector is prefixed with a namespace prefix, then that selector only matches if the namespace _and_ name of the element or attribute matches.\n\nIn [HTML5](/en-US/docs/Glossary/HTML5), known [foreign elements](https://html.spec.whatwg.org/#foreign-elements) will automatically be assigned namespaces. This means that HTML elements will act as though they are in the XHTML namespace (`http://www.w3.org/1999/xhtml`), even if there is no `xmlns` attribute anywhere in the document, and the [\\](/en-US/docs/Web/SVG/Element/svg) and [\\](/en-US/docs/Web/MathML/Element/math) elements will be assigned their proper namespaces (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`).\n\n> **Note:** In XML, unless a prefix is defined directly on an attribute (_e.g._, `xlink:href`), that attribute has no namespace. In other words, attributes do not inherit the namespace of the element they're on. To match this behavior, the default namespace in CSS does not apply to attribute selectors.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying default and prefixed namespaces\n\n```css\n@namespace url(http://www.w3.org/1999/xhtml);\n@namespace svg url(http://www.w3.org/2000/svg);\n\n/* This matches all XHTML elements, as XHTML is the default unprefixed namespace */\na {}\n\n/* This matches all SVG elements */\nsvg|a {}\n\n/* This matches both XHTML and SVG elements */\n*|a {}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Namespaces crash course](/en-US/docs/Web/SVG/Namespaces_Crash_Course)\n" }, { "property": "@page", "document": "---\ntitle: '@page'\nslug: Web/CSS/@page\ntags:\n - '@page'\n - At-rule\n - CSS\n - Layout\n - Reference\n - Web\nbrowser-compat: css.at-rules.page\n---\n{{CSSRef}}\n\nThe **`@page`** CSS at-rule is used to modify some CSS properties when printing a document.\n\n## Syntax\n\n```css\n@page {\n margin: 1cm;\n}\n\n@page :first {\n margin: 2cm;\n}\n```\n\n### Descriptors\n\n- [`page-orientation`](/en-US/docs/Web/CSS/@page/page-orientation)\n - : Specifies the orientation of the document on the page, allowing it to be laid out and formatted as normal or be rotated to one either left or right side.\n\n- [`size`](/en-US/docs/Web/CSS/@page/size)\n - : Specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, it also indicates the size of the destination page sheet.\n\n## Description\n\nYou can't change all CSS properties with `@page`. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.\n\nThe `@page` at-rule can be accessed via the CSS object model interface {{domxref(\"CSSPageRule\")}}.\n\n> **Note:** The W3C is discussing how to handle viewport-related {{cssxref(\"<length>\")}} units, `vh`, `vw`, `vmin`, and `vmax`. Meanwhile do not use them within a `@page` at-rule.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### @page pseudo-class examples\n\nPlease refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) of `@page` for examples.\n\n- {{Cssxref(\":blank\")}}\n- {{Cssxref(\":first\")}}\n- {{Cssxref(\":left\")}}\n- {{Cssxref(\":right\")}}\n- {{Cssxref(\":recto\")}} {{experimental_inline}}\n- {{Cssxref(\":verso\")}} {{experimental_inline}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- See the [\\[META\\] CSS Paged Media Module Level 3](https://bugzilla.mozilla.org/show_bug.cgi?id=286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)\n" }, { "property": "@property", "document": "---\ntitle: '@property'\nslug: Web/CSS/@property\ntags:\n - At-rule\n - CSS\n - Reference\n - Web\n - Property\n - Houdini\n - Experimental\nbrowser-compat: css.at-rules.property\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`@property`** [CSS](/en-US/docs/Web/CSS) {{cssxref(\"at-rule\")}} is part of the [CSS Houdini](/en-US/docs/Web/Guide/Houdini) umbrella of APIs, it allows developers to explicitly define their {{cssxref('--*', 'CSS custom properties')}}, allowing for property type checking, setting default values, and define whether a property can inherit values or not.\n\nThe `@property` rule represents a custom property registration directly in a stylesheet without having to run any JS. Valid `@property` rules result in a registered custom property, as if {{domxref('CSS.registerProperty')}} had been called with equivalent parameters.\n\n## Syntax\n\n```css\n@property --property-name {\n syntax: '';\n inherits: false;\n initial-value: #c0ffee;\n}\n```\n\n### Descriptors\n\n- {{cssxref(\"@property/syntax\",\"syntax\")}}\n - : Describes the allowable syntax for the property.\n- {{cssxref(\"@property/inherits\",\"inherits\")}}\n - : Controls whether the custom property registration specified by `@property` inherits by default.\n- {{cssxref(\"@property/initial-value\",\"initial-value\")}}\n - : Sets the initial value for the property.\n\nA valid `@property` rule represents a custom property registration, with the property name being the serialization of the in the rule's prelude.\n\n`@property` rules require a {{cssxref(\"@property/syntax\",\"syntax\")}} and {{cssxref(\"@property/inherits\",\"inherits\")}} descriptor; if either are missing, the entire rule is invalid and must be ignored. The {{cssxref(\"@property/initial-value\",\"initial-value\")}} descriptor is optional only if the syntax is the universal syntax definition, otherwise the descriptor is required; if it's missing, the entire rule is invalid and must be ignored.\n\nUnknown descriptors are invalid and ignored, but do not invalidate the `@property` rule.\n\n## Examples\n\nAdd type checking to `--my-color` {{cssxref('--*', 'custom property')}}, as a color, a default value, and not allow it to inherit its value:\n\nUsing [CSS](/en-US/docs/Web/CSS) {{cssxref('@property')}} [at-rule](/en-US/docs/Web/CSS/At-rule):\n\n```css\n@property --my-color {\n syntax: '';\n inherits: false;\n initial-value: #c0ffee;\n}\n```\n\nUsing [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}}:\n\n```js\nwindow.CSS.registerProperty({\n name: '--my-color',\n syntax: '',\n inherits: false,\n initialValue: '#c0ffee',\n});\n```\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Properties and Values API](/en-US/docs/Web/API/CSS_Properties_and_Values_API)\n- [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API)\n- [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API)\n- [CSS Houdini](/en-US/docs/Web/Guide/Houdini)\n" }, { "property": "@scroll-timeline", "document": "---\ntitle: \"@scroll-timeline\"\nslug: Web/CSS/@scroll-timeline\ntags:\n - Animations\n - Scroll\n - At-rule\n - CSS\n - Reference\n - Experimental\nbrowser-compat: css.at-rules.scroll-timeline\n---\n\n{{CSSRef}}\n\nThe **`@scroll-timeline`** CSS [at-rule](/en-US/docs/Web/CSS/At-rule) defines an [`AnimationTimeline`](/en-US/docs/Web/API/AnimationTimeline) whose time values are determined by scrolling progress within a scroll container and not by minutes or seconds. Once specified, a scroll timeline is associated with a [CSS Animation](/en-US/docs/Web/CSS/CSS_Animations) by using the `animation-timeline` property.\n\n## Syntax\n\n```css\n@scroll-timeline moveTimeline {\n source: auto;\n orientation: vertical;\n scroll-offsets: 0px, 500px;\n}\n```\n\n### Values\n\n- {{cssxref(\"custom-ident\")}}\n\n - : A name identifying the scroll timeline. This name is used when specifying the scroll timeline with the [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property.\n\n- `source`\n\n - : The scrollable element whose scrolling position drives the progress of the timeline. Can be:\n\n - `auto`\n\n - : The `Document` associated with the current global [Window object](/en-US/docs/Web/API/Window).\n\n - `selector(\"id-selector\")`\n\n - : The scroll container identified by an element's id.\n\n - `none`\n - : No scroll container specified.\n\n- `orientation`\n\n - : The scroll timeline's orientation:\n\n - `auto`\n\n - : Defaults to `vertical`\n\n - `block`\n\n - : Uses the scroll position along the block axis, conforming to writing mode and directionality.\n\n - `inline`\n\n - : Uses the scroll position along the inline axis, conforming to writing mode and directionality.\n\n - `horizontal`\n\n - : Uses the horizontal scroll position, regardless of writing mode or directionality.\n\n - `vertical`\n - : Uses the vertical scroll position, regardless of writing mode or directionality.\n\n- `scroll-offsets`\n\n - : Determines the scroll timeline's scroll offsets:\n\n - `none`\n - : No scroll offsets specified.\n - ``\n - : A comma separated list of [``](/en-US/docs/Web/CSS/length-percentage) values.\n - ``\n - : An element's position determines the scroll offset.\n\n## Description\n\nTo use the scroll timeline, create a `@scroll-timeline` rule, which is used by the {{cssxref(\"animation-timeline\")}} property to match an animation's timeline to its timeline declaration.\n\nEach `@scroll-timeline` rule includes properties to determine the source, orientation and scroll-offsets of the scroll timeline.\n\n### Scroll offsets\n\nThe `scroll-offset` property determines where, within the scrolling, the animation should occur. This can be set in one of three ways:\n\n1. By using the CSS keyword `none`, which means no `scroll-offset` is specified.\n\n2. It can be determined by a comma-separated list of [``](/en-US/docs/Web/CSS/length-percentage) values. Each value is mapped against the {{cssxref('animation-duration')}}. For instance, if an `animation-duration` is set to `2s` and the scroll offset to `0px, 30px, 100px`, then at 1s the scroll offset would be 30px. Typically, for a smooth scroll animation, you'd use two values here, such as `0px, 100px`.\n\n3. The third way of determining a scroll offset is to use an element offset. This means you specify elements within the page, the locations of which determine the scroll timeline and which edge of these elements to use. Specifying elements is done using the `selector()` function, which receives an element's id. Edge is determined by keywords `start` or `end`. An optional threshold value between `0–1` can be used to represent the percentage of the element expected to be visible in the `source`.\n\n```css\n@scroll-timeline element-move {\n source: auto;\n orientation: vertical;\n scroll-offsets: selector(#myElement) start 0, selector(#myElement) end 0;\n}\n```\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple example\n\nThis example shows a square, which rotates as its container is scrolled vertically. We create an element (`#container`) with a fixed height to allow scroll. This is our `source` element.\n\nInside this container, we create another element (`#square`), which is styled appropriately to look like a square. This element has a rotation animation applied, using the {{cssxref('@keyframes')}} rule and `animation-name` property.\n\nWe create an `@scroll-timeline` called `squareTimeline`, setting the `source` as the container, the `orientation` as `vertical` and the `scroll-offset` to start at `0px` and end at `300px` (the height of our container). Then we apply this to the square using the `scroll-timeline` property.\n\n#### HTML\n\n```html\n
\n
\n
\n```\n\n#### CSS\n\n```css\n#container {\n height: 300px;\n}\n\n#square {\n background-color: deeppink;\n width: 100px;\n height: 100px;\n margin-top: 100px;\n animation-name: rotateAnimation;\n animation-duration: 3s;\n animation-direction: alternate;\n animation-timeline: squareTimeline;\n}\n\n@scroll-timeline squareTimeline {\n source: selector(\"#container\");\n orientation: \"vertical\";\n scroll-offsets: 0px, 300px;\n}\n\n@keyframes rotateAnimation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Simple_example\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS animations](/en-US/docs/Web/CSS/CSS_Animations)\n- [Practical use cases for scroll-linked animations in CSS with scroll timelines](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/)\n" }, { "property": "@supports", "document": "---\ntitle: '@supports'\nslug: Web/CSS/@supports\ntags:\n - At-rule\n - CSS\n - Layout\n - Reference\n - Web\n - supports\nbrowser-compat: css.at-rules.supports\n---\n{{CSSRef}}\n\nThe **`@supports`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a _feature query_. The rule may be placed at the top level of your code or nested inside any other [conditional group at-rule](/en-US/docs/Web/CSS/At-rule#conditional_group_rules).\n\n```css\n@supports (display: grid) {\n div {\n display: grid;\n }\n}\n```\n\n```css\n@supports not (display: grid) {\n div {\n float: right;\n }\n}\n```\n\nIn JavaScript, `@supports` can be accessed via the CSS object model interface {{DOMxRef(\"CSSSupportsRule\")}}.\n\n## Syntax\n\nThe `@supports` at-rule associates a block of statements with a _supports condition._ The supports condition consists of one or more name-value pairs combined by conjunctions (`and`), disjunctions (`or`), and/or negations (`not`). Precedence of operators can be defined with parentheses.\n\n### Declaration syntax\n\nThe most basic supports condition is a simple declaration (a property name followed by a value, separated by a colon). The declaration must be surrounded by parentheses. The following example returns true if the browser's {{CSSxRef(\"transform-origin\")}} property considers `5% 5%` valid:\n\n```css\n@supports (transform-origin: 5% 5%) {}\n```\n\n### Function syntax\n\nThe second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.\n\n#### `selector()` {{Experimental_Inline}}\n\nTests if the browser supports the tested selector syntax. The following example returns true if the browser supports the [child combinator](/en-US/docs/Web/CSS/Child_combinator):\n\n```css\n@supports selector(A > B) {}\n```\n\n### The not operator\n\nThe `not` operator can precede any expression to create a new expression, resulting in the negation of the original one. The following example returns true if the browser's {{CSSxRef(\"transform-origin\")}} property **doesn't** consider `10em 10em 10em` valid:\n\n```css\n@supports not (transform-origin: 10em 10em 10em) {}\n```\n\nAs with any operator, the `not` operator can be applied to a declaration of any complexity. The following examples are both valid:\n\n```css\n@supports not (not (transform-origin: 2px)) {}\n@supports (display: grid) and (not (display: inline-grid)) {}\n```\n\n> **Note:** There is no need to enclose the `not` operator between two parentheses at the top level. To combine it with other operators, like `and` and `or`, the parentheses are required.\n\n### The and operator\n\nThe `and` operator creates a new expression from the conjunction of two shorter expressions. It returns true only if **both** of the shorter expressions are also true. The following example returns true if and only if the two shorter expressions are simultaneously true:\n\n```css\n@supports (display: table-cell) and (display: list-item) {}\n```\n\nMultiple conjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:\n\n```css\n@supports (display: table-cell) and (display: list-item) and (display:contents) {}\n@supports (display: table-cell) and ((display: list-item) and (display:contents)) {}\n```\n\n### The or operator\n\nThe `or` operator creates a new expression from the disjunction of two shorter expressions. It returns true if **one or both** of the shorter expressions is also true. The following example returns true if at least one of the two shorter expressions is true:\n\n```css\n@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}\n```\n\nMultiple disjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:\n\n```css\n@supports (transform-style: preserve) or (-moz-transform-style: preserve) or\n (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}\n\n@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or\n ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}\n```\n\n> **Note:** When using both `and` and `or` operators, the parentheses must be used to define the order in which they apply. Otherwise, the condition is invalid and the whole rule is ignored.\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Testing for the support of a given CSS property\n\n```css\n@supports (animation-name: test) {\n … /* CSS applied when animations are supported without a prefix */\n @keyframes { /* Other at-rules can be nested inside */\n …\n }\n}\n```\n\n### Testing for the support of a given CSS property or a prefixed version\n\n```css\n@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or\n (-ms-perspective: 10px) or (-o-perspective: 10px)) {\n … /* CSS applied when 3D transforms, prefixed or not, are supported */\n}\n```\n\n### Testing for the non-support of a specific CSS property\n\n```css\n@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {\n … /* CSS to provide fallback alternative for text-align-last: justify */\n}\n```\n\n### Testing for the support of custom properties\n\n```css\n@supports (--foo: green) {\n body {\n color: var(--varName);\n }\n}\n```\n\n### Testing for the support of a selector\n\nThe CSS Conditional Rules Level 4 specification adds the ability to test for support of a selector—for example {{cssxref(\":is\",\":is()\")}}.\n\n```css\n/* This rule won't be applied in browsers which don't support :is() */\n:is(ul, ol) > li {\n … /* CSS applied when the :is(…) selector is supported */\n}\n\n@supports not selector(:is(a, b)) {\n /* Fallback for when :is() is unsupported */\n ul > li,\n ol > li {\n … /* The above expanded for browsers which don't support :is(…) */\n }\n}\n\n/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */\n@supports selector(:nth-child(1n of a, b)) {\n /* This rule needs to be inside the @supports block, otherwise\n it will be partially applied in browsers which don't support\n the `of` argument of :nth-child(…) */\n :is(\n :nth-child(1n of ul, ol) a,\n details > summary\n ) {\n … /* CSS applied when the :is(…) selector and\n the `of` argument of :nth-child(…) are both supported */\n }\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using feature queries](/en-US/docs/Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries)\n- The CSSOM class {{DOMxRef(\"CSSSupportsRule\")}}, and the {{DOMxRef(\"CSS.supports()\")}} method that allows the same check to be performed via JavaScript.\n" }, { "property": "@viewport", "document": "---\ntitle: '@viewport'\nslug: Web/CSS/@viewport\ntags:\n - '@viewport'\n - At-rule\n - CSS\n - Deprecated\n - Layout\n - Mobile\n - Reference\n - Screen Layout\n - viewport\nbrowser-compat: css.at-rules.viewport\n---\n{{CSSRef}}{{deprecated_header}}\n\n> **Note:** See for discussion around @viewport's removal from the standards track.\n\nThe **`@viewport`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/At-rule) lets you configure the {{glossary(\"viewport\")}} through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like \"snap to edge\" (such as Microsoft Edge).\n\nLengths specified as percentages are calculated relative to the **initial viewport**, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in fullscreen mode.\n\nOn mobile devices (or desktop devices that are in fullscreen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).\n\n```css\n@viewport {\n width: 100vw; /*Sets the width of the actual viewport to the device width*/\n}\n```\n\n> **Note:** The use of `` tag overrides `@viewport`\n\n## Syntax\n\nThe at-rule contains a set of nested {{glossary(\"descriptor (CSS)\", \"descriptor\")}}s in a CSS block that is delimited by curly braces.\n\nA _zoom factor_ of `1.0` or `100%` corresponds to no zooming. Larger values zoom in. Smaller values zoom out.\n\n### Descriptors\n\nBrowser support for `@viewport` is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore `@viewport` if they don't support it, and will ignore any descriptors that they don't recognize.\n\n- `min-width`\n - : Used in the determination of the width of the viewport when the document is first displayed.\n- `max-width`\n - : Used in the determination of the width of the viewport when the document is first displayed.\n- `width`\n - : A shorthand descriptor for setting both `min-width` and `max-width`.\n- `min-height`\n - : Used in the determination of the height of the viewport when the document is first displayed.\n- `max-height`\n - : Used in the determination of the height of the viewport when the document is first displayed.\n- `height`\n - : A shorthand descriptor for setting both `min-height` and `max-height`.\n- `zoom`\n - : Sets the initial zoom factor.\n- `min-zoom`\n - : Sets the minimum zoom factor.\n- `max-zoom`\n - : Sets the maximum zoom factor.\n- `user-zoom`\n - : Controls whether or not the user should be able to change the zoom factor.\n- `orientation`\n - : Controls the document's orientation.\n- `viewport-fit`\n - : Controls the display of the document on non-rectangular displays.\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting viewport size, zoom, and orientation\n\n```css\n@viewport {\n min-width: 640px;\n max-width: 800px;\n}\n\n@viewport {\n zoom: 0.75;\n min-zoom: 0.5;\n max-zoom: 0.9;\n}\n\n@viewport {\n orientation: landscape;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{HTMLElement(\"meta\")}}, specifically ``\n- [Using the viewport meta tag to control layout on mobile browsers](/en-US/docs/Web/HTML/Viewport_meta_tag)\n" }, { "property": "_colon_-moz-broken", "document": "---\ntitle: ':-moz-broken'\nslug: Web/CSS/:-moz-broken\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.-moz-broken\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-broken`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements representing broken image links.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-broken\n```\n\n## Examples\n\n### HTML\n\n```html\n\"This\n```\n\n### CSS\n\n```css\n:-moz-broken {\n background: bisque;\n padding: 8px;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\":-moz-loading\")}}, {{cssxref(\":-moz-suppressed\")}}, {{cssxref(\":-moz-user-disabled\")}}\n- {{bug(\"11011\")}}\n" }, { "property": "_colon_-moz-drag-over", "document": "---\ntitle: ':-moz-drag-over'\nslug: Web/CSS/:-moz-drag-over\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Firefox\n - Mozilla\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors:-moz-drag-over\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-drag-over`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches an element when a {{domxref(\"HTMLElement/dragover_event\", \"dragover\")}} event is called on it.\n\n## Syntax\n\n```css\n:-moz-drag-over\n```\n\n## Examples\n\n### HTML\n\n```html\n\n \n \n \n
Drag Over
\n```\n\n### CSS\n\n```css\ntd:-moz-drag-over {\n color: red;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)\n- [HTML drag and drop](/en-US/docs/Web/API/HTML_Drag_and_Drop_API)\n" }, { "property": "_colon_-moz-first-node", "document": "---\ntitle: ':-moz-first-node'\nslug: Web/CSS/:-moz-first-node\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{Non-standard_header}}{{CSSRef}}\n\nThe **`:-moz-first-node`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any element that is the first child node of some other element. It differs from {{Cssxref(\":first-child\")}} because it does not match a first-child element with (non-whitespace) text before it.\n\n> **Note:** Any whitespace at the start of an element is ignored for the determination of `:-moz-first-node`.\n\n## Syntax\n\n```css\n:-moz-first-node\n```\n\n## Examples\n\n### CSS\n\n```css\nspan:-moz-first-node {\n background-color: lime;\n}\n```\n\n### HTML\n\n```html\n

\n This matches!\n This doesn't match.\n

\n\n

\n Blahblah.\n This doesn't match because it's preceded by text.\n

\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-last-node\")}}\n- {{cssxref(\":first-child\")}}\n" }, { "property": "_colon_-moz-focusring", "document": "---\ntitle: ':-moz-focusring'\nslug: Web/CSS/:-moz-focusring\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.-moz-focusring\n---\n{{Non-standard_header}}{{CSSRef}}\n\nThe **`:-moz-focusring`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that is similar to the {{cssxref(\":focus\")}} pseudo-class, but it only matches an element if it's currently focused _and_ a focus ring or other indicator should be drawn around it.\n\n> **Note:** This selector has been renamed to {{cssxref(\":focus-visible\")}} for the CSS Selectors 4 specification.\n\nIf `:-moz-focusring` matches, then `:focus` also matches, but the converse is not always true: it depends on whether the [user agent](/en-US/docs/Glossary/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 operating system settings and other factors, so the precise behavior of this pseudo-class will vary from platform to platform.\n\nThe working group previously [intended to add this feature to CSS Selectors 4 or 5](https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html) as `:focus-ring`, and has since [decided to rename it](https://lists.w3.org/Archives/Public/www-style/2017Dec/0018.html) to {{cssxref(\":focus-visible\")}} and added it to CSS Selectors 4.\n\n> **Note:** Developers tend to use `:-moz-focusring` to differentiate between the `focus` state when the user focuses an element via a **mouse click** versus **keyboard tabbing**. It is also potentially useful if you are creating a [custom element](/en-US/docs/Web/Web_Components/Using_custom_elements) and you want to change its style based on its behavior.\n\n## Syntax\n\n```css\n:-moz-focusring\n```\n\n## Example\n\n### HTML\n\n```html\n\n```\n\n### CSS\n\n```css\ninput {\n margin: 5px;\n}\n\n:-moz-focusring {\n color: red;\n outline: 2px dotted green;\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Example')}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\":focus-visible\")}}\n- {{bug(\"418521\")}}\n" }, { "property": "_colon_-moz-handler-blocked", "document": "---\ntitle: ':-moz-handler-blocked'\nslug: Web/CSS/:-moz-handler-blocked\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{ CSSRef }}{{Non-standard_header}}\n\nThe **`:-moz-handler-blocked`** [CSS](en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements that can't be displayed because their handlers have been blocked.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-handler-blocked\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{ cssxref(\":-moz-handler-crashed\") }}\n- {{ cssxref(\":-moz-handler-disabled\") }}\n" }, { "property": "_colon_-moz-handler-disabled", "document": "---\ntitle: ':-moz-handler-disabled'\nslug: Web/CSS/:-moz-handler-disabled\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{ CSSRef }}{{Non-standard_header}}\n\nThe **`:-moz-handler-disabled`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements that can't be displayed because their handlers have been disabled by the user.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-handler-disabled\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{ cssxref(\":-moz-handler-blocked\") }}\n- {{ cssxref(\":-moz-handler-crashed\") }}\n" }, { "property": "_colon_-moz-handler-crashed", "document": "---\ntitle: ':-moz-handler-crashed'\nslug: Web/CSS/:-moz-handler-crashed\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{ CSSRef }}{{Non-standard_header}}\n\nThe **`:-moz-handler-crashed`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements that can't be displayed because the plugin responsible for drawing them has crashed.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-handler-crashed\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{ cssxref(\":-moz-handler-blocked\") }}\n- {{ cssxref(\":-moz-handler-disabled\") }}\n" }, { "property": "_colon_-moz-last-node", "document": "---\ntitle: ':-moz-last-node'\nslug: Web/CSS/:-moz-last-node\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Selector\n---\n{{Non-standard_header}}{{CSSRef}}\n\nThe **`:-moz-last-node`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any element that is the last child node of some other element. It differs from {{cssxref(\":last-child\")}} because it does not match a last-child element with (non-whitespace) text after it.\n\n> **Note:** Any whitespace at the end of an element is ignored for the determination of `:-moz-last-node`.\n\n## Syntax\n\n```css\n:-moz-last-node\n```\n\n## Examples\n\n### CSS\n\n```css\nspan:-moz-last-node {\n background-color: lime;\n}\n```\n\n### HTML\n\n```html\n

\n This does not match.\n This matches!\n

\n\n

\n This doesn't match because it's followed by text.\n Blahblah.\n

\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-first-node\")}}\n- {{cssxref(\":last-child\")}}\n" }, { "property": "_colon_-moz-list-bullet", "document": "---\ntitle: '::-moz-list-bullet'\nslug: Web/CSS/:-moz-list-bullet\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-element\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`::-moz-list-bullet`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents the marker (typically a bullet) of a list item ({{htmlelement(\"li\")}}) in an unordered list ({{htmlelement(\"ul\")}}).\n\n## Syntax\n\n```css\nli::-moz-list-bullet\n```\n\n## Examples\n\n### HTML\n\n```html\n
    \n
  • Item 1
    • \n
  • Item 2
    • \n
  • Item 3
    • \n
\n```\n\n### CSS\n\n```css\n::-moz-list-bullet {\n color: red;\n font-size: 1.5em;\n}\n```\n\n### Result\n\n{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:-moz-list-bullet') }}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-list-number\")}}\n- {{cssxref(\"::marker\")}}\n" }, { "property": "_colon_-moz-list-number", "document": "---\ntitle: '::-moz-list-number'\nslug: Web/CSS/:-moz-list-number\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-element\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`::-moz-list-number`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents the marker (typically a number) of a list item ({{HTMLElement(\"li\")}}) in an ordered list ({{HTMLElement(\"ol\")}}).\n\n## Syntax\n\n```css\nli::-moz-list-number\n```\n\n## Examples\n\n### HTML\n\n```html\n
    \n
  1. First item
    2. \n
  2. Second item
    3. \n
  3. Third item
    4. \n
\n```\n\n### CSS\n\n```css\nli::-moz-list-number {\n font-style: italic;\n font-weight: bold;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\",\"auto\",\"auto\",\"/@api/deki/files/4668/=moz-list-number.png\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-list-bullet\")}}\n- {{cssxref(\"::marker\")}}\n" }, { "property": "_colon_-moz-loading", "document": "---\ntitle: ':-moz-loading'\nslug: Web/CSS/:-moz-loading\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-loading`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements that 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.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-loading\n```\n\n## Examples\n\n### Setting a background for images that are loading\n\n```css\n:-moz-loading {\n background-color: #aaa;\n background-image: url(loading-animation.gif) center no-repeat;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-broken\")}}, {{cssxref(\":-moz-suppressed\")}}, {{cssxref(\":-moz-user-disabled\")}}\n" }, { "property": "_colon_-moz-locale-dir(ltr)", "document": "---\ntitle: ':-moz-locale-dir(ltr)'\nslug: Web/CSS/:-moz-locale-dir(ltr)\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Localization\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-locale-dir(ltr)`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that 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\".\n\n> **Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.\n\n> **Warning:** This selector does not work properly from HTML; it always matches, regardless of whether the UI locale is left-to-right or right-to-left.\n\n## Syntax\n\n```css\n:-moz-locale-dir(ltr)\n```\n\n## Examples\n\nThis example doesn't work if you're not using Firefox, and may not work even in Firefox due to an issue with the selector not working properly with HTML content. It was designed for use with [XUL](/en-US/docs/Archive/Mozilla/XUL).\n\n### HTML\n\n```html\n

If you're using a left-to-right interface, this should be red.

\n```\n\n### CSS\n\n```css\np:-moz-locale-dir(ltr) {\n color: red;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{CSSxRef(\":dir\", \":dir(…)\")}}\n- {{CSSxRef(\":-moz-locale-dir(rtl)\")}}\n" }, { "property": "_colon_-moz-locale-dir(rtl)", "document": "---\ntitle: ':-moz-locale-dir(rtl)'\nslug: Web/CSS/:-moz-locale-dir(rtl)\ntags:\n - ':-moz-locale-dir'\n - CSS\n - CSS:Mozilla Extensions\n - Localization\n - NeedsCompatTable\n - NeedsExample\n - Non-standard\n - Pseudo-class\n - Reference\n - Right-to-left\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-locale-dir(rtl)`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that 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\".\n\n> **Note:** This selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. (This can vary from window to window, and even from tab to tab.) It also allows extensions to work even when they don't support the user's default locale, since they can support both left-to-right and right-to-left layouts regardless of locale specifics.\n\n> **Warning:** This selector does not work properly from HTML; it never matches, no matter whether the UI locale is left-to-right or right-to-left.\n\n## Syntax\n\n```css\n:-moz-locale-dir(rtl)\n```\n\n## Examples\n\nThis example will not work if you're not using Firefox, and might not work properly even in Firefox due to an issue with using this selector in HTML.\n\n### HTML\n\n```html\n

If you're using a right-to-left interface, this should be red.

\n```\n\n### CSS\n\n```css\np:-moz-locale-dir(rtl) {\n color: red;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{CSSxRef(\":dir\",\":dir(…)\")}}\n- {{CSSxRef(\":-moz-locale-dir(ltr)\")}}\n- [Making sure your theme works with RTL locales](/en-US/docs/Making_Sure_Your_Theme_Works_with_RTL_Locales)\n" }, { "property": "_colon_-moz-only-whitespace", "document": "---\ntitle: ':-moz-only-whitespace'\nslug: Web/CSS/:-moz-only-whitespace\ntags:\n - ':-moz-only-whitespace'\n - CSS\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.-moz-only-whitespace\n---\n{{CSSRef}}\n\n{{Non-standard_Header}}\n\n> **Note:** In {{SpecName(\"CSS4 Selectors\", \"#the-empty-pseudo\")}} the {{CSSxRef(\":empty\")}} selector was changed to act like `:-moz-only-whitespace`, but no browser currently supports this yet.\n\nThe **`:-moz-only-whitespace`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements that only contain text nodes that only contain {{Glossary(\"whitespace\")}}. (This includes elements with empty text nodes and elements with no child nodes.)\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Simple :-moz-only-whitespace example\n\n#### HTML\n\n```html\n
\n```\n\n#### CSS\n\n```css\ndiv {\n border: 4px solid red;\n}\n\n:-moz-only-whitespace {\n border-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Simple_-moz-only-whitespace_example', '100%', 50)}}\n\n## Specifications\n\nBriefly defined as `:blank` in {{SpecName(\"CSS4 Selectors\", \"#changes-2018-02\")}}, but then the functionality was merged into {{CSSxRef(\":empty\")}} and {{CSSxRef(\":blank\")}} redefined to mean empty {{HTMLElement(\"input\")}}.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":blank\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":empty\")}}\n" }, { "property": "_colon_-moz-submit-invalid", "document": "---\ntitle: ':-moz-submit-invalid'\nslug: Web/CSS/:-moz-submit-invalid\ntags:\n - ':-moz-submit-invalid'\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.-moz-submit-invalid\n---\n{{CSSRef}}{{Non-standard_Header}}\n\nThe **`:-moz-submit-invalid`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that represents any submit {{HTMLElement(\"button\")}} on forms whose contents aren't valid based on their [validation constraints](/en-US/docs/Learn/Forms#constraint_validation).\n\nBy default, no style is applied. You can use this pseudo-class to customize the appearance of the submit button when there are invalid form fields.\n\n## Syntax\n\n{{csssyntax}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":valid\")}}\n- {{CSSxRef(\":invalid\")}}\n- {{CSSxRef(\":required\")}}\n- {{CSSxRef(\":optional\")}}\n" }, { "property": "_colon_-moz-suppressed", "document": "---\ntitle: ':-moz-suppressed'\nslug: Web/CSS/:-moz-suppressed\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-suppressed`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements representing images that were suppressed because loading images from the specified site has been blocked.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-suppressed\n```\n\n## Examples\n\n### Styling elements that have been blocked\n\n```css\n:-moz-suppressed {\n background: yellow;\n padding: 8px;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-broken\")}}, {{cssxref(\":-moz-loading\")}}, {{cssxref(\":-moz-user-disabled\")}}\n" }, { "property": "_colon_-moz-user-disabled", "document": "---\ntitle: ':-moz-user-disabled'\nslug: Web/CSS/:-moz-user-disabled\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - NeedsCompatTable\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-user-disabled`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.\n\n> **Note:** This selector is mainly intended to be used by theme developers.\n\n## Syntax\n\n```css\n:-moz-user-disabled\n```\n\n## Examples\n\n### Styling user-disabled elements\n\n```css\n:-moz-user-disabled {\n background-color: lightgray;\n padding: 8px;\n}\n```\n\n## Specifications\n\nNot part of any standard.\n\n## See also\n\n- {{cssxref(\":-moz-broken\")}}, {{cssxref(\":-moz-loading\")}}, {{cssxref(\":-moz-suppressed\")}}\n" }, { "property": "_colon_-moz-window-inactive", "document": "---\ntitle: ':-moz-window-inactive'\nslug: Web/CSS/:-moz-window-inactive\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Non-standard\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.-moz-window-inactive\n---\n{{CSSRef}}{{Non-standard_header}}\n\nThe **`:-moz-window-inactive`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is a [Mozilla extension](/en-US/docs/Web/CSS/Mozilla_Extensions) that matches any element while it's in an inactive window.\n\n`:-moz-window-inactive` works in content HTML documents, too.\n\n> **Note:** Prior to the addition of this pseudo-class, giving different styles to background windows was achieved by setting an attribute (`active=\"true\"`) on the top-level XUL chrome window. This attribute is no longer used.\n\n## Syntax\n\n```css\n:-moz-window-inactive\n```\n\n## Examples\n\nThis example alters the appearance of a box's background depending on whether its window is active or not.\n\n### HTML\n\n```html\n
\n

This is a box!

\n
\n```\n\n### CSS\n\n```css\n#mybox {\n background: linear-gradient(to bottom, yellow, cyan);\n width: 200px;\n height: 200px;\n}\n\n#mybox:-moz-window-inactive {\n background: cyan;\n}\n```\n\n### Result\n\nThe result of this code is shown below. You can view this as a {{LiveSampleLink('Examples', 'separate page')}} as well.\n\n{{EmbedLiveSample('Examples', 220, 220)}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)\n- Related CSS selectors:\n\n - [`:active`](/en-US/docs/Web/CSS/:active)\n\n- The {{domxref(\"Document.activeElement\")}} property for regular DOM, and the {{domxref(\"ShadowRoot.activeElement\")}} property for [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) roots.\n" }, { "property": "_colon_active", "document": "---\ntitle: ':active'\nslug: Web/CSS/:active\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.active\n---\n{{CSSRef}}\n\nThe **`:active`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element (such as a button) that is being activated by the user. When using a mouse, \"activation\" typically starts when the user presses down the primary mouse button.\n\n```css\n/* Selects any that is being activated */\na:active {\n color: red;\n}\n```\n\nThe `:active` pseudo-class is commonly used on {{HTMLElement(\"a\")}} and {{HTMLElement(\"button\")}} elements. Other common targets of this pseudo-class include elements that are _contained in_ an activated element, and form elements that are being activated through their associated {{HTMLElement(\"label\")}}.\n\nStyles defined by the `:active` pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(\":link\")}}, {{cssxref(\":hover\")}}, or {{cssxref(\":visited\")}}) that has at least equal specificity. To style links appropriately, put the `:active` rule after all other link-related rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`.\n\n> **Note:** On systems with multi-button mice, CSS3 specifies that the `:active` pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Active links\n\n#### HTML\n\n```html\n

This paragraph contains a link:\n This link will turn red while you click on it.\n The paragraph will get a gray background while you click on it or the link.\n

\n```\n\n#### CSS\n\n```css\na:link { color: blue; } /* Unvisited links */\na:visited { color: purple; } /* Visited links */\na:hover { background: yellow; } /* Hovered links */\na:active { color: red; } /* Active links */\n\np:active { background: #eee; } /* Active paragraphs */\n```\n\n#### Result\n\n{{EmbedLiveSample('Active_links')}}\n\n### Active form elements\n\n#### HTML\n\n```html\n
\n \n \n
\n```\n\n#### CSS\n\n```css\nform :active {\n color: red;\n}\n\nform button {\n background: white;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Active_form_elements')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Link-related pseudo-classes: {{cssxref(\":link\")}}, {{cssxref(\":visited\")}}, and {{cssxref(\":hover\")}}\n" }, { "property": "_colon_any-link", "document": "---\ntitle: ':any-link'\nslug: Web/CSS/:any-link\ntags:\n - ':any-link'\n - CSS\n - Layout\n - Links\n - Pseudo-class\n - Reference\n - Selector\n - Web\n - hyperlinks\nbrowser-compat: css.selectors.any-link\n---\n{{CSSRef}}\n\nThe **`:any-link`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every {{HTMLElement(\"a\")}} or {{HTMLElement(\"area\")}} element that has an `href` attribute. Thus, it matches all elements that match {{cssxref(\":link\")}} or {{cssxref(\":visited\")}}.\n\n```css\n/* Selects any element that would be matched by :link or :visited */\n:any-link {\n color: green;\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\nExternal link
\nInternal target link
\nPlaceholder link (won't get styled)\n```\n\n### CSS\n\n```css\na:any-link {\n border: 1px solid blue;\n color: orange;\n}\n\n/* WebKit browsers */\na:-webkit-any-link {\n border: 1px solid blue;\n color: orange;\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Examples')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Creating hyperlinks](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)\n- Matches HTML elements: [``](/en-US/docs/Web/HTML/Element/a) and [``](/en-US/docs/Web/HTML/Element/area) with an {{htmlattrxref(\"href\", \"a\")}} attribute\n- Related CSS selectors:\n\n - [`:visited`](/en-US/docs/Web/CSS/:visited)\n - [`:link`](/en-US/docs/Web/CSS/:link)\n" }, { "property": "_colon_autofill", "document": "---\ntitle: ':autofill'\nslug: Web/CSS/:autofill\ntags:\n - CSS\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.autofill\n---\n{{CSSRef}}\n\nThe **`:autofill`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches when an {{HTMLElement(\"input\")}} element has its value autofilled by the browser. The class stops matching if the user edits the field.\n\n> **Note:** The user agent style sheets of many browsers use `!important` in their `:-webkit-autofill` style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:\n>\n> ```css\n> background-color: rgb(232, 240, 254) !important;\n> background-image: none !important;\n> color: -internal-light-dark(black, white) !important;\n> ```\n>\n> This means that you cannot set the {{cssxref('background-color')}}, {{cssxref('background-image')}}, or {{cssxref('color')}} in your own rules.\n\n## Syntax\n\n```css\n:autofill\n```\n\n## Examples\n\nThe following example demonstrates the use of the `:autofill` pseudo-class to change the border of a text field that has been autocompleted by the browser. For the best browser compatibility use both `:-webkit-autofill` and `:autofill`.\n\n```css\ninput {\n border: 3px solid grey;\n border-radius: 3px;\n}\n\ninput:-webkit-autofill {\n border: 3px solid blue;\n}\ninput:autofill {\n border: 3px solid blue;\n}\n```\n\n```html\n
\n \n
\n```\n\n{{EmbedLiveSample('Examples')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Chromium issue 46543: Auto-filled input text box yellow background highlight cannot be turned off!](https://bugs.chromium.org/p/chromium/issues/detail?id=46543)\n- [WebKit bug 66032: Allow site authors to override autofilled fields' colors.](https://bugs.webkit.org/show_bug.cgi?id=66032)\n- [Mozilla bug 740979: implement `:-moz-autofill` pseudo-class on input elements with an autofilled value](https://bugzilla.mozilla.org/show_bug.cgi?id=740979)\n- [new CSS4-UI features - more selectors](https://wiki.csswg.org/spec/css4-ui#more-selectors)\n" }, { "property": "_colon_blank", "document": "---\ntitle: ':blank'\nslug: Web/CSS/:blank\ntags:\n - ':blank'\n - CSS\n - CSS Selectors\n - Draft\n - Experimental\n - NeedsContent\n - NeedsExample\n - Pseudo-class\n - Selector\nbrowser-compat: css.selectors.blank\n---\n{{CSSRef}}{{SeeCompatTable}}\n\n> **Note:** The `:blank` selector is considered at risk, as the CSSWG keeps changing it.\n>\n> See [CSSWG issue #1967](https://github.com/w3c/csswg-drafts/issues/1967 \"[selectors] decide on :blank\").\n\nThe **`:blank`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects empty user input elements (e.g. {{HTMLElement(\"input\")}} or {{HTMLElement(\"textarea\")}}).\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Simple :blank example\n\nIn eventual supporting browsers, the `:blank` pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.\n\n#### HTML\n\n```html\n\n```\n\n#### CSS\n\n```css\ntextarea:blank {\n border: 3px solid red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Simple_blank_example', '100%', 150)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":empty\")}}\n" }, { "property": "_colon_default", "document": "---\ntitle: ':default'\nslug: Web/CSS/:default\ntags:\n - ':default'\n - CSS\n - Forms\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\n - default\nbrowser-compat: css.selectors.default\n---\n{{CSSRef}}\n\nThe **`:default`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects form elements that are the default in a group of related elements.\n\nWhat this selector matches is defined in [HTML Standard §4.16.3 Pseudo-classes](https://html.spec.whatwg.org/multipage/semantics-other.html#selector-default) — it may match the {{htmlelement(\"button\")}}, [``](/en-US/docs/Web/HTML/Element/input/checkbox), [``](/en-US/docs/Web/HTML/Element/input/radio), and {{htmlelement(\"option\")}} elements:\n\n- A default option element is the first one with the `selected` attribute, or the first enabled option in DOM order. `multiple` {{htmlelement(\"select\")}}s can have more than one `selected` option, so all will match `:default`.\n- `` and `` match if they have the `checked` attribute.\n- {{htmlelement(\"button\")}} matches if it is a {{htmlelement(\"form\")}}'s [default submission button](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission): the first `\n```\n\n### CSS\n\n```css\n@page :first {\n margin-left: 50%;\n margin-top: 50%;\n}\n\np {\n page-break-after: always;\n}\n```\n\n### JavaScript\n\n```js\ndocument.querySelector(\"button\").addEventListener('click', () => {\n window.print();\n});\n```\n\n### Result\n\nPress the \"Print!\" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.\n\n{{ EmbedLiveSample('Examples', '80%', '150px') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"@page\")}}\n- Other page-related pseudo-classes: {{Cssxref(\":left\")}}, {{Cssxref(\":right\")}}\n" }, { "property": "_colon_focus-visible", "document": "---\ntitle: ':focus-visible'\nslug: Web/CSS/:focus-visible\ntags:\n - ':focus'\n - ':focus-visible'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.focus-visible\n---\n{{CSSRef}}\n\nThe **`:focus-visible`** pseudo-class applies while an element matches the {{CSSxRef(\":focus\")}} pseudo-class and the UA ({{glossary(\"User Agent\")}}) determines via heuristics that the focus should be made evident on the element. (Many browsers show a \"focus ring\" by default in this case.)\n\nThis selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Basic example\n\nIn this example, the `:focus-visible` selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with `:focus`.\n\n```html\n
\n
\n
\n
\n
\n\n```\n\n```css\ninput, button {\n margin: 10px;\n}\n\n.focus-only:focus {\n outline: 2px solid black;\n}\n\n.focus-visible-only:focus-visible {\n outline: 4px dashed darkorange;\n}\n```\n\n{{EmbedLiveSample(\"Basic_example\", \"100%\", 300)}}\n\n### Selectively showing the focus indicator\n\nA custom control, such as a custom element button, can use `:focus-visible` to selectively apply a focus indicator only on keyboard-focus. This matches the native focus behavior for controls like {{htmlelement(\"button\")}}.\n\n```html\nClick Me\n```\n\n```css\ncustom-button {\n display: inline-block;\n margin: 10px;\n}\n\ncustom-button:focus {\n /* Provide a fallback style for browsers\n that don't support :focus-visible */\n outline: 2px solid red;\n background: lightgrey;\n}\n\n@supports selector(:focus-visible) {\n custom-button:focus {\n /* Remove the focus indicator on mouse-focus for browsers\n that do support :focus-visible */\n outline: none;\n background: transparent;\n }\n}\n\ncustom-button:focus-visible {\n /* Draw a very noticeable focus style for\n keyboard-focus on browsers that do support\n :focus-visible */\n outline: 4px dashed darkorange;\n background: transparent;\n}\n```\n\n{{EmbedLiveSample(\"Selectively_showing_the_focus_indicator\", \"100%\", 72)}}\n\n## Accessibility concerns\n\n### Low vision\n\nMake sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requires that the visual focus indicator be at least 3 to 1.\n\n- Accessible Visual Focus Indicators: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)\n\n### Cognition\n\nIt may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":focus\")}}\n- {{CSSxRef(\":focus-within\")}}\n- [A polyfill for `:focus-visible`](https://github.com/WICG/focus-visible)\n" }, { "property": "_colon_focus-within", "document": "---\ntitle: ':focus-within'\nslug: Web/CSS/:focus-within\ntags:\n - ':focus'\n - ':focus-within'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.focus-within\n---\n{{CSSRef}}\n\nThe **`:focus-within`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the {{CSSxRef(\":focus\")}} pseudo-class or has a descendant that is matched by `:focus`. (This includes descendants in [shadow trees](/en-US/docs/Web/Web_Components/Using_shadow_DOM).)\n\n```css\n/* Selects a
when one of its descendants is focused */\ndiv:focus-within {\n background: cyan;\n}\n```\n\nThis selector is useful, to take a common example, for highlighting an entire {{HTMLElement(\"form\")}} container when the user focuses on one of its {{HTMLElement(\"input\")}} fields.\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\nIn this example, the form will receive special coloring styles when either text input receives focus.\n\n### HTML\n\n```html\n

Try typing into this form.

\n\n
\n \n \n
\n \n \n
\n```\n\n### CSS\n\n```css\nform {\n border: 1px solid;\n color: gray;\n padding: 4px;\n}\n\nform:focus-within {\n background: #ff8;\n color: black;\n}\n\ninput {\n margin: 4px;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", 500, 150)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":focus\")}}\n- {{CSSxRef(\":focus-visible\")}} {{Experimental_Inline}}\n- [Grab your user's attention with the focus-within selector](https://dev.to/vtrpldn/grab-your-user-s-attention-with-the-focus-within-css-selector-4d4)\n" }, { "property": "_colon_fullscreen", "document": "---\ntitle: ':fullscreen'\nslug: Web/CSS/:fullscreen\ntags:\n - CSS\n - Fullscreen\n - Fullscreen API\n - Pseudo-class\n - Reference\n - Selector\n - fullscreen\n - screen\nbrowser-compat: css.selectors.fullscreen\n---\n{{CSSRef}}\n\nThe **`:fullscreen`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.\n\n## Syntax\n\n{{csssyntax}}\n\n## Usage notes\n\nThe `:fullscreen` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between fullscreen and traditional presentations.\n\n## Examples\n\nIn this example, the color of a button is changed depending on whether or not the document is in fullscreen mode. This is done without needing to specifically apply style changes using JavaScript.\n\n### HTML\n\nThe page's HTML looks like this:\n\n```html\n

MDN Web Docs Demo: :fullscreen pseudo-class

\n\n

This demo uses the :fullscreen pseudo-class to automatically\n change the style of a button used to toggle fullscreen mode on and off,\n entirely using CSS.

\n\n\n```\n\nThe {{HTMLElement(\"button\")}} with the ID `\"fs-toggle\"` will change between pale red and pale green depending on whether or not the document is in fullscreen mode.\n\n### CSS\n\nThe magic happens in the CSS. There are two rules here. The first establishes the background color of the \"Toggle Fullscreen Mode\" button when the element is not in a fullscreen state. The key is the use of the `:not(:fullscreen)`, which looks for the element to not have the `:fullscreen` pseudo-class applied to it.\n\n```css\n#fs-toggle:not(:fullscreen) {\n background-color: #afa;\n}\n```\n\nWhen the document _is_ in fullscreen mode, the following CSS applies instead, setting the background color to a pale shade of red.\n\n```css\n#fs-toggle:fullscreen {\n background-color: #faa;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Fullscreen API](/en-US/docs/Web/API/Fullscreen_API)\n- [Guide to the Fullscreen API](/en-US/docs/Web/API/Fullscreen_API/Guide)\n- {{cssxref(\":not\")}}\n- {{cssxref(\"::backdrop\")}}\n- DOM API: {{ domxref(\"Element.requestFullscreen()\") }}, {{ domxref(\"Document.exitFullscreen()\") }}, {{ domxref(\"Document.fullscreenElement\") }}\n- {{HTMLAttrXRef(\"allowfullscreen\", \"iframe\")}} attribute\n" }, { "property": "_colon_focus", "document": "---\ntitle: ':focus'\nslug: Web/CSS/:focus\ntags:\n - ':focus'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.focus\n---\n{{CSSRef}}\n\nThe **`:focus`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.\n\n```css\n/* Selects any when focused */\ninput:focus {\n color: red;\n}\n```\n\n> **Note:** This pseudo-class applies only to the focused element itself. Use {{CSSxRef(\":focus-within\")}} if you want to select an element that _contains_ a focused element.\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
\n
\n```\n\n### CSS\n\n```css\n.red-input:focus {\n background: yellow;\n color: red;\n}\n\n.blue-input:focus {\n background: yellow;\n color: blue;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Accessibility concerns\n\nMake sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) requires that the visual focus indicator be at least 3 to 1.\n\n- Accessible Visual Focus Indicators: [Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)\n\n### `:focus { outline: none; }`\n\nNever just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html).\n\n- Quick Tip: [Never remove CSS outlines](https://www.a11yproject.com/posts/never-remove-css-outlines/)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":focus-visible\")}}\n- {{CSSxRef(\":focus-within\")}}\n" }, { "property": "_colon_future", "document": "---\ntitle: ':future'\nslug: Web/CSS/:future\nbrowser-compat: css.selectors.future\n---\n{{CSSRef}}\n\nThe **`:future`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches {{cssxref(\":current\")}}. For example in a video with captions which are being displayed by [WebVTT](/en-US/docs/Web/API/WebVTT_API).\n\n```css\n:future(p, span) {\n display: none;\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### CSS\n\n```css\n:future(p, span) {\n display: none;\n}\n```\n\n### HTML\n\n```html\n\n```\n\n### WebVTT\n\n```\nWEBVTT FILE\n\n1\n00:00:03.500 --> 00:00:05.000\nThis is the first caption\n\n2\n00:00:06.000 --> 00:00:09.000\nThis is the second caption\n\n3\n00:00:11.000 --> 00:00:19.000\nThis is the third caption\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)\n- {{cssxref(\":current\")}}\n- {{cssxref(\":past\")}}\n" }, { "property": "_colon_has", "document": "---\ntitle: ':has()'\nslug: Web/CSS/:has\ntags:\n - ':has'\n - CSS\n - Pseudo-class\n - Reference\n - Selector\n - Selectors\nbrowser-compat: css.selectors.has\n---\n{{CSSRef}}\n\nThe **`:has()`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element if any of the selectors passed as parameters (relative to the {{cssxref(\":scope\")}} of the given element) match at least one element.\n\n```css\n/* Selects any , as long as it has an element directly inside it */\n/* Note that this is not supported in any browser yet */\nlet test = document.querySelector('a:has(> img)');\n```\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Description\n\nThe `:has()` pseudo-class takes a relative selector list as an argument. In earlier revisions of the CSS Selectors Level 4 specification, `:has` had a limitation that it couldn't be used within stylesheets. Instead, it could only be used with functions like {{domxref(\"document.querySelector()\")}}; this was due to performance concerns. _This limitation has been removed_ because no browser implemented it that way. Instead, browsers currently only support the use of `:has()` within stylesheets.\n\n## Examples\n\n### Matching \\ elements that directly contain an \\\n\nThe following selector matches only {{HTMLElement(\"a\")}} elements that directly contain an {{HTMLElement(\"img\")}} child:\n\n```css\na:has(> img)\n```\n\n### Matching \\

elements that are followed by a \\

\n\nThe following selector matches {{HTMLElement(\"h1\")}} elements only if they have a {{htmlelement(\"p\")}} element directly following them:\n\n```css\nh1:has(+ p)\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Locating DOM elements using selectors](/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)\n- [`:scope`](/en-US/docs/Web/CSS/:scope)\n" }, { "property": "_colon_host-context", "document": "---\ntitle: ':host-context()'\nslug: Web/CSS/:host-context\ntags:\n - ':host-context()'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.host-context\n---\n{{CSSRef}}\n\nThe **`:host-context()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.\n\nIn other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.\n\nOne typical use of this is with a descendant selector expression — for example `h1` — to select only instances of the custom element that are inside an `

`. Another typical use would be to allow inner elements to react to classes or attributes on any ancestor elements - for example, applying a different text color when a `.dark-theme` class is applied to ``.\n\n> **Note:** This has no effect when used outside a shadow DOM.\n\n```css\n/* Selects a shadow root host, only if it is\n a descendant of the selector argument given */\n:host-context(h1) {\n font-weight: bold;\n}\n\n:host-context(main article) {\n font-weight: bold;\n}\n\n/* Changes paragraph text color from black to white when\n a .dark-theme class is applied to the document body */\np {\n color: #000;\n}\n\n:host-context(body.dark-theme) p {\n color: #fff;\n}\n```\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Selectively styling shadow hosts\n\nThe following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).\n\nIn this example we have a simple custom element — `` — that you can wrap around text:\n\n```html\n

Host selectors example

\n```\n\nInside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:\n\n```js\nlet style = document.createElement('style');\nlet span = document.createElement('span');\nspan.textContent = this.textContent;\n\nconst shadowRoot = this.attachShadow({mode: 'open'});\nshadowRoot.appendChild(style);\nshadowRoot.appendChild(span);\n\nstyle.textContent = 'span:hover { text-decoration: underline; }' +\n ':host-context(h1) { font-style: italic; }' +\n ':host-context(h1):after { content: \" - no links in headers!\" }' +\n ':host-context(article, aside) { color: gray; }' +\n ':host(.footer) { color : red; }' +\n ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';\n```\n\nThe `:host-context(h1) { font-style: italic; }` and `:host-context(h1):after { content: \" - no links in headers!\" }` rules style the instance of the `` element (the shadow host in this instance) inside the `

`. We've used it to make it clear that the custom element shouldn't appear inside the `

` in our design.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web components](/en-US/docs/Web/Web_Components)\n- {{cssxref(\":host\")}}\n- {{cssxref(\":host\", \":host()\")}}\n" }, { "property": "_colon_host", "document": "---\ntitle: ':host'\nslug: Web/CSS/:host\ntags:\n - ':host'\n - CSS\n - DOM\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\n - Web Components\n - shadow\n - shadow dom\nbrowser-compat: css.selectors.host\n---\n{{ CSSRef }}\n\nThe **`:host`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.\n\n> **Note:** This has no effect when used outside a shadow DOM.\n\n```css\n/* Selects a shadow root host */\n:host {\n font-weight: bold;\n}\n```\n\n## Syntax\n\n```css\n:host\n```\n\n## Examples\n\n### Styling the shadow host\n\nThe following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).\n\nIn this example we have a simple custom element — `` — that you can wrap around text:\n\n```html\n

Host selectors example

\n```\n\nInside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:\n\n```js\nlet style = document.createElement('style');\nlet span = document.createElement('span');\nspan.textContent = this.textContent;\n\nconst shadowRoot = this.attachShadow({mode: 'open'});\nshadowRoot.appendChild(style);\nshadowRoot.appendChild(span);\n\nstyle.textContent = 'span:hover { text-decoration: underline; }' +\n ':host-context(h1) { font-style: italic; }' +\n ':host-context(h1):after { content: \" - no links in headers!\" }' +\n ':host-context(article, aside) { color: gray; }' +\n ':host(.footer) { color : red; }' +\n ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';\n```\n\nThe `:host { background: rgba(0,0,0,0.1); padding: 2px 5px; }` rule styles all instances of the `` element (the shadow host in this instance) in the document.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web components](/en-US/docs/Web/Web_Components)\n- {{cssxref(\":host_function\", \":host()\")}}\n- {{cssxref(\":host-context\", \":host-context()\")}}\n" }, { "property": "_colon_host_function", "document": "---\ntitle: ':host()'\nslug: Web/CSS/:host_function\ntags:\n - ':host()'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.hostfunction\n---\n{{CSSRef}}\n\nThe **`:host()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function selects the shadow host of the [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host.\n\nThe most obvious use of this is to put a class name only on certain custom element instances, and then include the relevant class selector as the function argument. You can't use this with a descendant selector expression to select only instances of the custom element that are inside a particular ancestor. That's the job of {{CSSxRef(\":host-context\", \":host-context()\")}}.\n\n> **Note:** This has no effect when used outside a shadow DOM.\n\n```css\n/* Selects a shadow root host, only if it is\n matched by the selector argument */\n:host(.special-custom-element) {\n font-weight: bold;\n}\n```\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Selectively styling shadow hosts\n\nThe following snippets are taken from our [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([see it live also](https://mdn.github.io/web-components-examples/host-selectors/)).\n\nIn this example we have a simple custom element — `` — that you can wrap around text:\n\n```html\n

Host selectors example

\n```\n\nInside the element's constructor, we create `style` and `span` elements, fill the `span` with the content of the custom element, and fill the `style` element with some CSS rules:\n\n```js\nlet style = document.createElement('style');\nlet span = document.createElement('span');\nspan.textContent = this.textContent;\n\nconst shadowRoot = this.attachShadow({mode: 'open'});\nshadowRoot.appendChild(style);\nshadowRoot.appendChild(span);\n\nstyle.textContent = 'span:hover { text-decoration: underline; }' +\n ':host-context(h1) { font-style: italic; }' +\n ':host-context(h1):after { content: \" - no links in headers!\" }' +\n ':host-context(article, aside) { color: gray; }' +\n ':host(.footer) { color : red; }' +\n ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';\n```\n\nThe `:host(.footer) { color : red; }` rule styles all instances of the `` element (the shadow host in this instance) in the document that have the `footer` class set on them — we've used it to give instances of the element inside the {{htmlelement(\"footer\")}} a special color.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web components](/en-US/docs/Web/Web_Components)\n- {{CSSxRef(\":host\")}}\n- {{CSSxRef(\":host-context\", \":host-context()\")}}\n" }, { "property": "_colon_hover", "document": "---\ntitle: ':hover'\nslug: Web/CSS/:hover\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.hover\n---\n{{ CSSRef }}\n\nThe **`:hover`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).\n\n```css\n/* Selects any element when \"hovered\" */\na:hover {\n color: orange;\n}\n```\n\nStyles defined by the `:hover` pseudo-class will be overridden by any subsequent link-related pseudo-class ({{ cssxref(\":link\") }}, {{ cssxref(\":visited\") }}, or {{ cssxref(\":active\") }}) that has at least equal specificity. To style links appropriately, 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`.\n\n> **Note:** The `:hover` pseudo-class is problematic on touchscreens. Depending on the browser, the `:hover` pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n#### HTML\n\n```html\nTry hovering over this link.\n```\n\n#### CSS\n\n```css\na {\n background-color: powderblue;\n transition: background-color .5s;\n}\n\na:hover {\n background-color: gold;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Basic_example\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Chromium bug #370155: Don't make `:hover` sticky on tap on sites that set a mobile viewport](https://bugs.chromium.org/p/chromium/issues/detail?id=370155)\n- [Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.](https://bugs.chromium.org/p/chromium/issues/detail?id=306581)\n" }, { "property": "_colon_in-range", "document": "---\ntitle: ':in-range'\nslug: Web/CSS/:in-range\ntags:\n - CSS\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.in-range\n---\n{{CSSRef}}\n\nThe **`:in-range`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an {{htmlelement(\"input\")}} element whose current value is within the range limits specified by the {{htmlattrxref(\"min\", \"input\")}} and {{htmlattrxref(\"max\",\"input\")}} attributes.\n\n```css\n/* Selects any , but only when it has a range\n specified, and its value is inside that range */\ninput:in-range {\n background-color: rgba(0, 255, 0, 0.25);\n}\n```\n\nThis pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.\n\n> **Note:** This pseudo-class only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be \"in-range\" nor \"out-of-range.\"\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
\n
    Values between 1 and 10 are valid.\n
  • \n \n \n
    • \n
\n
\n```\n\n### CSS\n\n```css\nli {\n list-style: none;\n margin-bottom: 1em;\n}\n\ninput {\n border: 1px solid black;\n}\n\ninput:in-range {\n background-color: rgba(0, 255, 0, 0.25);\n}\n\ninput:out-of-range {\n background-color: rgba(255, 0, 0, 0.25);\n border: 2px solid red;\n}\n\ninput:in-range + label::after {\n content: 'okay.';\n}\n\ninput:out-of-range + label::after {\n content: 'out of range!';\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Examples', 600, 140)}}\n\n> **Note:** An empty `` does not count as out of range, and will not be selected using the `:out-of-range` pseudo-class selector. The [`:blank`](/en-US/docs/Web/CSS/:blank) pseudo-class exists to select blank inputs, although at the time of writing this is experimental and not well-supported. You could also use the `required` attribute and the [`:invalid`](/en-US/docs/Web/CSS/:invalid) pseudo-class to provide more general logic and styling for making inputs mandatory (`:invalid` will style blank _and_ out-of-range inputs).\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\":out-of-range\")}}\n- [Form data validation](/en-US/docs/Learn/Forms/Form_validation)\n" }, { "property": "_colon_indeterminate", "document": "---\ntitle: ':indeterminate'\nslug: Web/CSS/:indeterminate\ntags:\n - ':indeterminate'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\n - checkbox\n - progress\n - radio button\nbrowser-compat: css.selectors.indeterminate\n---\n{{CSSRef}}\n\nThe **`:indeterminate`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any form element whose state is indeterminate, such as checkboxes which have their HTML [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate) attribute set to `true`, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate {{HTMLElement(\"progress\")}} elements.\n\n```css\n/* Selects any whose state is indeterminate */\ninput:indeterminate {\n background: lime;\n}\n```\n\nElements targeted by this selector are:\n\n- [``](/en-US/docs/Web/HTML/Element/input/checkbox) elements whose `indeterminate` property is set to `true` by [JavaScript](/en-US/docs/Web/JavaScript)\n- [``](/en-US/docs/Web/HTML/Element/input/radio) elements, when all radio buttons with the same `name` value in the form are unchecked\n- {{HTMLElement(\"progress\")}} elements in an indeterminate state\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Checkbox & radio button\n\nThis example applies special styles to the labels associated with indeterminate form fields.\n\n#### HTML\n\n```html\n
\n Checkbox\n
\n \n \n
\n
\n\n
\n Radio\n
\n \n \n
\n
\n \n \n
\n
\n```\n\n#### CSS\n\n```css\ninput:indeterminate + label {\n background: lime;\n}\n```\n\n```css hidden\nfieldset {\n padding: 1em 0.75em;\n}\n\nfieldset:first-of-type {\n margin-bottom: 1.5rem;\n}\n\nfieldset:not(:first-of-type) > div:not(:last-child) {\n margin-bottom: 0.5rem;\n}\n```\n\n#### JavaScript\n\n```js\nconst inputs = document.getElementsByTagName(\"input\");\n\nfor (let i = 0; i < inputs.length; i++) {\n inputs[i].indeterminate = true;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Checkbox_radio_button', 'auto', 230)}}\n\n### Progress bar\n\n#### HTML\n\n```html\n\n```\n\n#### CSS\n\n```css\nprogress {\n margin: 4px;\n}\n\nprogress:indeterminate {\n width:80vw;\n height:20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Progress_bar', 'auto', 30)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web forms — Working with user data](/en-US/docs/Learn/Forms)\n- [Styling web forms](/en-US/docs/Learn/Forms/Styling_web_forms)\n- The [``](/en-US/docs/Web/HTML/Element/input/checkbox) element's [`indeterminate`](/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate) attribute\n- {{HTMLElement(\"input\")}} and the {{domxref(\"HTMLInputElement\")}} interface which implements it.\n- The {{cssxref(\":checked\")}} CSS selector lets you style checkboxes based on whether they're checked or not\n" }, { "property": "_colon_invalid", "document": "---\ntitle: ':invalid'\nslug: Web/CSS/:invalid\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.invalid\n---\n{{CSSRef}}\n\nThe **`:invalid`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any {{HTMLElement(\"form\")}}, {{HTMLElement(\"fieldset\")}}, {{HTMLElement(\"input\")}} or other {{HTMLElement(\"form\")}} element whose contents fail to [validate](/en-US/docs/Web/Guide/HTML/Constraint_validation).\n\n```css\n/* Selects any invalid */\ninput:invalid {\n background-color: pink;\n}\n```\n\nThis pseudo-class is useful for highlighting field errors for the user.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Coloring elements to show validation\n\n#### HTML\n\n```html\n
\n
\n \n \n
\n\n
\n \n \n
\n
\n```\n\n#### CSS\n\n```css\nlabel {\n display: block;\n margin: 1px;\n padding: 1px;\n}\n\n.field {\n margin: 1px;\n padding: 1px;\n}\n\ninput:invalid {\n background-color: #ffdddd;\n}\n\nform:invalid {\n border: 5px solid #ffdddd;\n}\n\ninput:valid {\n background-color: #ddffdd;\n}\n\nform:valid {\n border: 5px solid #ddffdd;\n}\n\ninput:required {\n border-color: #800000;\n border-width: 3px;\n}\n\ninput:required:invalid {\n border-color: #c00000;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Coloring elements to show validation', 600, 200)}}\n\n### Showing sections in stages\n\nIn this example we use `:invalid` along with `~`, the [general sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator), to make a form appear in stages, so the form initially shows the first item to complete, and when the user completes each item the form displays the next one. When the whole form is complete the user can submit it.\n\n#### HTML\n\n```html\n
\n\n
\n
\n \n
\n\n
\n
\n \n
\n\n
\n
\n \n
\n\n \n\n
\n```\n\n#### CSS\n\n```css\n/* Hide the fieldset after an invalid fieldset */\nfieldset:invalid~fieldset {\n display: none;\n}\n\n/* Dim and disable the button while the form is invalid */\nform:invalid button {\n opacity: 0.3;\n pointer-events: none;\n}\n\ninput, textarea {\n box-sizing: border-box;\n width: 100%;\n font-family:monospace;\n padding: 0.25em 0.5em;\n}\n\nbutton {\n width: 100%;\n border: thin solid darkgrey;\n font-size: 1.25em;\n background-color: darkgrey;\n color: white;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Showing sections in stages', 600, 300)}}\n\n## Accessibility concerns\n\nThe color red is commonly used to indicate invalid input. People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html)\n\n## Notes\n\n### Radio buttons\n\nIf any one of the radio buttons in a group is `required`, the `:invalid` pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their `name` attribute.)\n\n### Gecko defaults\n\nBy default, Gecko does not apply a style to the `:invalid` pseudo-class. However, it does apply a style (a red \"glow\" using the {{Cssxref(\"box-shadow\")}} property) to the {{cssxref(\":user-invalid\")}} pseudo-class, which applies in a subset of cases for `:invalid`.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other validation-related pseudo-classes: {{ cssxref(\":required\") }}, {{ cssxref(\":optional\") }}, {{ cssxref(\":valid\") }}\n- Related Mozilla pseudo-classes: {{cssxref(\":user-invalid\")}}, {{cssxref(\":-moz-submit-invalid\")}}\n- [Form data validation](/en-US/docs/Learn/Forms/Form_validation)\n- Accessing the [validity state](/en-US/docs/Web/API/ValidityState) from JavaScript\n" }, { "property": "_colon_last-child", "document": "---\ntitle: ':last-child'\nslug: Web/CSS/:last-child\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.last-child\n---\n{{CSSRef}}\n\nThe **`:last-child`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents the last element among a group of sibling elements.\n\n```css\n/* Selects any

that is the last element\n among its siblings */\np:last-child {\n color: lime;\n}\n```\n\n> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n#### HTML\n\n```html\n

\n

This text isn't selected.

\n

This text is selected!

\n
\n\n
\n

This text isn't selected.

\n

This text isn't selected: it's not a `p`.

\n
\n```\n\n#### CSS\n\n```css\np:last-child {\n color: lime;\n background-color: black;\n padding: 5px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_example', 500, 200)}}\n\n### Styling a list\n\n#### HTML\n\n```html\n
    \n
  • Item 1
    • \n
  • Item 2
    • \n
  • Item 3\n
      \n
    • Item 3.1
      • \n
    • Item 3.2
      • \n
    • Item 3.3
      • \n
    \n
    • \n
\n```\n\n#### CSS\n\n```css\nul li {\n color: blue;\n}\n\nul li:last-child {\n border: 1px solid red;\n color: red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Styling_a_list')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":-moz-last-node\")}} {{Non-standard_Inline}}\n- {{CSSxRef(\":last-of-type\")}}\n- {{CSSxRef(\":first-child\")}}\n- {{CSSxRef(\":nth-child\")}}\n" }, { "property": "_colon_last-of-type", "document": "---\ntitle: ':last-of-type'\nslug: Web/CSS/:last-of-type\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.last-of-type\n---\n{{CSSRef}}\n\nThe **`:last-of-type`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents the last element of its type among a group of sibling elements.\n\n```css\n/* Selects any

that is the last element\n of its type among its siblings */\np:last-of-type {\n color: lime;\n}\n```\n\n> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Styling the last paragraph\n\n#### HTML\n\n```html\n

Heading

\n

Paragraph 1

\n

Paragraph 2

\n```\n\n#### CSS\n\n```css\np:last-of-type {\n color: red;\n font-style: italic;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Styling_the_last_paragraph')}}\n\n### Nested elements\n\nThis example shows how nested elements can also be targeted. Note that the [universal selector](/en-US/docs/Web/CSS/Universal_selectors) (`*`) is implied when no simple selector is written.\n\n#### HTML\n\n```html\n
\n
This `div` is first.
\n
This nested `span` is last!
\n
This nested `em` is first, but this nested `em` is last!
\n This `b` qualifies!\n
This is the final `div`!
\n
\n```\n\n#### CSS\n\n```css\narticle :last-of-type {\n background-color: pink;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Nested_elements', 500)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\":last-child\")}}, {{Cssxref(\":nth-last-of-type\")}}\n" }, { "property": "_colon_link", "document": "---\ntitle: ':link'\nslug: Web/CSS/:link\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.link\n---\n{{ CSSRef }}\n\nThe **`:link`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element that has not yet been visited. It matches every unvisited {{HTMLElement(\"a\")}} or {{HTMLElement(\"area\")}} element that has an `href` attribute.\n\n```css\n/* Selects any that has not been visited yet */\na:link {\n color: red;\n}\n```\n\nStyles defined by the `:link` pseudo-class will be overridden by any subsequent link-related pseudo-class ({{cssxref(\":active\")}}, {{cssxref(\":hover\")}}, or {{cssxref(\":visited\")}}) that has at least equal specificity. To style links appropriately, put the `:link` rule before all other link-related rules, as defined by the _LVHA-order_: `:link` — `:visited` — `:hover` — `:active`.\n\n> **Note:** Use {{cssxref(\":any-link\")}} to select an element independent of whether it has been visited or not.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\nBy default, most browsers apply a special {{cssxref(\"color\")}} value to visited links. Thus, the links in this example will probably have special font colors only before you visit them. (After that, you'll need to clear your browser history to see them again.) However, the {{cssxref(\"background-color\")}} values are likely to remain, as most browsers do not set that property on visited links by default.\n\n### HTML\n\n```html\nThis is an ordinary link.
\nYou've already visited this link.
\nPlaceholder link (won't get styled)\n```\n\n### CSS\n\n```css\na:link {\n background-color: gold;\n color: green;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Link-related pseudo-classes: {{ cssxref(\":visited\") }}, {{ cssxref(\":hover\") }}, {{ cssxref(\":active\") }}\n" }, { "property": "_colon_local-link", "document": "---\ntitle: ':local-link'\nslug: Web/CSS/:local-link\nbrowser-compat: css.selectors.local-link\n---\n{{ CSSRef }}\n\nThe **`:local-link`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.\n\n```css\n/* Selects any that links to the current document */\na:local-link {\n color: green;\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\nThis is a link on the current page.
\nThis is an external link
\n```\n\n### CSS\n\n```css\na:local-link {\n color: green;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Link-related pseudo-classes: {{ cssxref(\":link\") }},{{ cssxref(\":visited\") }}, {{ cssxref(\":hover\") }}, {{ cssxref(\":active\") }}\n" }, { "property": "_colon_not", "document": "---\ntitle: ':not()'\nslug: Web/CSS/:not\ntags:\n - ':not()'\n - CSS\n - Layout\n - Negation\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.not\n---\n{{CSSRef}}\n\nThe **`:not()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the _negation pseudo-class_.\n\n```css\n/* Selects any element that is NOT a paragraph */\n:not(p) {\n color: blue;\n}\n```\n\nThe `:not()` pseudo-class has a number of [quirks, tricks, and unexpected results](/en-US/docs/Web/CSS/:not#description) that you should be aware of before using it.\n\n## Syntax\n\nThe `:not()` pseudo-class requires a comma-separated list of one or more selectors as its argument. The list must not contain another negation selector or a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements).\n\n{{csssyntax}}\n\n## Description\n\nThere are several unusual effects and outcomes when using `:not()` that you should keep in mind when using it:\n\n- The `:not` pseudo-class may not be nested, which means that `:not(:not(...))` is invalid.\n- Useless selectors can be written using this pseudo-class. For example, `:not(*)` matches any element which is not an element, which is obviously nonsense, so the accompanying rule will never be applied.\n- This pseudo-class can increase the [specificity](/en-US/docs/Web/CSS/Specificity) of a rule. For example, `#foo:not(#bar)` will match the same element as the simpler `#foo`, but has a higher specificity.\n- `:not(.foo)` will match anything that isn't `.foo`, _including {{HTMLElement(\"html\")}} and {{HTMLElement(\"body\")}}._\n- This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, `body :not(table) a` will still apply to links inside of a table, since {{HTMLElement(\"tr\")}} will match with the `:not()` part of the selector.\n- Using two selectors at the same time is not yet supported in all browsers. Example: `:not(.foo, .bar)`. For wider support you could use, `:not(.foo):not(.bar)`\n\n## Examples\n\n### Basic set of :not() examples\n\n#### HTML\n\n```html\n

I am a paragraph.

\n

I am so very fancy!

\n
I am NOT a paragraph.
\n

\n foo inside h2\n bar inside h2\n

\n```\n\n#### CSS\n\n```css\n.fancy {\n text-shadow: 2px 2px 3px gold;\n}\n\n/*

elements that are not in the class `.fancy` */\np:not(.fancy) {\n color: green;\n}\n\n/* Elements that are not

elements */\nbody :not(p) {\n text-decoration: underline;\n}\n\n/* Elements that are not

and not elements */\nbody :not(div):not(span) {\n font-weight: bold;\n}\n\n/* Elements that are not
s or `.fancy` */\n/* Note that this syntax is not well supported yet. */\nbody :not(div, .fancy) {\n text-decoration: overline underline;\n}\n\n/* Elements inside an

that aren't a with a class of foo. */\n/* Complex selectors such as an element with a class are not well supported yet. */\nh2 :not(span.foo) {\n color: red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_set_of_not_examples', '100%', 320)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes)\n- [Pseudo-classes and pseudo-elements](/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)\n- Related CSS pseudo-classes:\n\n - {{cssxref(\":has\", \":has()\")}}\n - {{cssxref(\":is\", \":is()\")}}\n - {{cssxref(\":where\", \":where()\")}}\n" }, { "property": "_colon_nth-child", "document": "---\ntitle: ':nth-child()'\nslug: Web/CSS/:nth-child\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.nth-child\n---\n{{CSSRef}}\n\nThe **`:nth-child()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on their position among a group of siblings.\n\n```css\n/* Selects the second
  • element in a list */\nli:nth-child(2) {\n color: lime;\n}\n\n/* Selects every fourth element\n among any group of siblings */\n:nth-child(4n) {\n color: lime;\n}\n```\n\n## Syntax\n\n`:nth-child()` takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based.\n\n### Keyword values\n\n- `odd`\n - : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc.\n- `even`\n - : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.\n\n### Functional notation\n\n- ``\n\n - : Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by `An+B`, where:\n\n - `A` is an integer step size,\n - `B` is an integer offset,\n - `n` is all nonnegative integers, starting from 0.\n\n It can be read as the *An+B*th element of a list.\n\n### Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Example selectors\n\n- `tr:nth-child(odd)` or `tr:nth-child(2n+1)`\n - : Represents the odd rows of an HTML table: 1, 3, 5, etc.\n- `tr:nth-child(even)` or `tr:nth-child(2n)`\n - : Represents the even rows of an HTML table: 2, 4, 6, etc.\n- `:nth-child(7)`\n - : Represents the seventh element.\n- `:nth-child(5n)`\n - : Represents elements **5** \\[=5×1], **10** \\[=5×2], **15** \\[=5×3], **etc.** The first one to be returned as a result of the formula is **0** \\[=5x0], resulting in a no-match, since the elements are indexed from 1, whereas `n` starts from 0. This may seem weird at first, but it makes more sense when the `B` part of the formula is `>0`, like in the next example.\n- `:nth-child(n+7)`\n - : Represents the seventh and all following elements: **7** \\[=0+7], **8** \\[=1+7], **9** \\[=2+7], **etc.**\n- `:nth-child(3n+4)`\n - : Represents elements **4** \\[=(3×0)+4], **7** \\[=(3×1)+4], **10** \\[=(3×2)+4], **13** \\[=(3×3)+4], **etc.**\n- `:nth-child(-n+3)`\n - : Represents the first three elements. \\[=-0+3, -1+3, -2+3]\n- `p:nth-child(n)`\n - : Represents every `

    ` element in a group of siblings. This selects the same elements as a simple `p` selector (although with a higher specificity).\n- `p:nth-child(1)` or `p:nth-child(0n+1)`\n - : Represents every `

    ` that is the first element in a group of siblings. This is the same as the {{cssxref(\":first-child\")}} selector (and has the same specificity).\n- `p:nth-child(n+8):nth-child(-n+15)`\n - : Represents the eighth through the fifteenth `

    ` elements of a group of siblings.\n\n### Detailed example\n\n#### HTML\n\n```html\n

    span:nth-child(2n+1), WITHOUT an\n <em> among the child elements.

    \n

    Children 1, 3, 5, and 7 are selected.

    \n
    \n Span 1!\n Span 2\n Span 3!\n Span 4\n Span 5!\n Span 6\n Span 7!\n
    \n\n
    \n\n

    span:nth-child(2n+1), WITH an\n <em> among the child elements.

    \n

    Children 1, 5, and 7 are selected.
    \n 3 is used in the counting because it is a child, but it isn't\n selected because it isn't a <span>.

    \n
    \n Span!\n Span\n This is an `em`.\n Span\n Span!\n Span\n Span!\n Span\n
    \n\n
    \n\n

    span:nth-of-type(2n+1), WITH an\n <em> among the child elements.

    \n

    Children 1, 4, 6, and 8 are selected.
    \n 3 isn't used in the counting or selected because it is an <em>,\n not a <span>, and nth-of-type only selects\n children of that type. The <em> is completely skipped\n over and ignored.

    \n
    \n Span!\n Span\n This is an `em`.\n Span!\n Span\n Span!\n Span\n Span!\n
    \n```\n\n#### CSS\n\n```css\nhtml {\n font-family: sans-serif;\n}\n\nspan,\ndiv em {\n padding: 5px;\n border: 1px solid green;\n display: inline-block;\n margin-bottom: 3px;\n}\n\n.first span:nth-child(2n+1),\n.second span:nth-child(2n+1),\n.third span:nth-of-type(2n+1) {\n background-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Detailed_example', 550, 550)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{ Cssxref(\":nth-of-type\") }}, {{ Cssxref(\":nth-last-child\") }}\n" }, { "property": "_colon_nth-last-child", "document": "---\ntitle: ':nth-last-child()'\nslug: Web/CSS/:nth-last-child\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.nth-last-child\n---\n{{CSSRef}}\n\nThe **`:nth-last-child()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on their position among a group of siblings, counting from the end.\n\n```css\n/* Selects every fourth element\n among any group of siblings,\n counting backwards from the last one */\n:nth-last-child(4n) {\n color: lime;\n}\n```\n\n> **Note:** This pseudo-class is essentially the same as {{Cssxref(\":nth-child\")}}, except it counts items backwards from the _end_, not forwards from the beginning.\n\n## Syntax\n\nThe `nth-last-child` pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.\n\n### Keyword values\n\n- `odd`\n - : Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc., counting from the end.\n- `even`\n - : Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc., counting from the end.\n\n### Functional notation\n\n- ``\n - : Represents elements whose numeric position in a series of siblings matches the pattern `An+B`, for every positive integer or zero value of `n`. The index of the first element, counting from the end, is `1`. The values `A` and `B` must both be {{cssxref(\"<integer>\")}}s.\n\n### Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Example selectors\n\n- `tr:nth-last-child(odd)` or `tr:nth-last-child(2n+1)`\n - : Represents the odd rows of an HTML table: 1, 3, 5, etc., counting from the end.\n- `tr:nth-last-child(even)` or `tr:nth-last-child(2n)`\n - : Represents the even rows of an HTML table: 2, 4, 6, etc., counting from the end.\n- `:nth-last-child(7)`\n - : Represents the seventh element, counting from the end.\n- `:nth-last-child(5n)`\n - : Represents elements 5, 10, 15, etc., counting from the end.\n- `:nth-last-child(3n+4)`\n - : Represents elements 4, 7, 10, 13, etc., counting from the end.\n- `:nth-last-child(-n+3)`\n - : Represents the last three elements among a group of siblings.\n- `p:nth-last-child(n)` or `p:nth-last-child(n+1)`\n - : Represents every `

    ` element among a group of siblings. This is the same as a simple `p` selector. (Since `n` starts at zero, while the last element begins at one, `n` and `n+1` will both select the same elements.)\n- `p:nth-last-child(1)` or `p:nth-last-child(0n+1)`\n - : Represents every `

    ` that is the first element among a group of siblings, counting from the end. This is the same as the {{cssxref(\":last-child\")}} selector.\n\n### Table example\n\n#### HTML\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    First line
    Second line
    Third line
    Fourth line
    Fifth line
    \n```\n\n#### CSS\n\n```css\ntable {\n border: 1px solid blue;\n}\n\n/* Selects the last three elements */\ntr:nth-last-child(-n+3) {\n background-color: pink;\n}\n\n/* Selects every element starting from the second to last item */\ntr:nth-last-child(n+2) {\n color: blue;\n}\n\n/* Select only the last second element */\ntr:nth-last-child(2) {\n font-weight: 600;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Table_example', 300, 150)}}\n\n### Quantity query\n\nA _quantity query_ styles elements depending on how many of them there are. In this example, list items turn red when there are at least three of them in a given list. This is accomplished by combining the capabilities of the `nth-last-child` pseudo-class and the [general sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator).\n\n#### HTML\n\n```html\n

    A list of four items (styled):

    \n
      \n
    1. One
      2. \n
    2. Two
      3. \n
    3. Three
      4. \n
    4. Four
      5. \n
    \n\n

    A list of two items (unstyled):

    \n
      \n
    1. One
      2. \n
    2. Two
      3. \n
    \n```\n\n#### CSS\n\n```css\n/* If there are at least three list items,\n style them all */\nli:nth-last-child(n+3),\nli:nth-last-child(3) ~ li {\n color: red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Quantity_query', '100%', 270)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":nth-child\")}}, {{Cssxref(\":nth-last-of-type\")}}\n- [Quantity Queries for CSS](https://alistapart.com/article/quantity-queries-for-css/)\n" }, { "property": "_colon_nth-last-col", "document": "---\ntitle: ':nth-last-col'\nslug: Web/CSS/:nth-last-col\nbrowser-compat: css.selectors.nth-last-col\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`:nth-last-col()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) is designed for tables and grids. It accepts the An+B notation such as used with the {{Cssxref(\":nth-child\")}} selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.\n\n```css\n/* Selects every odd column in a table */\n:nth-last-col(odd) {\n background-color: pink;\n}\n```\n\n## Syntax\n\nThe `nth-last-col` pseudo-class is specified with a single argument, which represents the pattern for matching elements.\n\nSee {{Cssxref(\":nth-child\")}} for a more detailed explanation of its syntax.\n\n### Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n#### HTML\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n
    onetwothreefour
    onetwothreefour
    \n```\n\n#### CSS\n\n```css\ntd {\n border: 1px solid #ccc;\n padding: .2em;\n}\n\n/* Odd columns starting with the final column of the table */\n:nth-last-col(2n+1) {\n background-color: pink;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_example', 250, 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":nth-child\")}}, {{Cssxref(\":nth-last-of-type\")}}\n" }, { "property": "_colon_nth-last-of-type", "document": "---\ntitle: ':nth-last-of-type()'\nslug: Web/CSS/:nth-last-of-type\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.nth-last-of-type\n---\n{{CSSRef}}\n\nThe **`:nth-last-of-type()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on their position among siblings of the same type (tag name), counting from the end.\n\n```css\n/* Selects every fourth

    element\n among any group of siblings,\n counting backwards from the last one */\np:nth-last-of-type(4n) {\n color: lime;\n}\n```\n\n> **Note:** This pseudo-class is essentially the same as {{Cssxref(\":nth-of-type\")}}, except it counts items backwards from the _end_, not forwards from the beginning.\n\n## Syntax\n\nThe `nth-last-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.\n\nSee {{Cssxref(\":nth-last-child\")}} for a more detailed explanation of its syntax.\n\n### Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

    \n This is a span.\n This is another span.\n This is emphasized.\n Wow, this span gets limed!!!\n This is struck through.\n Here is one last span.\n
    \n```\n\n### CSS\n\n```css\nspan:nth-last-of-type(2) {\n background-color: lime;\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Examples')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":nth-last-child\")}}, {{Cssxref(\":nth-of-type\")}}\n" }, { "property": "_colon_nth-of-type", "document": "---\ntitle: ':nth-of-type()'\nslug: Web/CSS/:nth-of-type\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.nth-of-type\n---\n{{CSSRef}}\n\nThe **`:nth-of-type()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on their position among siblings of the same type (tag name).\n\n```css\n/* Selects every fourth

    element\n among any group of siblings */\np:nth-of-type(4n) {\n color: lime;\n}\n```\n\n## Syntax\n\nThe `nth-of-type` pseudo-class is specified with a single argument, which represents the pattern for matching elements.\n\nSee {{Cssxref(\":nth-child\")}} for a more detailed explanation of its syntax.\n\n### Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n#### HTML\n\n```html\n

    \n
    This element isn't counted.
    \n

    1st paragraph.

    \n

    2nd paragraph.

    \n
    This element isn't counted.
    \n

    3rd paragraph.

    \n

    4th paragraph.

    \n
    \n```\n\n#### CSS\n\n```css\n/* Odd paragraphs */\np:nth-of-type(2n+1) {\n color: red;\n}\n\n/* Even paragraphs */\np:nth-of-type(2n) {\n color: blue;\n}\n\n/* First paragraph */\np:nth-of-type(1) {\n font-weight: bold;\n}\n\n/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.\nThe second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */\np.fancy:nth-of-type(2n+1) {\n text-decoration: underline;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_example', 250, 250)}}\n\n> **Note:** There is no way to select the nth-of-class using this selector. The selector looks at the type only when creating the list of matches. You can however apply CSS to an element based on `:nth-of-type` location **and** a class, as shown in the example above.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":nth-child\")}}, {{Cssxref(\":nth-last-of-type\")}}\n" }, { "property": "_colon_only-child", "document": "---\ntitle: ':only-child'\nslug: Web/CSS/:only-child\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.only-child\n---\n{{CSSRef}}\n\nThe **`:only-child`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element without any siblings. This is the same as `:first-child:last-child` or `:nth-child(1):nth-last-child(1)`, but with a lower specificity.\n\n```css\n/* Selects each

    , but only if it is the */\n/* only child of its parent */\np:only-child {\n background-color: lime;\n}\n```\n\n> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n#### HTML\n\n```html\n

    \n
    I am an only child.
    \n
    \n\n
    \n
    I am the 1st sibling.
    \n
    I am the 2nd sibling.
    \n
    I am the 3rd sibling,
    but this is an only child.
    \n
    \n```\n\n#### CSS\n\n```css\ndiv:only-child {\n color: red;\n}\n\ndiv {\n display: inline-block;\n margin: 6px;\n outline: 1px solid;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_example','100%',180)}}\n\n### A list example\n\n#### HTML\n\n```html\n
      \n
    1. First\n
        \n
      • This list has just one element.
        • \n
      \n
      2. \n
    2. Second\n
        \n
      • This list has three elements.
        • \n
      • This list has three elements.
        • \n
      • This list has three elements.
        • \n
      \n
      3. \n
    \n```\n\n#### CSS\n\n```css\nli li {\n list-style-type: disc;\n}\n\nli:only-child {\n color: red;\n list-style-type: square;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('A_list_example', '100%', 210)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":only-of-type\")}}\n- {{Cssxref(\":first-child\")}}\n- {{Cssxref(\":last-child\")}}\n- {{Cssxref(\":nth-child\")}}\n" }, { "property": "_colon_only-of-type", "document": "---\ntitle: ':only-of-type'\nslug: Web/CSS/:only-of-type\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.only-of-type\n---\n{{CSSRef}}\n\nThe **`:only-of-type`** CSS [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element that has no siblings of the same type.\n\n```css\n/* Selects each

    , but only if it is the */\n/* only

    element inside its parent */\np:only-of-type {\n background-color: lime;\n}\n```\n\n> **Note:** As originally defined, the selected element had to have a parent. Beginning with Selectors Level 4, this is no longer required.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Styling elements with no siblings of the same type\n\n#### HTML\n\n```html\n

    \n
    I am `div` #1.
    \n

    I am the only `p` among my siblings.

    \n
    I am `div` #2.
    \n
    I am `div` #3.\n I am the only `i` child.\n I am `em` #1.\n I am `em` #2.\n
    \n
    \n```\n\n#### CSS\n\n```css\nmain :only-of-type {\n color: red;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Styling_elements_with_no_siblings_of_the_same_type','100%',180)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\":only-child\")}}\n- {{Cssxref(\":first-of-type\")}}\n- {{Cssxref(\":last-of-type\")}}\n- {{Cssxref(\":nth-of-type\")}}\n" }, { "property": "_colon_optional", "document": "---\ntitle: ':optional'\nslug: Web/CSS/:optional\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.optional\n---\n{{ CSSRef }}\n\nThe **`:optional`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any {{HTMLElement(\"input\")}}, {{HTMLElement(\"select\")}}, or {{HTMLElement(\"textarea\")}} element that does not have the {{ htmlattrxref(\"required\", \"input\") }} attribute set on it.\n\n```css\n/* Selects any optional */\ninput:optional {\n border: 1px dashed black;\n}\n```\n\nThis pseudo-class is useful for styling fields that are not required to submit a form.\n\n> **Note:** The {{cssxref(\":required\")}} pseudo-class selects _required_ form fields.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### The optional field has a purple border\n\n#### HTML\n\n```html\n
    \n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n```\n\n#### CSS\n\n```css\nlabel {\n display: block;\n margin: 1px;\n padding: 1px;\n}\n\n.field {\n margin: 1px;\n padding: 1px;\n}\n\ninput:optional {\n border-color: rebeccapurple;\n border-width: 3px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Examples', 600, 120)}}\n\n## Accessibility concerns\n\nIf a [form](/en-US/docs/Web/HTML/Element/form) contains optional {{htmlelement(\"input\")}}s, required inputs should be indicated using the {{ htmlattrxref(\"required\", \"input\") }} attribute. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful form submission.\n\nRequired inputs should also be indicated visually, using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.\n\n- [MDN Understanding WCAG, Guideline 3.3 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes)\n- [Understanding Success Criterion 3.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other validation-related pseudo-classes: {{ cssxref(\":required\") }}, {{ cssxref(\":invalid\") }}, {{ cssxref(\":valid\") }}\n- [Form data validation](/en-US/docs/Learn/Forms/Form_validation)\n" }, { "property": "_colon_is", "document": "---\ntitle: ':is() (:matches(), :any())'\nslug: Web/CSS/:is\ntags:\n - ':is'\n - CSS\n - Pseudo-class\n - Reference\n - Selector\n - Selectors\n - Web\nbrowser-compat: css.selectors.is\n---\n{{CSSRef}}\n\n> **Note:** `:matches()` was renamed to `:is()` in [CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258).\n\nThe **`:is()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.\n\n```css\n/* Selects any paragraph inside a header, main\n or footer element that is being hovered */\n:is(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n\n/* The above is equivalent to the following */\nheader p:hover,\nmain p:hover,\nfooter p:hover {\n color: red;\n cursor: pointer;\n}\n```\n\nPseudo-elements are not valid in the selector list for `:is()`.\n\nNote that older browsers support this functionality as `:matches()`, or through an older, prefixed pseudo-class — `:any()`, including older versions of Chrome, Firefox, and Safari. `:any()` works in exactly the same way as `:matches()`/`:is()`, except that it requires vendor prefixes and doesn't support [complex selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors).\n\nThese legacy pseudo-classes can be used to provide backwards compatibility.\n\n```css\n/* Backwards-compatible version with :-*-any() and :matches()\n (It is not possible to group selectors into single rule,\n because presence of invalid selector would invalidate whole rule.) */\n:-webkit-any(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n:-moz-any(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n:matches(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n```\n\n### Difference between :is() and :where()\n\nThe difference between the two is that `:is()` counts towards the specificity of the overall selector (it takes the specificity of its most specific argument), whereas [`:where()`](/en-US/docs/Web/CSS/:where) has a specificity value of 0. This is demonstrated by the [example on the `:where()` reference page](/en-US/docs/Web/CSS/:where#examples).\n\n### Forgiving Selector Parsing\n\nThe specification defines `:is()` and `:where()` as accepting a [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list).\n\nIn CSS when using a selector list, if any of the selectors are invalid then the whole list is deemed invalid. When using `:is()` or `:where()` instead of the whole list of selectors being deemed invalid if one fails to parse, the incorrect or unsupported selector will be ignored and the others used.\n\n```css\n:is(:valid, :unsupported) {\n ...\n}\n```\n\nWill still parse correctly and match `:valid` even in browsers which don't support `:unsupported`, whereas:\n\n```css\n:valid, :unsupported {\n ...\n}\n```\n\nWill be ignored in browsers which don't support `:unsupported` even if they support `:valid`.\n\n## Examples\n\n### Cross-browser example\n\n```html\n
    \n

    This is my header paragraph

    \n
    \n\n
    \n
      \n

    • This is my first

      list item

      • \n

    • This is my second

      list item

      • \n
    \n
    \n\n
    \n

    This is my footer paragraph

    \n
    \n```\n\n```css\n:-webkit-any(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n\n:-moz-any(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n\n:matches(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n\n:is(header, main, footer) p:hover {\n color: red;\n cursor: pointer;\n}\n```\n\n```js\nlet matchedItems;\n\ntry {\n matchedItems = document.querySelectorAll(':is(header, main, footer) p');\n} catch(e) {\n try {\n matchedItems = document.querySelectorAll(':matches(header, main, footer) p');\n } catch(e) {\n try {\n matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');\n } catch(e) {\n try {\n matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');\n } catch(e) {\n console.log('Your browser doesn\\'t support :is(), :matches(), or :any()');\n }\n }\n }\n}\n\nmatchedItems.forEach(applyHandler);\n\nfunction applyHandler(elem) {\n elem.addEventListener('click', function(e) {\n alert('This paragraph is inside a ' + e.target.parentNode.nodeName);\n });\n}\n```\n\n{{EmbedLiveSample(\"Cross-browser_example\", \"100%\", 300)}}\n\n### Simplifying list selectors\n\nThe `:is()` pseudo-class can greatly simplify your CSS selectors. For example, the following CSS:\n\n```css\n/* 3-deep (or more) unordered lists use a square */\nol ol ul, ol ul ul, ol menu ul, ol dir ul,\nol ol menu, ol ul menu, ol menu menu, ol dir menu,\nol ol dir, ol ul dir, ol menu dir, ol dir dir,\nul ol ul, ul ul ul, ul menu ul, ul dir ul,\nul ol menu, ul ul menu, ul menu menu, ul dir menu,\nul ol dir, ul ul dir, ul menu dir, ul dir dir,\nmenu ol ul, menu ul ul, menu menu ul, menu dir ul,\nmenu ol menu, menu ul menu, menu menu menu, menu dir menu,\nmenu ol dir, menu ul dir, menu menu dir, menu dir dir,\ndir ol ul, dir ul ul, dir menu ul, dir dir ul,\ndir ol menu, dir ul menu, dir menu menu, dir dir menu,\ndir ol dir, dir ul dir, dir menu dir, dir dir dir {\n list-style-type: square;\n}\n```\n\n... can be replaced with:\n\n```css\n/* 3-deep (or more) unordered lists use a square */\n:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {\n list-style-type: square;\n}\n```\n\n### Simplifying section selectors\n\nThe `:is()` pseudo-class is particularly useful when dealing with HTML5 [sections and headings](/en-US/docs/Web/HTML/Element/Heading_Elements). Since {{HTMLElement(\"section\")}}, {{HTMLElement(\"article\")}}, {{HTMLElement(\"aside\")}}, and {{HTMLElement(\"nav\")}} are commonly nested together, without `:is()`, styling them to match one another can be tricky.\n\nFor example, without `:is()`, styling all the {{HTMLElement(\"h1\")}} elements at different depths could be very complicated:\n\n```css\n/* Level 0 */\nh1 {\n font-size: 30px;\n}\n/* Level 1 */\nsection h1, article h1, aside h1, nav h1 {\n font-size: 25px;\n}\n/* Level 2 */\nsection section h1, section article h1, section aside h1, section nav h1,\narticle section h1, article article h1, article aside h1, article nav h1,\naside section h1, aside article h1, aside aside h1, aside nav h1,\nnav section h1, nav article h1, nav aside h1, nav nav h1 {\n font-size: 20px;\n}\n/* Level 3 */\n/* ... don't even think about it! */\n```\n\nUsing `:is()`, though, it's much easier:\n\n```css\n/* Level 0 */\nh1 {\n font-size: 30px;\n}\n/* Level 1 */\n:is(section, article, aside, nav) h1 {\n font-size: 25px;\n}\n/* Level 2 */\n:is(section, article, aside, nav)\n:is(section, article, aside, nav) h1 {\n font-size: 20px;\n}\n/* Level 3 */\n:is(section, article, aside, nav)\n:is(section, article, aside, nav)\n:is(section, article, aside, nav) h1 {\n font-size: 15px;\n}\n```\n\n### :is() does not select pseudo-elements\n\nThe `:is()` pseudo-class does not match pseudo-elements. So rather than this:\n\n```css example-bad\nsome-element:is(::before, ::after) {\n display: block;\n}\n```\n\ninstead do:\n\n```css example-good\nsome-element::before,\nsome-element::after {\n display: block;\n}\n```\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\":where\", \":where()\")}} - Like `:is()`, but with 0 [specificity](/en-US/docs/Web/CSS/Specificity).\n- [Selector list](/en-US/docs/Web/CSS/Selector_list)\n- [Web components](/en-US/docs/Web/Web_Components)\n" }, { "property": "_colon_lang", "document": "---\ntitle: ':lang()'\nslug: Web/CSS/:lang\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.lang\n---\n{{CSSRef}}\n\nThe **`:lang()`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches elements based on the language they are determined to be in.\n\n```css\n/* Selects any

    in English (en) */\np:lang(en) {\n quotes: '\\201C' '\\201D' '\\2018' '\\2019';\n}\n```\n\n> **Note:** In HTML, the language is determined by a combination of the {{htmlattrxref(\"lang\")}} attribute, the {{HTMLElement(\"meta\")}} element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.\n\n## Syntax\n\n### Formal syntax\n\n{{csssyntax}}\n\n### Parameter\n\n- ``\n - : A {{cssxref(\"<string>\")}} representing the language you want to target. Acceptable values are specified in the [HTML](/en-US/docs/Web/HTML) spec.\n\n## Examples\n\nIn this example, the `:lang()` pseudo-class is used to match the parents of quote elements ({{htmlElement(\"q\")}}) using [child combinators](/en-US/docs/Web/CSS/Child_combinator). Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary(\"Unicode\")}} values are used to specify some of the special quote characters.\n\n### HTML\n\n```html\n

    This English quote has a nested quote inside.
    \n
    This French quote has a nested quote inside.
    \n
    This German quote has a nested quote inside.
    \n```\n\n### CSS\n\n```css\n:lang(en) > q { quotes: '\\201C' '\\201D' '\\2018' '\\2019'; }\n:lang(fr) > q { quotes: '« ' ' »'; }\n:lang(de) > q { quotes: '»' '«' '\\2039' '\\203A'; }\n```\n\n### Result\n\n{{EmbedLiveSample('Examples', 350)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Language-related pseudo-classes: {{cssxref(\":lang\")}}, {{cssxref(\":dir\")}}\n- HTML {{htmlattrxref(\"lang\")}} attribute\n- HTML {{htmlattrxref(\"translate\")}} attribute\n- {{RFC(5646, \"Tags for Identifying Languages (also known as BCP 47)\")}}\n" }, { "property": "_colon_past", "document": "---\ntitle: ':past'\nslug: Web/CSS/:past\nbrowser-compat: css.selectors.past\n---\n{{CSSRef}}\n\nThe **`:past`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches {{cssxref(\":current\")}}. For example in a video with captions which are being displayed by [WebVTT](/en-US/docs/Web/API/WebVTT_API).\n\n```css\n:past(p, span) {\n display: none;\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### CSS\n\n```css\n:past(p, span) {\n display: none;\n}\n```\n\n### HTML\n\n```html\n\n```\n\n### WebVTT\n\n```\nWEBVTT FILE\n\n1\n00:00:03.500 --> 00:00:05.000\nThis is the first caption\n\n2\n00:00:06.000 --> 00:00:09.000\nThis is the second caption\n\n3\n00:00:11.000 --> 00:00:19.000\nThis is the third caption\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Web Video Text Tracks Format (WebVTT)](/en-US/docs/Web/API/WebVTT_API)\n- {{cssxref(\":current\")}}\n- {{cssxref(\":future\")}}\n" }, { "property": "_colon_left", "document": "---\ntitle: ':left'\nslug: Web/CSS/:left\ntags:\n - '@page'\n - CSS\n - Layout\n - Pseudo-class\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.left\n---\n{{ CSSRef() }}\n\nThe **`:left`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes), used with the {{cssxref(\"@page\")}} [at-rule](/en-US/docs/Web/CSS/At-rule), represents all left-hand pages of a printed document.\n\n```css\n/* Selects any left-hand pages when printing */\n@page :left {\n margin: 2in 3in;\n}\n```\n\nWhether a given page is \"left\" or \"right\" is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a {{Cssxref(\":right\")}} page; if it has a major writing direction of right-to-left then it will be a `:left` page.\n\n> **Note:** This pseudo-class can be used to change only the {{ Cssxref(\"margin\") }}, {{ Cssxref(\"padding\") }}, {{ Cssxref(\"border\") }}, and {{ Cssxref(\"background\") }} properties of the _page box_. All other properties will be ignored, and only the page box, not the document content on the page, will be affected.\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a margin for left-hand pages\n\n```css\n@page :left {\n margin: 2in 3in;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{ Cssxref(\"@page\") }}\n- Other page-related pseudo-classes: {{ Cssxref(\":first\") }}, {{ Cssxref(\":right\") }}\n" }, { "property": "_colon_placeholder-shown", "document": "---\ntitle: ':placeholder-shown'\nslug: Web/CSS/:placeholder-shown\ntags:\n - ':placeholder-shown'\n - CSS\n - Pseudo-class\n - Reference\n - Selector\nbrowser-compat: css.selectors.placeholder-shown\n---\n{{CSSRef}}\n\nThe **`:placeholder-shown`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents any {{HTMLElement(\"input\")}} or {{HTMLElement(\"textarea\")}} element that is currently displaying [placeholder text](/en-US/docs/Web/HTML/Element/input#placeholder).\n\n```css\n/* Selects any element with an active placeholder */\n:placeholder-shown {\n border: 2px solid silver;\n}\n```\n\n## Syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Basic example\n\nThis example applies special font and border styles when the placeholder is shown.\n\n#### HTML\n\n```html\n\n```\n\n#### CSS\n\n```css\ninput {\n border: 1px solid black;\n padding: 3px;\n}\n\ninput:placeholder-shown {\n border-color: teal;\n color: purple;\n font-style: italic;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Basic_example\", 200, 80)}}\n\n### Overflowing text\n\nWhen form fields are too small, placeholder text can get cropped in an undesirable way. You can use the {{cssxref(\"text-overflow\")}} property to alter the way overflowing text is displayed.\n\n#### HTML\n\n```html\n\n

    \n\n```\n\n#### CSS\n\n```css\n#input2:placeholder-shown {\n text-overflow: ellipsis;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Overflowing_text\", 200, 80)}}\n\n### Customized input field\n\nThe following example highlights the Branch and ID code fields with a custom style.\n\n#### HTML\n\n```html\n
    \n

    \n \n \n

    \n

    \n \n \n

    \n

    \n \n \n

    \n \n
    \n```\n\n#### CSS\n\n```css\ninput {\n background-color: #E8E8E8;\n color: black;\n}\n\ninput.studentid:placeholder-shown {\n background-color: yellow;\n color: red;\n font-style: italic;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Customized_input_field\", 200, 180)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The {{CSSxRef(\"::placeholder\")}} pseudo-element styles the placeholder _itself_.\n- Related HTML elements: {{HTMLElement(\"input\")}}, {{HTMLElement(\"textarea\")}}\n- [HTML forms](/en-US/docs/Learn/Forms)\n" }, { "property": "_colon_picture-in-picture", "document": "---\ntitle: ':picture-in-picture'\nslug: Web/CSS/:picture-in-picture\ntags:\n - CSS\n - Picture-in-Picture\n - Picture-in-Picture API\n - Pseudo-class\n - Reference\n - Selector\n - Video\n - pip\nbrowser-compat: css.selectors.picture-in-picture\n---\n{{CSSRef}}\n\nThe **`:picture-in-picture`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) matches the element which is currently in picture-in-picture mode.\n\n## Syntax\n\n{{csssyntax}}\n\n## Usage notes\n\nThe `:picture-in-picture` pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.\n\n## Examples\n\nIn this example, a video has a box shadow when it is displayed in the floating window.\n\n### HTML\n\nThe page's HTML looks like this:\n\n```html\n

    MDN Web Docs Demo: :picture-in-picture pseudo-class

    \n\n

    This demo uses the :picture-in-picture pseudo-class to automatically\n change the style of a video entirely using CSS.

    \n\n\n```\n\nThe {{HTMLElement(\"video\")}} with the ID `\"pip-video\"` will change between having a red box shadow or not, depending on whether or not it is displayed in the picture-in-picture floating window.\n\n### CSS\n\nThe magic happens in the CSS.\n\n```css\n:picture-in-picture {\n box-shadow: 0 0 0 5px red;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Picture-in-picture API](/en-US/docs/Web/API/Picture-in-Picture_API)\n- {{DOMxRef(\"HTMLVideoElement.requestPictureInPicture()\")}}\n- {{DOMxRef(\"HTMLVideoElement.autoPictureInPicture\")}}\n- {{DOMxRef(\"HTMLVideoElement.disablePictureInPicture\")}}\n- {{DOMxRef(\"Document.pictureInPictureEnabled\")}}\n- {{DOMxRef(\"Document.exitPictureInPicture()\")}}\n- {{DOMxRef(\"Document.pictureInPictureElement\")}}\n" }, { "property": "_colon_playing", "document": "---\ntitle: ':playing'\nslug: Web/CSS/:playing\ntags:\n - CSS\n - Pseudo-class\n - Reference\n - playing\nbrowser-compat: css.selectors.playing\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`:playing`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being \"played\" or \"paused\", when that element is \"playing\".\n\nA resource is playing even if in buffering state or paused for any reason other than a user interaction to cause it to be paused.\n\n```css\n:playing {\n\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### CSS\n\n```css\n:playing {\n border: 5px solid green;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\":paused\")}}\n" }, { "property": "_colon_read-only", "document": "---\ntitle: ':read-only'\nslug: Web/CSS/:read-only\ntags:\n - CSS\n - Layout\n - Pseudo-class\n - Read-only\n - Reference\n - Selector\n - Web\nbrowser-compat: css.selectors.read-only\n---\n{{CSSRef}}\n\nThe **`:read-only`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents an element (such as `input` or `textarea`) that is not editable by the user.\n\n```css\ninput:read-only, textarea:read-only {\n background-color: #ccc;\n}\n\np:read-only {\n background-color: #ccc;\n}\n```\n\n## Syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Confirming form information in read-only/read-write controls\n\nOne use of `readonly` form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. We do just this in the example below.\n\nThe `:read-only` pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.The `:read-write` pseudo-class on the other hand is used to provide some nicer styling to the editable `\n```\n\n#### CSS\n\n```css\ndiv {\n font-size: 2rem;\n font-family: serif;\n}\n\n#nokern {\n font-kerning: none;\n}\n\n#kern {\n font-kerning: normal;\n}\n```\n\n#### JavaScript\n\n```js\nlet input = document.getElementById('input');\nlet kern = document.getElementById('kern');\nlet nokern = document.getElementById('nokern');\n\ninput.addEventListener('keyup', function() {\n kern.textContent = input.value; /* Update content */\n nokern.textContent = input.value;\n});\n\nkern.textContent = input.value; /* Initialize content */\nnokern.textContent = input.value;\n```\n\n{{ EmbedLiveSample('Enabling_and_disabling_kerning') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-variant\")}}, {{cssxref(\"font-variant-position\")}}, {{cssxref(\"font-variant-east-asian\")}}, {{cssxref(\"font-variant-caps\")}}, {{cssxref(\"font-variant-ligatures\")}}, {{cssxref(\"font-variant-numeric\")}}, {{cssxref(\"font-variant-alternates\")}}, {{cssxref(\"font-synthesis\")}}, {{cssxref(\"letter-spacing\")}}\n" }, { "property": "font-language-override", "document": "---\ntitle: font-language-override\nslug: Web/CSS/font-language-override\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - font-language-override\n - l10n\n - recipe:css-property\nbrowser-compat: css.properties.font-language-override\n---\n{{CSSRef}}\n\nThe **`font-language-override`** CSS property controls the use of language-specific glyphs in a typeface.\n\n```css\n/* Keyword value */\nfont-language-override: normal;\n\n/* values */\nfont-language-override: \"ENG\"; /* Use English glyphs */\nfont-language-override: \"TRK\"; /* Use Turkish glyphs */\n\n/* Global values */\nfont-language-override: inherit;\nfont-language-override: initial;\nfont-language-override: revert;\nfont-language-override: revert-layer;\nfont-language-override: unset;\n```\n\nBy default, HTML's `lang` attribute tells browsers to display glyphs designed specifically for that language. For example, a lot of fonts have a special character for the digraph `fi` that merge the dot on the \"i\" with the \"f.\" However, if the language is set to Turkish the typeface will likely know not to use the merged glyph; Turkish has two versions of the \"i,\" one with a dot (`i`) and one without (`ı`), and using the ligature would incorrectly transform a dotted \"i\" into a dotless \"i.\"\n\nThe `font-language-override` property lets you override the typeface behavior for a specific language. This is useful, for example, when the typeface you're using lacks proper support for the language. For instance, if a typeface doesn't have proper rules for the Azeri language, you can force the font to use Turkish glyphs, which follow similar rules.\n\n## Syntax\n\nThe `font-language-override` property is specified as the keyword `normal` or a ``.\n\n### Values\n\n- `normal`\n - : Tells the browser to use font glyphs that are appropriate for the language specified by the `lang` attribute. This is the default value.\n- {{cssxref(\"string\")}}\n - : Tells the browser to use font glyphs that are appropriate for the language specified by the string. The string must match a language tag found in the [OpenType language system](https://docs.microsoft.com/en-us/typography/opentype/spec/languagetags). For example, \"ENG\" is English, and \"KOR\" is Korean.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using Danish glyphs\n\n#### HTML\n\n```html\n

    Default language setting.

    \n

    This is a string with the font-language-override set to Danish.

    \n```\n\n#### CSS\n\n```css\np.para1 {\n font-language-override: normal;\n}\n\np.para2 {\n font-language-override: \"DAN\";\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-variant\")}}, {{cssxref(\"font-variant-position\")}}, {{cssxref(\"font-variant-east-asian\")}}, {{cssxref(\"font-variant-caps\")}}, {{cssxref(\"font-variant-ligatures\")}}, {{cssxref(\"font-variant-numeric\")}}, {{cssxref(\"font-variant-alternates\")}}, {{cssxref(\"font-synthesis\")}}, {{cssxref(\"font-kerning\")}}.\n" }, { "property": "font-optical-sizing", "document": "---\ntitle: font-optical-sizing\nslug: Web/CSS/font-optical-sizing\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-optical-sizing\n---\n{{CSSRef}}\n\nThe **`font-optical-sizing`** [CSS](/en-US/docs/Web/CSS) property sets whether text rendering is optimized for viewing at different sizes.\n\n{{EmbedInteractiveExample(\"pages/css/font-optical-sizing.html\")}}\n\n## Syntax\n\n```css\n/* keyword values */\nfont-optical-sizing: none;\nfont-optical-sizing: auto; /* default */\n\n/* Global values */\nfont-optical-sizing: inherit;\nfont-optical-sizing: initial;\nfont-optical-sizing: revert;\nfont-optical-sizing: revert-layer;\nfont-optical-sizing: unset;\n```\n\n### Values\n\n- none\n - : The browser will not modify the shape of glyphs for optimal viewing.\n- auto\n - : The browser will modify the shape of glyphs for optimal viewing.\n\n## Description\n\nOptical sizing is enabled by default for fonts that have an optical size variation axis. The optical size variation axis is represented by `opsz` in {{cssxref(\"font-variation-settings\")}}.\n\nWhen optical sizing is used, small text sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Disabling optical sizing\n\n```html\n

    This paragraph is optically sized.\n This is the default across browsers.

    \n\n

    This paragraph is not optically sized.\n You should see a difference in supporting browsers.

    \n```\n\n```css\n@font-face {\n src: url('AmstelvarAlpha-VF.ttf');\n font-family:'Amstelvar';\n font-style: normal;\n}\n\np {\n font-size: 36px;\n font-family: Amstelvar;\n}\n\n.no-optical-sizing {\n font-optical-sizing: none;\n}\n```\n\n> **Note:** The font referenced above — which includes optical sizing and is freely-licensed — is good for testing. You can [download it on GitHub](https://github.com/googlefonts/amstelvar/releases).\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-size\")}}\n- {{cssxref(\"font-size-adjust\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "display-inside", "document": "---\ntitle: \nslug: Web/CSS/display-inside\ntags:\n - CSS\n - CSS Data Type\n - CSS Display\n - Data Type\n - Reference\n - display-inside\nspec-urls: https://drafts.csswg.org/css-display/#typedef-display-inside\n---\n{{CSSRef}}\n\nThese keywords specify the element's inner {{CSSxRef(\"display\")}} type, which defines the type of formatting context that lays out its contents (assuming it is a non-replaced element). These keywords are used as values of the `display` property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the {{CSSxRef(\"<display-outside>\")}} keywords.\n\n## Syntax\n\nValid `` values:\n\n- `flow` {{Experimental_Inline}}\n\n - : The element lays out its contents using flow layout (block-and-inline layout).\n\n If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.\n\n Depending on the value of other properties (such as {{CSSxRef(\"position\")}}, {{CSSxRef(\"float\")}}, or {{CSSxRef(\"overflow\")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.\n\n- `flow-root`\n - : The element generates a block element box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.\n- `table`\n - : These elements behave like HTML {{HTMLElement(\"table\")}} elements. It defines a block-level box.\n- `flex`\n - : The element behaves like a block element and lays out its content according to the [flexbox model](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout).\n- `grid`\n - : The element behaves like a block element and lays out its content according to the [grid model](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout).\n- `ruby` {{Experimental_Inline}}\n - : The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding HTML {{HTMLElement(\"ruby\")}} elements.\n\n> **Note:** Browsers that support the two value syntax, on finding the inner value only, such as when `display: flex` or `display: grid` is specified, will set their outer value to `block`. This will result in expected behavior; for example if you specify an element to be `display: grid`, you would expect that the box created on the grid container would be a block level box.\n\n## Examples\n\nIn this example the parent box has been given `display: flow-root` and so establishes a new BFC and contains the floated item.\n\n### HTML\n\n```html\n
    \n
    I am a floated box!
    \n

    I am content inside the container.

    \n
    \n```\n\n### CSS\n\n```css\n.box {\n background-color: rgb(224, 206, 247);\n border: 5px solid rebeccapurple;\n display: flow-root;\n}\n\n.float {\n float: left;\n width: 200px;\n height: 150px;\n background-color: white;\n border:1px solid black;\n padding: 10px;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", 180)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n### Support of multiple keyword values\n\n{{Compat(\"css.properties.display.multi-keyword_values\", 10)}}\n\n- Chromium bug: \n\n### Support of flow-root\n\n{{Compat(\"css.properties.display.flow-root\", 10)}}\n\n### Support of table\n\n{{Compat(\"css.properties.display.table_values\", 10)}}\n\n### Support of grid\n\n{{Compat(\"css.properties.display.grid\", 10)}}\n\n### Support of flex\n\n{{Compat(\"css.properties.display.flex\", 10)}}\n\n### Support of ruby\n\n{{Compat(\"css.properties.display.ruby_values\", 10)}}\n\n## See also\n\n- {{CSSxRef(\"display\")}}\n\n - {{CSSxRef(\"<display-outside>\")}}\n - {{CSSxRef(\"<display-listitem>\")}}\n - {{CSSxRef(\"<display-internal>\")}}\n - {{CSSxRef(\"<display-box>\")}}\n - {{CSSxRef(\"<display-legacy>\")}}\n\n- [Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)\n- [Basic Concepts of Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)\n" }, { "property": "font-size-adjust", "document": "---\ntitle: font-size-adjust\nslug: Web/CSS/font-size-adjust\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-size-adjust\n---\nThe **`font-size-adjust`** [CSS](/en-US/docs/Web/CSS) property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).\n\n```css\n/* Use the specified font size */\nfont-size-adjust: none;\n\n/* Use a font size that makes lowercase\n letters half the specified font size */\nfont-size-adjust: 0.5;\n\n/* Two values - added in the Level 5 spec */\nfont-size-adjust: ex-height 0.5;\n\n/* Global values */\nfont-size-adjust: inherit;\nfont-size-adjust: initial;\nfont-size-adjust: revert;\nfont-size-adjust: revert-layer;\nfont-size-adjust: unset;\n```\n\nThe property is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. Legibility can become an issue when the first-choice {{ Cssxref(\"font-family\") }} is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).\n\nTo use this property in a way that is compatible with browsers that do not support `font-size-adjust`, it is specified as a number that the {{ Cssxref(\"font-size\") }} property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies:\n\n```css\nfont-size: 14px;\nfont-size-adjust: 0.5;\n```\n\n... is really specifying that the lowercase letters of the font should be `7px` high (0.5 × 14px). This will still produce reasonable results in browsers that do not support `font-size-adjust`, where a `14px` font will be used.\n\n## Syntax\n\n### Values\n\n- `none`\n - : Choose the size of the font based only on the {{ Cssxref(\"font-size\") }} property.\n- ex-height | cap-height | ch-width | ic-width | ic-height\n\n - : Specifies the font metric to normalize on. Defaults to `ex-height`. One of:\n\n - `ex-height`\n - : Normalize the aspect value of the fonts, using the x-height divided by the font size.\n - `cap-height`\n - : Normalize the cap-height of the fonts, using the cap-height by the font size.\n - `ch-width`\n - : Normalize the horizontal narrow pitch of the fonts, using the advance width of \"0\" (ZERO, U+0030) divided by the font size.\n - `ic-width`\n - : Normalize the horizontal wide pitch of the font, using the advance width of \"水\" (CJK water ideograph, U+6C34) divided by the font size.\n - `ic-height`\n - : Normalize the vertical wide pitch of the font, using the advance height of \"水\" (CJK water ideograph, U+6C34) divided by the font size.\n\n- {{cssxref(\"<number>\")}}\n\n - : Choose the size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the {{ Cssxref(\"font-size\") }}.\n\n The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice {{ Cssxref(\"font-family\") }}. This means that the first-choice font, when available, will appear the same size in browsers, whether or not they support `font-size-adjust`.\n\n `0` yields text of zero height (hidden text).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Adjusting lower-case letter sizes\n\n#### HTML\n\n```html\n

    This text uses the Times font (10px), which is hard to read in small sizes.

    \n

    This text uses the Verdana font (10px), which has relatively large lowercase letters.

    \n

    This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.

    \n```\n\n#### CSS\n\n```css\n.times {\n font-family: Times, serif;\n font-size: 10px;\n}\n\n.verdana {\n font-family: Verdana, sans-serif;\n font-size: 10px;\n}\n\n.adjtimes {\n font-family: Times, serif;\n font-size-adjust: ex-height 0.58;\n font-size: 10px;\n}\n```\n\n#### Results\n\n{{ EmbedLiveSample('Adjusting_lower-case_letter_sizes', 500, 200) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n{{CSSRef}}\n\n## See also\n\n- {{cssxref(\"font-size\")}}\n- {{cssxref(\"font-weight\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n- {{cssxref(\"@font-face/size-adjust\", \"size-adjust\")}} descriptor\n" }, { "property": "flex-basis", "document": "---\ntitle: flex-basis\nslug: Web/CSS/flex-basis\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.flex-basis\n---\n{{CSSRef}}\n\nThe **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with {{Cssxref(\"box-sizing\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/flex-basis.html\")}}\n\nIn this example the {{cssxref(\"flex-grow\")}} and {{cssxref(\"flex-shrink\")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`.\n\nThe demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized.\n\nThe image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become:\n\n![The Firefox Flexbox Inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png)\n\n> **Note:** in case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority.\n\n## Syntax\n\n```css\n/* Specify <'width'> */\nflex-basis: 10em;\nflex-basis: 3px;\nflex-basis: auto;\n\n/* Intrinsic sizing keywords */\nflex-basis: fill;\nflex-basis: max-content;\nflex-basis: min-content;\nflex-basis: fit-content;\n\n/* Automatically size based on the flex item's content */\nflex-basis: content;\n\n/* Global values */\nflex-basis: inherit;\nflex-basis: initial;\nflex-basis: revert;\nflex-basis: revert-layer;\nflex-basis: unset;\n```\n\nThe `flex-basis` property is specified as either the keyword `content` or a `<'width'>`.\n\n### Values\n\n- `<'width'>`\n - : An absolute {{cssxref(\"<length>\")}}, a {{cssxref(\"<percentage>\")}} of the parent flex container's main size property, or the keyword `auto`. Negative values are invalid. Defaults to `auto`.\n- `content`\n\n - : Indicates automatic sizing, based on the flex item's content.\n\n > **Note:** This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using `auto` together with a main size ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) or [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) of `auto`.\n >\n > - Originally, `flex-basis:auto` meant \"look at my `width` or `height` property\".\n > - Then, `flex-basis:auto` was changed to mean automatic sizing, and \"main-size\" was introduced as the \"look at my `width` or `height` property\" keyword. It was implemented in {{bug(\"1032922\")}}.\n > - Then, that change was reverted in {{bug(\"1093316\")}}, so `auto` once again means \"look at my `width` or `height` property\"; and a new `content` keyword is being introduced to trigger automatic sizing. ({{bug(\"1105111\")}} covers adding that keyword).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting flex item initial sizes\n\n#### HTML\n\n```html\n
      \n
    • 1: flex-basis test
      • \n
    • 2: flex-basis test
      • \n
    • 3: flex-basis test
      • \n
    • 4: flex-basis test
      • \n
    • 5: flex-basis test
      • \n
    \n\n
      \n
    • 6: flex-basis test
      • \n
    \n```\n\n#### CSS\n\n```css\n.container {\n font-family: arial, sans-serif;\n margin: 0;\n padding: 0;\n list-style-type: none;\n display: flex;\n flex-wrap: wrap;\n}\n\n.flex {\n background: #6AB6D8;\n padding: 10px;\n margin-bottom: 50px;\n border: 3px solid #2E86BB;\n color: white;\n font-size: 14px;\n text-align: center;\n position: relative;\n}\n\n.flex:after {\n position: absolute;\n z-index: 1;\n left: 0;\n top: 100%;\n margin-top: 10px;\n width: 100%;\n color: #333;\n font-size: 12px;\n}\n\n.flex1 {\n flex-basis: auto;\n}\n\n.flex1:after {\n content: 'auto';\n}\n\n.flex2 {\n flex-basis: max-content;\n}\n\n.flex2:after {\n content: 'max-content';\n}\n\n.flex3 {\n flex-basis: min-content;\n}\n\n.flex3:after {\n content: 'min-content';\n}\n\n.flex4 {\n flex-basis: fit-content;\n}\n\n.flex4:after {\n content: 'fit-content';\n}\n\n.flex5 {\n flex-basis: content;\n}\n\n.flex5:after {\n content: 'content';\n}\n\n.flex6 {\n flex-basis: fill;\n}\n\n.flex6:after {\n content: 'fill';\n}\n```\n\n#### Results\n\n{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_\n- {{cssxref(\"width\")}}\n" }, { "property": "font-size", "document": "---\ntitle: font-size\nslug: Web/CSS/font-size\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-size\n---\n{{CSSRef}}\n\nThe **`font-size`** [CSS](/en-US/docs/Web/CSS) property sets the size of the font. Changing the font size also updates the sizes of the font size-relative {{cssxref(\"<length>\")}} units, such as `em`, `ex`, and so forth.\n\n{{EmbedInteractiveExample(\"pages/css/font-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\nfont-size: xx-small;\nfont-size: x-small;\nfont-size: small;\nfont-size: medium;\nfont-size: large;\nfont-size: x-large;\nfont-size: xx-large;\nfont-size: xxx-large;\n\n/* values */\nfont-size: smaller;\nfont-size: larger;\n\n/* values */\nfont-size: 12px;\nfont-size: 0.8em;\n\n/* values */\nfont-size: 80%;\n\n/* Global values */\nfont-size: inherit;\nfont-size: initial;\nfont-size: revert;\nfont-size: revert-layer;\nfont-size: unset;\n```\n\nThe `font-size` property is specified in one of the following ways:\n\n- As one of the absolute-size or relative-size keywords\n- As a `` or a ``, relative to the element's font size.\n\n### Values\n\n- `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `xxx-large`\n - : Absolute-size keywords, based on the user's default font size (which is `medium`).\n- `larger`, `smaller`\n - : Relative-size keywords. The font will be larger or smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.\n- {{cssxref(\"<length>\")}}\n\n - : A positive {{cssxref(\"<length>\")}} value. For most font-relative units (such as `em` and `ex`), the font size is relative to the parent element's font size.\n\n For font-relative units that are root-based (such as `rem`), the font size is relative to the size of the font used by the {{HTMLElement(\"html\")}} (root) element.\n\n- {{cssxref(\"<percentage>\")}}\n - : A positive {{cssxref(\"<percentage>\")}} value, relative to the parent element's font size.\n\n> **Note:** To maximize accessibility, it is generally best to use values that are relative to the user's default font size.\n\n## Description\n\nThere are several ways to specify the font size, including keywords or numerical values for pixels or ems. Choose the appropriate method based on the needs of the particular web page.\n\n### Keywords\n\nKeywords are a good way to set the size of fonts on the web. By setting a keyword font size on the {{HTMLElement(\"body\")}} element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.\n\n### Pixels\n\nSetting the font size in pixel values (`px`) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.\n\nFont sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element on the page.\n\n> **Note:** Defining font sizes in `px` is _[not accessible](https://en.wikipedia.org/wiki/Web_accessibility)_, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design.\n\n### Ems\n\nUsing an `em` value creates a dynamic or computed font size (historically the `em` unit was derived from the width of a capital \"M\" in a given typeface.). The numeric value acts as a multiplier of the `font-size` property of the element on which it is used. Consider this example:\n\n```css\np {\n font-size: 2em;\n}\n```\n\nIn this case, the font size of `

    ` elements will be double the computed `font-size` inherited by `

    ` elements. By extension, a `font-size` of `1em` equals the computed `font-size` of the element on which it is used.\n\nIf a `font-size` has not been set on any of the `

    `'s ancestors, then `1em` will equal the default browser `font-size`, which is usually `16px`. So, by default `1em` is equivalent to `16px`, and `2em` is equivalent to `32px`. If you were to set a `font-size` of 20px on the `` element say, then `1em` on the `

    ` elements would instead be equivalent to `20px`, and `2em` would be equivalent to `40px`.\n\nIn order to calculate the `em` equivalent for any pixel value required, you can use this formula:\n\n```plain\nem = desired element pixel value / parent element font-size in pixels\n```\n\nFor example, suppose the `font-size` of the `` of the page is set to `16px`. If the font-size you want is `12px`, then you should specify `0.75em` (because 12/16 = 0.75). Similarly, if you want a font size of `10px`, then specify `0.625em` (10/16 = 0.625); for `22px`, specify `1.375em` (22/16).\n\nThe `em` is a very useful unit in CSS since it automatically adapts its length relative to the font that the reader chooses to use.\n\nOne important fact to keep in mind: em values compound. Take the following HTML and CSS:\n\n```css\nhtml {\n font-size: 62.5%; /* font-size 1em = 10px on default browser settings */\n}\nspan {\n font-size: 1.6em;\n}\n```\n\n```html\n

    \nOuter inner outer\n
    \n```\n\nThe result is:\n\n{{EmbedLiveSample(\"Ems\", 400, 40)}}\n\nAssuming that the browser's default `font-size` is 16px, the words \"outer\" would be rendered at 16px, but the word \"inner\" would be rendered at 25.6px. This is because the inner {{HTMLElement(\"span\")}}'s `font-size` is 1.6em which is relative to its parent's `font-size`, which is in turn relative to its parent's `font-size`. This is often called **compounding**.\n\n### Rems\n\n`rem` values were invented in order to sidestep the compounding problem. `rem` values are relative to the root `html` element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.\n\nThe CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to `rem`.\n\n```css\nhtml {\n font-size: 62.5%; /* font-size 1em = 10px on default browser settings */\n}\nspan {\n font-size: 1.6rem;\n}\n```\n\nThen we apply this CSS to the same HTML, which looks like this:\n\n```html\nOuter inner outer\n```\n\n{{EmbedLiveSample(\"Rems\", 400, 40)}}\n\nIn this example, the words \"outer inner outer\" are all displayed at 16px (assuming that the browser's `font-size` has been left at the default value of 16px).\n\n### Ex\n\nLike the `em` unit, an element's `font-size` set using the `ex` unit is computed or dynamic. It behaves in exactly the same way, except that when setting the `font-size` property using `ex` units, the `font-size` equals the x-height of the [first available font](https://www.w3.org/TR/css-fonts-3/#first-available-font) used on the page. The number value multiplies the element's inherited `font-size` and the `font-size` compounds relatively.\n\nSee the W3C Editor's Draft for a more detailed description of [font-relative length units](https://drafts.csswg.org/css-values-4/#font-relative-length) such as `ex`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting font sizes\n\n#### CSS\n\n```css\n.small {\n font-size: xx-small;\n}\n.larger {\n font-size: larger;\n}\n.point {\n font-size: 24pt;\n}\n.percent {\n font-size: 200%;\n}\n```\n\n#### HTML\n\n```html\n

    Small H1

    \n

    Larger H1

    \n

    24 point H1

    \n

    200% H1

    \n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_font_sizes','600','200')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-size-adjust\")}}\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-weight\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "font-smooth", "document": "---\ntitle: font-smooth\nslug: Web/CSS/font-smooth\ntags:\n - CSS\n - CSS Property\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-smooth\n---\n{{ CSSRef }} {{ Non-standard_header }}\n\nThe **`font-smooth`** [CSS](/en-US/docs/Web/CSS) property controls the application of anti-aliasing when fonts are rendered.\n\n## Syntax\n\n```css\n/* Keyword values */\nfont-smooth: auto;\nfont-smooth: never;\nfont-smooth: always;\n\n/* value */\nfont-smooth: 2em;\n\n/* Global values */\nfont-smooth: inherit;\nfont-smooth: initial;\nfont-smooth: revert;\nfont-smooth: revert-layer;\nfont-smooth: unset;\n```\n\n> **Note:** WebKit implements a similar property, but with different values: **`-webkit-font-smoothing`**. It only works on macOS.\n>\n> - `auto` - Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)\n> - `none` - Turn font smoothing off; display text with jagged sharp edges.\n> - `antialiased` - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.\n> - `subpixel-antialiased` - On most non-retina displays, this will give the sharpest text.\n\n> **Note:** Firefox implements a similar property, but with different values: **`-moz-osx-font-smoothing`**. It only works on macOS.\n>\n> - `auto` - Allow the browser to select an optimization for font smoothing, typically `grayscale`.\n> - `grayscale` - Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage example\n\nThe following example shows the Safari/Chromium and Firefox equivalents that turn on font-smoothing on macOS. In both cases the smoothed font should look slightly lighter in weight.\n\nFor those of you not on a macOS system, here is a screenshot (the live version appears later on):\n\n![](smoothing.png)\n\n#### HTML\n\n```html\n

    Without font smoothing

    \n\n

    With font smoothing

    \n```\n\n#### CSS\n\n```css\nhtml {\n background-color: black;\n color: white;\n font-size: 3rem;\n}\n\np {\n text-align: center;\n}\n\n.smoothed {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_usage_example', '100%', 260)}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Please Stop \"Fixing\" Font Smoothing – UsabilityPost](https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/)\n- [Laissez-faire font smoothing and anti-aliasing](https://www.zachleat.com/web/font-smooth/)\n" }, { "property": "font-stretch", "document": "---\ntitle: font-stretch\nslug: Web/CSS/font-stretch\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-stretch\n---\n{{CSSRef}}\n\nThe **`font-stretch`** [CSS](/en-US/docs/Web/CSS) property selects a normal, condensed, or expanded face from a font.\n\n{{EmbedInteractiveExample(\"pages/css/font-stretch.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nfont-stretch: ultra-condensed;\nfont-stretch: extra-condensed;\nfont-stretch: condensed;\nfont-stretch: semi-condensed;\nfont-stretch: normal;\nfont-stretch: semi-expanded;\nfont-stretch: expanded;\nfont-stretch: extra-expanded;\nfont-stretch: ultra-expanded;\n\n/* Percentage values */\nfont-stretch: 50%;\nfont-stretch: 100%;\nfont-stretch: 200%;\n\n/* Global values */\nfont-stretch: inherit;\nfont-stretch: initial;\nfont-stretch: revert;\nfont-stretch: revert-layer;\nfont-stretch: unset;\n```\n\nThis property may be specified as a single keyword value or a single {{cssxref(\"<percentage>\")}} value.\n\n### Values\n\n- `normal`\n - : Specifies a normal font face.\n- `semi-condensed`, `condensed`, `extra-condensed`, `ultra-condensed`\n - : Specifies a more condensed font face than normal, with `ultra-condensed` as the most condensed.\n- `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`\n - : Specifies a more expanded font face than normal, with `ultra-expanded` as the most expanded.\n- ``\n\n - : A {{cssxref(\"<percentage>\")}} value between 50% and 200% (inclusive). Negative values are not allowed for this property.\n\n > **Note:** In earlier versions of the `font-stretch` specification, the property accepts only the nine keyword values.\n >\n > **The {{ SpecName('CSS4 Fonts', '#propdef-font-stretch') }} spec** extends the syntax to accept a `` value as well. This enables variable fonts to offer something more like a _continuum_ of character widths. For TrueType or OpenType variable fonts, the \"`wdth`\" variation is used to implement varying widths.\n >\n > However, note that the `` syntax is not yet supported by all browsers: check the [Browser compatibility](#browser_compatibility) table for details.\n\n### Keyword to numeric mapping\n\nThe table below shows the mapping between keyword values and numeric percentages:\n\n| Keyword | Percentage |\n| ----------------- | ---------- |\n| `ultra-condensed` | 50% |\n| `extra-condensed` | 62.5% |\n| `condensed` | 75% |\n| `semi-condensed` | 87.5% |\n| `normal` | 100% |\n| `semi-expanded` | 112.5% |\n| `expanded` | 125% |\n| `extra-expanded` | 150% |\n| `ultra-expanded` | 200% |\n\n## Description\n\nSome font families offer additional faces in which the characters are narrower than the normal face (_condensed_ faces) or wider than the normal face (_expanded_ faces).\n\nYou can use `font-stretch` to select a condensed or expanded face from such fonts. If the font you are using does not offer condensed or expanded faces, this property has no effect.\n\n### Font face selection\n\nThe face selected for a given value of `font-stretch` depends on the faces supported by the font in question. If the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face.\n\nThe table below demonstrates the effect of supplying various different percentage values of `font-stretch` on two different fonts:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    50%62.5%75%87.5%100%112.5%125%150%200%
    Helvetica Neue\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"
    League Mono Variable\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"\"
    \n\n- **Helvetica Neue**, which is installed by default on macOS, has a single condensed face in addition to the normal face. All values of `font-stretch` less than 100% select the condensed face, while all other values select the normal face.\n- **[League Mono Variable](https://demos.tyfromtheinternet.com/leaguemonovariable/)** is a variable font that offers something like a continuous range of widths for different percentage values of `font-stretch`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting font stretch percentages\n\n{{EmbedGHLiveSample(\"css-examples/variable-fonts/font-stretch.html\", '100%', 950)}}\n\n## Specifications\n\n{{Specifications}}\n\n> **Note:** The `font-stretch` property was initially defined in CSS 2, but dropped in CSS 2.1 due to the lack of browser implementation. It was brought back in CSS 3.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-weight\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "flex", "document": "---\ntitle: flex\nslug: Web/CSS/flex\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.flex\n---\n{{CSSRef}}\n\nThe **`flex`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\n{{EmbedInteractiveExample(\"pages/css/flex.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"flex-grow\")}}\n- {{cssxref(\"flex-shrink\")}}\n- {{cssxref(\"flex-basis\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nflex: auto;\nflex: initial;\nflex: none;\n\n/* One value, unitless number: flex-grow\nflex-basis is then equal to 0. */\nflex: 2;\n\n/* One value, width/height: flex-basis */\nflex: 10em;\nflex: 30%;\nflex: min-content;\n\n/* Two values: flex-grow | flex-basis */\nflex: 1 30px;\n\n/* Two values: flex-grow | flex-shrink */\nflex: 2 2;\n\n/* Three values: flex-grow | flex-shrink | flex-basis */\nflex: 2 2 10%;\n\n/* Global values */\nflex: inherit;\nflex: initial;\nflex: revert;\nflex: revert-layer;\nflex: unset;\n```\n\nThe `flex` property may be specified using one, two, or three values.\n\n- **One-value syntax:** the value must be one of:\n\n - a ``: In this case it is interpreted as `flex: 1 0`; the {{cssxref(\"flex-shrink\")}} value is assumed to be `1` and the {{cssxref(\"flex-basis\")}} value is assumed to be `0`.\n - a ``: In this case it is interpreted as `flex: 1 1 `; the {{cssxref(\"flex-grow\")}} value is assumed to be `1` and the {{cssxref(\"flex-shrink\")}} value is assumed to be `1`.\n - one of the keywords: `none`, `auto`, or `initial`.\n\n- **Two-value syntax:**\n\n - The first value must be:\n\n - a {{cssxref(\"<number>\")}} and it is interpreted as ``.\n\n - The second value must be one of:\n\n - a {{cssxref(\"<number>\")}}: then it is interpreted as ``.\n - a valid value for {{cssxref(\"width\")}}: then it is interpreted as ``.\n\n- **Three-value syntax:** the values must be in the following order:\n\n 1. a {{cssxref(\"<number>\")}} for ``.\n 2. a {{cssxref(\"<number>\")}} for ``.\n 3. a valid value for {{cssxref(\"width\")}} for ``.\n\n### Values\n\n- `initial`\n - : The item is sized according to its `width` and `height` properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting \"`flex: 0 1 auto`\".\n- `auto`\n - : The item is sized according to its `width` and `height` properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting \"`flex: 1 1 auto`\".\n- `none`\n - : The item is sized according to its `width` and `height` properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting \"`flex: 0 0 auto`\".\n- `<'flex-grow'>`\n - : Defines the {{cssxref(\"flex-grow\")}} of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `0`)\n- `<'flex-shrink'>`\n - : Defines the {{cssxref(\"flex-shrink\")}} of the flex item. Negative values are considered invalid. Defaults to `1` when omitted. (initial is `1`)\n- `<'flex-basis'>`\n - : Defines the {{cssxref(\"flex-basis\")}} of the flex item. A preferred size of `0` must have a unit to avoid being interpreted as a flexibility. Defaults to `0` when omitted. (initial is `auto`)\n\n## Description\n\nFor most purposes, authors should set `flex` to one of the following values: `auto`, `initial`, `none`, or a positive unitless number. To see the effect of these values, try resizing the flex containers below:\n\n```html hidden\n
    \n
    auto
    \n
    auto
    \n
    auto
    \n
    \n\n
    \n
    auto
    \n
    initial
    \n
    initial
    \n
    \n\n
    \n
    auto
    \n
    auto
    \n
    none
    \n
    \n\n
    \n
    initial
    \n
    none
    \n
    none
    \n
    \n\n
    \n
    4
    \n
    2
    \n
    1
    \n
    \n```\n\n```css hidden\n* {\n box-sizing: border-box;\n}\n\n.flex-container {\n background-color: #F4F7F8;\n resize: horizontal;\n overflow: hidden;\n display: flex;\n margin: 1em;\n}\n\n.item {\n margin: 1em;\n padding: 0.5em;\n width: 110px;\n min-width: 0;\n background-color: #1B5385;\n color: white;\n font-family: monospace;\n font-size: 13px;\n}\n\n.initial {\n flex: initial;\n}\n\n.auto {\n flex: auto;\n}\n\n.none {\n flex: none;\n}\n\n.four {\n flex: 4;\n}\n\n.two {\n flex: 2;\n}\n\n.one {\n flex: 1;\n}\n```\n\n{{EmbedLiveSample(\"Description\", 1200, 400, \"\", \"\", \"example-outcome-frame\")}}\n\nBy default flex items don't shrink below their minimum content size. To change this, set the item's {{cssxref(\"min-width\")}} or {{cssxref(\"min-height\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting flex: auto\n\n#### HTML\n\n```html\n
    \n
    Flex box (click to toggle raw box)
    \n
    Raw box
    \n
    \n```\n\n#### CSS\n\n```css\n#flex-container {\n display: flex;\n flex-direction: row;\n}\n\n#flex-container > .flex-item {\n flex: auto;\n}\n\n#flex-container > .raw-item {\n width: 5rem;\n}\n```\n\n```js hidden\nvar flex = document.getElementById(\"flex\");\nvar raw = document.getElementById(\"raw\");\nflex.addEventListener(\"click\", function() {\n raw.style.display = raw.style.display == \"none\" ? \"block\" : \"none\";\n});\n```\n\n```css hidden\n#flex-container {\n width: 100%;\n font-family: Consolas, Arial, sans-serif;\n}\n\n#flex-container > div {\n border: 1px solid #f00;\n padding: 1rem;\n}\n\n#flex-container > .raw-item {\n border: 1px solid #000;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_flex_auto','100%','100')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_\n" }, { "property": "font-variant-caps", "document": "---\ntitle: font-variant-caps\nslug: Web/CSS/font-variant-caps\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-caps\n---\n{{CSSRef}}\n\nThe **`font-variant-caps`** [CSS](/en-US/docs/Web/CSS) property controls the use of alternate glyphs for capital letters.\n\n{{EmbedInteractiveExample(\"pages/css/font-variant-caps.html\")}}\n\nWhen a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. If petite capital glyphs are not available, they are rendered using small capital glyphs. If these are not present, the browser synthesizes them from the uppercase glyphs.\n\nFonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. However, small capital glyphs are never synthesized for caseless characters.\n\n### Language-specific rules\n\nThis property accounts for language-specific case mapping rules. For example:\n\n- In Turkic languages, such as Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of `i` (one with the dot, one without) and two case pairings: `i`/`İ` and `ı`/`I`.\n- In German (de), the `ß` may become `ẞ` (U+1E9E) in uppercase.\n- In Greek (el), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diacritic on the second vowel (`άι`/`ΑΪ`).\n\n## Syntax\n\n```css\n/* Keyword values */\nfont-variant-caps: normal;\nfont-variant-caps: small-caps;\nfont-variant-caps: all-small-caps;\nfont-variant-caps: petite-caps;\nfont-variant-caps: all-petite-caps;\nfont-variant-caps: unicase;\nfont-variant-caps: titling-caps;\n\n/* Global values */\nfont-variant-caps: inherit;\nfont-variant-caps: initial;\nfont-variant-caps: revert;\nfont-variant-caps: revert-layer;\nfont-variant-caps: unset;\n```\n\nThe `font-variant-caps` property is specified using a single keyword value from the list below. In each case, if the font doesn't support the OpenType value, then it synthesizes the glyphs.\n\n### Values\n\n- `normal`\n - : Deactivates of the use of alternate glyphs.\n- `small-caps`\n - : Enables display of small capitals (OpenType feature: `smcp`). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.\n- `all-small-caps`\n - : Enables display of small capitals for both upper and lowercase letters (OpenType features: `c2sc`, `smcp`).\n- `petite-caps`\n - : Enables display of petite capitals (OpenType feature: `pcap`).\n- `all-petite-caps`\n - : Enables display of petite capitals for both upper and lowercase letters (OpenType features: `c2pc`, `pcap`).\n- `unicase`\n - : Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: `unic`).\n- `titling-caps`\n - : Enables display of titling capitals (OpenType feature: `titl`). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.\n\n## Accessibility concerns\n\nLarge sections of text set with a `font-variant` value of `all-small-caps` or `all-petite-caps` may be difficult for people with cognitive concerns such as Dyslexia to read.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting the small-caps font variant\n\n#### HTML\n\n```html\n

    Firefox rocks, small caps!

    \n

    Firefox rocks, normal caps!

    \n```\n\n#### CSS\n\n```css\n.small-caps {\n font-variant-caps: small-caps;\n font-style: italic;\n}\n.normal {\n font-variant-caps: normal;\n font-style: italic;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_the_small-caps_font_variant') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n" }, { "property": "font-variant-alternates", "document": "---\ntitle: font-variant-alternates\nslug: Web/CSS/font-variant-alternates\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-alternates\n---\n{{CSSRef}}\n\nThe **`font-variant-alternates`** CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in {{cssxref(\"@font-feature-values\")}}.\n\n```css\n/* Keyword values */\nfont-variant-alternates: normal;\nfont-variant-alternates: historical-forms;\n\n/* Functional notation values */\nfont-variant-alternates: stylistic(user-defined-ident);\nfont-variant-alternates: styleset(user-defined-ident);\nfont-variant-alternates: character-variant(user-defined-ident);\nfont-variant-alternates: swash(user-defined-ident);\nfont-variant-alternates: ornaments(user-defined-ident);\nfont-variant-alternates: annotation(user-defined-ident);\nfont-variant-alternates: swash(ident1) annotation(ident2);\n\n/* Global values */\nfont-variant-alternates: inherit;\nfont-variant-alternates: initial;\nfont-variant-alternates: revert;\nfont-variant-alternates: revert-layer;\nfont-variant-alternates: unset;\n```\n\nThe {{cssxref(\"@font-feature-values\")}} at-rule can define names for alternative glyph functions (`stylistic`, `styleset`, `character-variant`, `swash`, `ornament` or `annotation`), associating the name with OpenType parameters. This property allows those human-readable names (defined in {{cssxref(\"@font-feature-values\")}}) in the stylesheet.\n\n## Syntax\n\nThis property may take one of two forms:\n\n- either the keyword `normal`\n- or one or more of the other keywords and functions listed below, space-separated, in any order.\n\n### Values\n\n- `normal`\n - : This keyword deactivates alternate glyphs.\n- `historical-forms`\n - : This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value `hist`.\n- `stylistic()`\n - : This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `salt`, like `salt 2`.\n- `styleset()`\n - : This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ssXY`, like `ss02`.\n- `character-variant()`\n - : This function enables specific stylistic alternatives for characters. It is similar to `styleset()`, but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `cvXY`, like `cv02`.\n- `swash()`\n - : This function enables [swash](https://en.wikipedia.org/wiki/Swash_%28typography%29) glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values `swsh` and `cswh`, like `swsh 2` and `cswh 2`.\n- `ornaments()`\n\n - : This function enables ornaments, like [fleurons](https://en.wikipedia.org/wiki/Fleuron_%28typography%29) and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `ornm`, like `ornm 2`.\n\n > **Note:** In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.\n\n- `annotation()`\n - : This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value `nalt`, like `nalt 2`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

    Firefox rocks!

    \n

    Firefox rocks!

    \n```\n\n### CSS\n\n```css\n@font-feature-values \"Leitura Display Swashes\" {\n @swash { fancy: 1 }\n}\n\np {\n font-size: 1.5rem;\n}\n\n.variant {\n font-family: Leitura Display Swashes;\n font-variant-alternates: swash(fancy);\n}\n```\n\n### Result\n\n> **Note:** You need to install the OpenType font _Leitura Display Swashes_ for this example to work. You can find a few free versions for testing purposes, for example from [fontsgeek.com](https://fontsgeek.com/fonts/Leitura-Display-Swashes).\n\n{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n- {{cssxref(\"@font-feature-values\")}}\n" }, { "property": "font-variant-east-asian", "document": "---\ntitle: font-variant-east-asian\nslug: Web/CSS/font-variant-east-asian\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - NeedsLiveSample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-east-asian\n---\n{{CSSRef}}\n\nThe **`font-variant-east-asian`** CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.\n\n```css\nfont-variant-east-asian: normal;\nfont-variant-east-asian: ruby;\nfont-variant-east-asian: jis78; /* */\nfont-variant-east-asian: jis83; /* */\nfont-variant-east-asian: jis90; /* */\nfont-variant-east-asian: jis04; /* */\nfont-variant-east-asian: simplified; /* */\nfont-variant-east-asian: traditional; /* */\nfont-variant-east-asian: full-width; /* */\nfont-variant-east-asian: proportional-width; /* */\nfont-variant-east-asian: ruby full-width jis83;\n\n/* Global values */\nfont-variant-east-asian: inherit;\nfont-variant-east-asian: initial;\nfont-variant-east-asian: revert;\nfont-variant-east-asian: revert-layer;\nfont-variant-east-asian: unset;\n```\n\n## Syntax\n\n### Values\n\n- `normal`\n - : This keyword leads to the deactivation of the use of such alternate glyphs.\n- `ruby`\n - : This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values `ruby`.\n- ``\n\n - : These values specify a set of logographic glyph variants which should be used for display. Possible values are:\n\n | Keyword | Standard defining the glyphs | OpenType equivalent |\n | ------------- | --------------------------------------------------------------------------- | ------------------- |\n | `jis78` | [JIS X 0208:1978](https://en.wikipedia.org/wiki/JIS_X_0208#First_standard) | `jp78` |\n | `jis83` | [JIS X 0208:1983](https://en.wikipedia.org/wiki/JIS_X_0208#Second_standard) | `jp83` |\n | `jis90` | [JIS X 0208:1990](https://en.wikipedia.org/wiki/JIS_X_0208#Third_standard) | `jp90` |\n | `jis04` | [JIS X 0213:2004](https://en.wikipedia.org/wiki/JIS_X_0213) | `jp04` |\n | `simplified` | None, use the simplified Chinese glyphs | `smpl` |\n | `traditional` | None, use the traditional Chinese glyphs | `trad` |\n\n- ``\n\n - : These values control the sizing of figures used for East Asian characters. Two values are possible:\n\n - `proportional-width` activating the set of East Asian characters which vary in width. It corresponds to the OpenType values `pwid`.\n - `full-width` activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values `fwid`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting East Asian glyph variants\n\nThis example require font \"Yu Gothic\" installed in your OS, other fonts may not support OpenType features.\n\n#### HTML\n\n```html\n\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n
    normal/jis78:麹町麹町
    normal/ruby:しんかんせんしんかんせん
    normal/traditional:大学大学
    \n```\n\n#### CSS\n\n```css\ntd{\n font-family:\"Yu Gothic\";\n font-size:20px;\n}\nth{\n color:grey;\n padding-right:10px;\n}\n\n.ruby {\n font-variant-east-asian: ruby;\n}\n\n.jis78 {\n font-variant-east-asian: jis78;\n}\n\n.traditional{\n font-variant-east-asian: traditional;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n" }, { "property": "font-variant-numeric", "document": "---\ntitle: font-variant-numeric\nslug: Web/CSS/font-variant-numeric\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-numeric\n---\n{{CSSRef}}\n\nThe **`font-variant-numeric`** CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.\n\n{{EmbedInteractiveExample(\"pages/css/font-variant-numeric.html\")}}\n\n## Syntax\n\n```css\nfont-variant-numeric: normal;\nfont-variant-numeric: ordinal;\nfont-variant-numeric: slashed-zero;\nfont-variant-numeric: lining-nums; /* */\nfont-variant-numeric: oldstyle-nums; /* */\nfont-variant-numeric: proportional-nums; /* */\nfont-variant-numeric: tabular-nums; /* */\nfont-variant-numeric: diagonal-fractions; /* */\nfont-variant-numeric: stacked-fractions; /* */\nfont-variant-numeric: oldstyle-nums stacked-fractions;\n\n/* Global values */\nfont-variant-numeric: inherit;\nfont-variant-numeric: initial;\nfont-variant-numeric: revert;\nfont-variant-numeric: revert-layer;\nfont-variant-numeric: unset;\n```\n\nThis property can take one of two forms:\n\n- either the keyword value `normal`\n- or one or more of the other values listed below, space-separated, in any order.\n\n### Values\n\n- `normal`\n - : This keyword leads to the deactivation of the use of such alternate glyphs.\n- `ordinal`\n - : This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values `ordn`.\n- `slashed-zero`\n - : This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values `zero`.\n- _\\\n\n - : These values control the figures used for numbers. Two values are possible:\n\n - `lining-nums` activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values `lnum`.\n - `oldstyle-nums` activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values `onum`.\n\n- _\\\n\n - : These values controls the sizing of figures used for numbers. Two values are possible:\n\n - `proportional-nums` activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values `pnum`.\n - `tabular-nums` activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType values `tnum`.\n\n- _\\\n\n - : These values controls the glyphs used to display fractions. Two values are possible:\n\n - `diagonal-fractions` activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType values `frac`.\n - `stacked-fractions` activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType values `afrc`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting ordinal numeric forms\n\n{{EmbedGHLiveSample(\"css-examples/font-features/font-variant-numeric-example.html\", '100%', 600)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant\")}}\n" }, { "property": "font-variant", "document": "---\ntitle: font-variant\nslug: Web/CSS/font-variant\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.font-variant\n---\n{{CSSRef}}\n\nThe **`font-variant`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) allows you to set all the font variants for a font.\n\nYou can also set the CSS Level 2 (Revision 1) values of `font-variant`, (that is, `normal` or `small-caps`), by using the {{cssxref(\"font\")}} shorthand.\n\n{{EmbedInteractiveExample(\"pages/css/font-variant.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n\n## Syntax\n\n```css\nfont-variant: small-caps;\nfont-variant: common-ligatures small-caps;\n\n/* Global values */\nfont-variant: inherit;\nfont-variant: initial;\nfont-variant: revert;\nfont-variant: revert-layer;\nfont-variant: unset;\n```\n\n### Values\n\n- `normal`\n - : Specifies a normal font face; each of the longhand properties has an initial value of normal. Longhand properties of `font-variant` are: {{cssxref(\"font-variant-caps\")}}, {{cssxref(\"font-variant-numeric\")}}, {{cssxref(\"font-variant-alternates\")}}, {{cssxref(\"font-variant-ligatures\")}}, and {{cssxref(\"font-variant-east-asian\")}}.\n- `none`\n - : Sets the value of the {{cssxref(\"font-variant-ligatures\")}} to `none` and the values of the other longhand property as `normal`, their initial value.\n- ``, ``, ``, ``\n - : Specifies the keywords related to the {{cssxref(\"font-variant-ligatures\")}} longhand property. The possible values are: `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual`, and `no-contextual`.\n- `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`\n - : Specifies the keywords and functions related to the {{cssxref(\"font-variant-alternates\")}} longhand property.\n- `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`\n - : Specifies the keywords and functions related to the {{cssxref(\"font-variant-caps\")}} longhand property.\n- ``, ``, ``, `ordinal`, `slashed-zero`\n - : Specifies the keywords related to the {{cssxref(\"font-variant-numeric\")}} longhand property. The possible values are: `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, and `slashed-zero`.\n- ``, ``, `ruby`\n - : Specifies the keywords related to the {{cssxref(\"font-variant-east-asian\")}} longhand property. The possible values are: `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting the small-caps font variant\n\n#### HTML\n\n```html\n

    Firefox rocks!

    \n

    Firefox rocks!

    \n```\n\n#### CSS\n\n```css\np.normal {\n font-variant: normal;\n}\np.small {\n font-variant: small-caps;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_the_small-caps_font_variant', '', '', '', 'Web/CSS/font-variant') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"text-transform\")}}\n- {{cssxref(\"text-combine-upright\")}}\n- {{cssxref(\"text-orientation\")}}\n" }, { "property": "font-variation-settings", "document": "---\ntitle: font-variation-settings\nslug: Web/CSS/font-variation-settings\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variation-settings\n---\n{{CSSRef}}\n\nThe **`font-variation-settings`** CSS property provides low-level control over [variable font](/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide) characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.\n\n{{EmbedInteractiveExample(\"pages/css/font-variation-settings.html\")}}\n\n## Syntax\n\n```css\n/* Use the default settings */\nfont-variation-settings: normal;\n\n/* Set values for variable font axis names */\nfont-variation-settings: \"XHGT\" 0.7;\n\n/* Global values */\nfont-variation-settings: inherit;\nfont-variation-settings: initial;\nfont-variation-settings: revert;\nfont-variation-settings: revert-layer;\nfont-variation-settings: unset;\n```\n\n### Values\n\nThis property's value can take one of two forms:\n\n- `normal`\n - : Text is laid out using default settings.\n- ` `\n - : When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a {{cssxref(\"<string>\")}} of 4 ASCII characters followed by a {{cssxref(\"number\")}} indicating the axis value to set. If the `` has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The `` can be fractional or negative, depending on the value range available in your font, as defined by the font designer.\n\n## Description\n\nThis property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. {{cssxref(\"font-weight\")}}, {{cssxref(\"font-style\")}}).\n\nFont characteristics set using `font-variation-settings` will always override those set using the corresponding basic font properties, e.g. `font-weight`, no matter where they appear in the cascade. In some browsers, this is currently only true when the `@font-face` declaration includes a `font-weight` range.\n\n### Registered and custom axes\n\nVariable font axes come in two types: **registered** and **custom**.\n\nRegistered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.\n\nHere are the registered axes along with their corresponding CSS properties:\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Axis TagCSS Property
    \"wght\"{{cssxref(\"font-weight\")}}
    \"wdth\"{{cssxref(\"font-stretch\")}}
    \"slnt\" (slant){{cssxref(\"font-style\")}}: oblique + angle
    \"ital\"{{cssxref(\"font-style\")}}: italic
    \"opsz\"

    {{cssxref(\"font-optical-sizing\")}}

    \n\nCustom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.\n\n> **Note:** Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced to follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.\n\nTo use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS before 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\nYou can find a number of other variable fonts examples at our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide), [v-fonts.com](https://v-fonts.com/), and [axis-praxis.org](https://www.axis-praxis.org/).\n\n### Weight (wght)\n\nThe following live example's CSS can be edited to allow you to play with font weight values.\n\n{{EmbedGHLiveSample(\"css-examples/variable-fonts/weight.html\", '100%', 520)}}\n\n### Slant (slnt)\n\nThe following live example's CSS can be edited to allow you to play with font slant/oblique values.\n\n{{EmbedGHLiveSample(\"css-examples/variable-fonts/slant.html\", '100%', 520)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Variable fonts guide](/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)\n- [OpenType Font Variations Overview](https://docs.microsoft.com/typography/opentype/spec/otvaroverview)\n- [OpenType Design-Variation Axis Tag Registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg)\n" }, { "property": "font-weight", "document": "---\ntitle: font-weight\nslug: Web/CSS/font-weight\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-weight\n---\n{{CSSRef}}\n\nThe **`font-weight`** [CSS](/en-US/docs/Web/CSS) property sets the weight (or boldness) of the font. The weights available depend on the {{cssxref(\"font-family\")}} that is currently set.\n\n{{EmbedInteractiveExample(\"pages/css/font-weight.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nfont-weight: normal;\nfont-weight: bold;\n\n/* Keyword values relative to the parent */\nfont-weight: lighter;\nfont-weight: bolder;\n\n/* Numeric keyword values */\nfont-weight: 100;\nfont-weight: 200;\nfont-weight: 300;\nfont-weight: 400;// normal\nfont-weight: 500;\nfont-weight: 600;\nfont-weight: 700;// bold\nfont-weight: 800;\nfont-weight: 900;\n\n/* Global values */\nfont-weight: inherit;\nfont-weight: initial;\nfont-weight: revert;\nfont-weight: revert-layer;\nfont-weight: unset;\n```\n\nThe `font-weight` property is specified using any one of the values listed below.\n\n### Values\n\n- `normal`\n - : Normal font weight. Same as `400`.\n- `bold`\n - : Bold font weight. Same as `700`.\n- `lighter`\n - : One relative font weight lighter than the parent element. Note that only four font weights are considered for relative weight calculation; see the [Meaning of relative weights](#meaning_of_relative_weights) section below.\n- `bolder`\n - : One relative font weight heavier than the parent element. Note that only four font weights are considered for relative weight calculation; see the [Meaning of relative weights](#meaning_of_relative_weights) section below.\n- ``\n - : A {{cssxref(\"<number>\")}} value between 1 and 1000, inclusive. Higher numbers represent weights that are bolder than (or as bold as) lower numbers. Certain commonly used values correspond to common weight names, as described in the [Common weight name mapping](#common_weight_name_mapping) section below.\n\nIn earlier versions of the `font-weight` specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the [Fallback weights](#fallback_weights) system.\n\nCSS Fonts Level 4 extends the syntax to accept any number between 1 and 1000 and introduces [Variable fonts](#variable_fonts), which can make use of this much finer-grained range of font weights.\n\n### Fallback weights\n\nIf the exact weight given is unavailable, then the following rule is used to determine the weight actually rendered:\n\n- If the target weight given is between `400` and `500` inclusive:\n\n - Look for available weights between the target and `500`, in ascending order.\n - If no match is found, look for available weights less than the target, in descending order.\n - If no match is found, look for available weights greater than `500`, in ascending order.\n\n- If a weight less than `400` is given, look for available weights less than the target, in descending order. If no match is found, look for available weights greater than the target, in ascending order.\n- If a weight greater than `500` is given, look for available weights greater than the target, in ascending order. If no match is found, look for available weights less than the target, in descending order.\n\n### Meaning of relative weights\n\nWhen `lighter` or `bolder` is specified, the below chart shows how the absolute font weight of the element is determined.\n\nNote that when using relative weights, only four font weights are considered — thin (100), normal (400), bold (700), and heavy (900). If a font-family has more weights available, they are ignored for the purposes of relative weight calculation.\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    Inherited valuebolderlighter
    100400100
    200400100
    300400100
    400700100
    500700100
    600900400
    700900400
    800900700
    900900700
    \n\n### Common weight name mapping\n\nThe numerical values `100` to `900` roughly correspond to the following common weight names (see the [OpenType specification](https://docs.microsoft.com/typography/opentype/spec/os2#usweightclass)):\n\n| Value | Common weight name |\n| ----- | --------------------------------------------------------------------------------------------------------------------------------- |\n| 100 | Thin (Hairline) |\n| 200 | Extra Light (Ultra Light) |\n| 300 | Light |\n| 400 | Normal (Regular) |\n| 500 | Medium |\n| 600 | Semi Bold (Demi Bold) |\n| 700 | Bold |\n| 800 | Extra Bold (Ultra Bold) |\n| 900 | Black (Heavy) |\n| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |\n\n### Variable fonts\n\nMost fonts have a particular weight which corresponds to one of the numbers in [Common weight name mapping](#common_weight_name_mapping). However some fonts, called variable fonts, can support a range of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.\n\nFor TrueType or OpenType variable fonts, the \"wght\" variation is used to implement varying widths.\n\n> **Note:** For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-weight` can be any number between `1` and `1000`. The demo loads with `font-weight: 500;`. Change the value to see the weight of the text change.\n\n{{EmbedGHLiveSample(\"css-examples/variable-fonts/font-weight.html\", '100%', 860)}}\n\n## Accessibility concerns\n\nPeople experiencing low vision conditions may have difficulty reading text set with a `font-weight` value of `100` (Thin/Hairline) or `200` (Extra Light), especially if the font has a [low contrast color ratio](/en-US/docs/Web/CSS/color#accessibility_concerns).\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting font weights\n\n#### HTML\n\n```html\n

    \n Alice was beginning to get very tired of sitting by her sister on the\n bank, and of having nothing to do: once or twice she had peeped into the\n book her sister was reading, but it had no pictures or conversations in\n it, \"and what is the use of a book,\" thought Alice \"without pictures or\n conversations?\"\n

    \n\n
    I'm heavy
    \n I'm lighter\n
    \n```\n\n#### CSS\n\n```css\n/* Set paragraph text to be bold. */\np {\n font-weight: bold;\n}\n\n/* Set div text to two steps heavier than\n normal but less than a standard bold. */\ndiv {\n font-weight: 600;\n}\n\n/* Set span text to be one step lighter\n than its parent. */\nspan {\n font-weight: lighter;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_font_weights\",\"400\",\"300\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-family\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "font", "document": "---\ntitle: font\nslug: Web/CSS/font\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.font\n---\n{{CSSRef}}\n\nThe **`font`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.\n\n{{EmbedInteractiveExample(\"pages/css/font.html\")}}\n\nAs with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). Though not directly settable by `font`, the longhands {{cssxref(\"font-size-adjust\")}} and {{cssxref(\"font-kerning\")}} are also reset to their initial values.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"font-family\")}}\n- {{cssxref(\"font-size\")}}\n- {{cssxref(\"font-stretch\")}}\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-variant\")}}\n- {{cssxref(\"font-weight\")}}\n- {{cssxref(\"line-height\")}}\n\n## Syntax\n\nThe `font` property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties.\n\nIf `font` is specified as a system keyword, it must be one of: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`.\n\nIf `font` is specified as a shorthand for several font-related properties, then:\n\n- it must include values for:\n\n - {{cssxref(\"<font-size>\")}}\n - {{cssxref(\"<font-family>\")}}\n\n- it may optionally include values for:\n\n - {{cssxref(\"<font-style>\")}}\n - {{cssxref(\"<font-variant>\")}}\n - {{cssxref(\"<font-weight>\")}}\n - {{cssxref(\"<font-stretch>\")}}\n - {{cssxref(\"<line-height>\")}}\n\n- `font-style`, `font-variant` and `font-weight` must precede `font-size`\n- `font-variant` may only specify the values defined in CSS 2.1, that is `normal` and `small-caps`\n- `font-stretch` may only be a single keyword value.\n- `line-height` must immediately follow `font-size`, preceded by \"/\", like this: \"`16px/3`\"\n- `font-family` must be the last value specified.\n\n### Values\n\n- `<'font-style'>`\n - : See the {{cssxref(\"font-style\")}} CSS property.\n- `<'font-variant'>`\n - : See the {{cssxref(\"font-variant\")}} CSS property.\n- `<'font-weight'>`\n - : See the {{cssxref(\"font-weight\")}} CSS property.\n- `<'font-stretch'>`\n - : See the {{cssxref(\"font-stretch\")}} CSS property.\n- `<'font-size'>`\n - : See the {{cssxref(\"font-size\")}} CSS property.\n- `<'line-height'>`\n - : See the {{cssxref(\"line-height\")}} CSS property.\n- `<'font-family'>`\n - : See the {{cssxref(\"font-family\")}} CSS property.\n\n#### System font values\n\n- `caption`\n - : The system font used for captioned controls (e.g., buttons, drop-downs, etc.).\n- `icon`\n - : The system font used to label icons.\n- `menu`\n - : The system font used in menus (e.g., dropdown menus and menu lists).\n- `message-box`\n - : The system font used in dialog boxes.\n- `small-caption`\n - : The system font used for labeling small controls.\n- `status-bar`\n - : The system font used in window status bars.\n- Prefixed system font keywords\n - : Browsers often implement several more, prefixed, keywords: Gecko implements `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list`, and `-moz-field`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Setting font properties\n\n```css\n/* Set the font size to 12px and the line height to 14px.\n Set the font family to sans-serif */\np { font: 12px/14px sans-serif }\n\n/* Set the font size to 80% of the parent element\n or default value (if no parent element present).\n Set the font family to sans-serif */\np { font: 80% sans-serif }\n\n/* Set the font weight to bold,\n the font-style to italic,\n the font size to large,\n and the font family to serif. */\np { font: bold italic large serif }\n\n/* Use the same font as the status bar of the window */\np { font: status-bar }\n```\n\n### Live sample\n\n```html hidden\n

    \n Change the radio buttons below to see the generated shorthand and its effect.\n

    \n
    \n
    \n
    \n font-style
    \n
    \n
    \n
    \n \n
    \n\n
    \n font-variant
    \n
    \n
    \n \n
    \n\n
    \n font-weight
    \n
    \n
    \n \n
    \n\n
    \n font-size
    \n
    \n
    \n \n
    \n\n
    \n line-height
    \n
    \n
    \n \n

    \n\n
    \n font-family
    \n

    \n

    \n

    \n

    \n
    \n
    \n\n
    \n
    \n font :\n
    \n
    \n
    \n font-style
    \n optional\n\n
    \n
    \n
    \n font-variant
    \n optional\n
    \n
    \n
    \n font-weight
    \n optional\n
    \n
    \n
    \n font-size
    \n mandatory\n
    \n
    \n
    \n line-height
    \n optional\n
    \n
    \n
    \n font-family
    \n mandatory\n
    \n
    \n
    \n\n
    \n This is some sample text.\n
    \n





    \n```\n\n```css hidden\nbody, input {\n font: 14px arial;\n overflow: hidden;\n}\n\n.propInputCont {\n float: left;\n text-align: center;\n margin-right: 5px;\n width: 80px;\n}\n\n.setPropCont {\n float: left;\n margin-right: 5px;\n width: 120px;\n}\n\n.propInputs, .setPropCont {\n margin-bottom: 1em;\n}\n\n.curCss {\n border: none;\n border-bottom: 1px solid black;\n text-align: center;\n width: 80px;\n}\n\n.mandatory {\n border-bottom-color: red;\n}\n\n.cf:before,\n.cf:after {\n content: \" \";\n display: table;\n}\n\n.cf:after {\n clear: both;\n}\n\n.tar {\n width: 40px;\n text-align: right;\n}\n.fontfamily {\n display: inline-block;\n}\n```\n\n```js hidden\nvar textAreas = document.getElementsByClassName(\"curCss\"),\n shortText = \"\",\n getCheckedValue,\n setCss,\n getProperties,\n injectCss;\n\ngetProperties = function () {\n shortText =\n getCheckedValue(\"font_style\") + \" \" +\n getCheckedValue(\"font_variant\") + \" \" +\n getCheckedValue(\"font_weight\") + \" \" +\n getCheckedValue(\"font_size\") +\n getCheckedValue(\"line_height\") + \" \" +\n getCheckedValue(\"font_family\");\n\n return shortText;\n}\n\ngetCheckedValue = function(radio_name) {\n oRadio = document.forms[0].elements[radio_name];\n for (var i = 0; i < oRadio.length; i++) {\n if(oRadio[i].checked) {\n var propInput = \"input_\" + radio_name,\n curElemName = \"input_\" + radio_name,\n curElem = document.getElementById(curElemName);\n curElem.value = oRadio[i].value;\n\n return oRadio[i].value;\n }\n }\n}\n\nsetCss = function () {\n getProperties();\n injectCss(shortText);\n}\n\ninjectCss = function(cssFragment) {\n old = document.body.getElementsByTagName(\"style\");\n if (old.length > 1) {\n old[1].parentElement.removeChild(old[1]);\n }\n css = document.createElement(\"style\");\n css.innerHTML = \".fontShortHand{font: \" + cssFragment + \"}\";\n document.body.appendChild(css);\n}\n\nsetCss();\n```\n\n{{ EmbedLiveSample('Live_sample','100%', '440px')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-weight\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "forced-color-adjust", "document": "---\ntitle: forced-color-adjust\nslug: Web/CSS/forced-color-adjust\ntags:\n - Adjusting Colors\n - CSS\n - CSS Colors\n - CSS Property\n - HTML Colors\n - HTML Styles\n - Layout\n - Reference\n - Styling HTML\n - Styling text\n - Web\n - forced-color-adjust\n - recipe:css-property\nbrowser-compat: css.properties.forced-color-adjust\n---\n{{CSSRef}}\n\nThe **`forced-color-adjust`** CSS property allows authors to opt certain elements out of forced colors mode. This then restores the control of those values to CSS.\n\n## Syntax\n\n```css\nforced-color-adjust: auto;\nforced-color-adjust: none;\n\n/* Global values */\nforced-color-adjust: inherit;\nforced-color-adjust: initial;\nforced-color-adjust: revert;\nforced-color-adjust: revert-layer;\nforced-color-adjust: unset;\n```\n\nThe `forced-color-adjust` property's value must be one of the following keywords.\n\n### Values\n\n- `auto`\n - : The element's colors are adjusted by the {{Glossary(\"user agent\")}} in forced colors mode. This is the default.\n- **`none`**\n - : The element's colors are not automatically adjusted by the {{Glossary(\"user agent\")}} in forced colors mode.\n\n## Usage notes\n\nThis property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the {{Glossary(\"user agent\")}} result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. **It should not be used to prevent user choices being respected**.\n\nThe property is a standardized version of the [-ms-high-contrast-adjust](https://docs.microsoft.com/previous-versions/hh771863%28v%3dvs.85%29) property. The prefixed property can be used to achieve similar functionality in Internet Explorer 10 and EdgeHTML versions of Microsoft Edge.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preserving colors\n\nIn the example below the first box will use the color scheme that the user has set. For example in Windows High Contrast mode black scheme it will have a black background and white text. The second box will preserve the site colors set on the `.box` class.\n\nBy using the [`forced-colors`](/en-US/docs/Web/CSS/@media/forced-colors) media feature you could add any other optimizations for forced color mode alongside the `forced-color-adjust` property.\n\n#### CSS\n\n```css\n.box {\n border: 5px solid grey;\n background-color: #ccc;\n width: 300px;\n margin: 20px;\n padding: 10px;\n}\n\n@media (forced-colors: active) {\n .forced {\n forced-color-adjust: none;\n }\n}\n```\n\n#### HTML\n\n```html\n
    \n

    This is a box which should use your color preferences.

    \n
    \n\n
    \n

    This is a box which should stay the colors set by the site.

    \n
    \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Preserving_colors\", 640, 300)}}\n\nThe following screenshot shows the image above in Windows High Contrast Mode:\n\n![The example above in high contrast mode shows the first box with a black background the second with the grey background of the CSS.](windows-high-contrast.jpg)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n- [Styling for Windows high contrast with standards for forced colors.](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/)\n- {{cssxref(\"print-color-adjust\")}}\n" }, { "property": "font-style", "document": "---\ntitle: font-style\nslug: Web/CSS/font-style\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - Web\n - font\n - recipe:css-property\nbrowser-compat: css.properties.font-style\n---\n{{CSSRef}}\n\nThe **`font-style`** [CSS](/en-US/docs/Web/CSS) property sets whether a font should be styled with a normal, italic, or oblique face from its {{cssxref(\"font-family\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/font-style.html\")}}\n\n**Italic** font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while **oblique** faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use {{cssxref(\"font-synthesis\")}} to control this behavior).\n\n## Syntax\n\n```css\nfont-style: normal;\nfont-style: italic;\nfont-style: oblique;\nfont-style: oblique 10deg;\n\n/* Global values */\nfont-style: inherit;\nfont-style: initial;\nfont-style: revert;\nfont-style: revert-layer;\nfont-style: unset;\n```\n\nThe `font-style` property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is `oblique`.\n\n### Values\n\n- `normal`\n - : Selects a font that is classified as `normal` within a {{Cssxref(\"font-family\")}}.\n- `italic`\n - : Selects a font that is classified as `italic`. If no italic version of the face is available, one classified as `oblique` is used instead. If neither is available, the style is artificially simulated.\n- `oblique`\n - : Selects a font that is classified as `oblique`. If no oblique version of the face is available, one classified as `italic` is used instead. If neither is available, the style is artificially simulated.\n- `oblique` [``](/en-US/docs/Web/CSS/angle)\n\n - : Selects a font classified as `oblique`, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of `-90deg` to `90deg` inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.\n\n In general, for a requested angle of 14 degrees or greater, larger angles are preferred; otherwise, smaller angles are preferred (see the spec's [font matching section](https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm) for the precise algorithm).\n\n### Variable fonts\n\nVariable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the `` modifier for the `oblique` keyword.\n\nFor TrueType or OpenType variable fonts, the `\"slnt\"` variation is used to implement varying slant angles for oblique, and the `\"ital\"` variation with a value of 1 is used to implement italic values. See {{cssxref(\"font-variation-settings\")}}.\n\n> **Note:** For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which `font-style: oblique` can accept an ``. The demo loads with `font-style: oblique 23deg;`. Change the value to see the slant of the text change.\n\n{{EmbedGHLiveSample(\"css-examples/variable-fonts/oblique.html\", '100%', 860)}}\n\n## Accessibility concerns\n\nLarge sections of text set with a `font-style` value of `italic` may be difficult for people with cognitive concerns such as Dyslexia to read.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Font styles\n\n```html hidden\n

    This paragraph is normal.

    \n

    This paragraph is italic.

    \n

    This paragraph is oblique.

    \n```\n\n```css\n.normal {\n font-style: normal;\n}\n\n.italic {\n font-style: italic;\n}\n\n.oblique {\n font-style: oblique;\n}\n```\n\n{{ EmbedLiveSample('Font_styles') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-weight\")}}\n- [Fundamental text and font styling](/en-US/docs/Learn/CSS/Styling_text/Fundamentals)\n" }, { "property": "font-synthesis", "document": "---\ntitle: font-synthesis\nslug: Web/CSS/font-synthesis\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-synthesis\n---\n{{CSSRef}}\n\nThe **`font-synthesis`** [CSS](/en-US/docs/Web/CSS) property controls which missing typefaces, bold, italic, or small-caps, may be synthesized by the browser.\n\n## Syntax\n\n```css\nfont-synthesis: none;\nfont-synthesis: weight;\nfont-synthesis: style;\nfont-synthesis: small-caps;\nfont-synthesis: weight style small-caps;\n\n/* Global values */\nfont-synthesis: inherit;\nfont-synthesis: initial;\nfont-synthesis: revert;\nfont-synthesis: revert-layer;\nfont-synthesis: unset;\n```\n\n### Values\n\n- `none`\n - : Indicates that no bold, italic, nor small-caps typeface may be synthesized.\n- `weight`\n - : Indicates that a bold typeface may be synthesized if needed.\n- `style`\n - : Indicates that an italic typeface may be synthesized if needed.\n- `small-caps`\n - : Indicates that a small-caps typeface may be synthesized if needed.\n\n## Description\n\nMost standard Western fonts include italic and bold variants, and some fonts include a small-caps variant. However, many fonts do not. Fonts used for Chinese, Japanese, Korean and other logographic scripts tend not to include these variants, and synthesizing them may impede the legibility of the text. In these cases, it may be desirable to switch off the browser's default font-synthesis.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Disabling font synthesis\n\n#### HTML\n\n```html\nSynthesize me! 站直。\n
    \nDon't synthesize me! 站直。\n```\n\n#### CSS\n\n```css\nem {\n font-weight: bold;\n}\n.syn {\n font-synthesis: style weight small-caps;\n}\n.no-syn {\n font-synthesis: none;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Disabling_font_synthesis', '', '75') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-style\")}}\n- {{cssxref(\"font-weight\")}}\n" }, { "property": "frequency-percentage", "document": "---\ntitle: \nslug: Web/CSS/frequency-percentage\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Reference\n - frequency-percentage\n - units\n - values\nbrowser-compat: css.types.frequency-percentage\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref(\"frequency\")}} or a {{Cssxref(\"percentage\")}}. Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties.\n\n## Syntax\n\nThe value of a `` is either a {{Cssxref(\"frequency\")}} or a {{Cssxref(\"percentage\")}}; see their individual reference pages for details about their syntaxes.\n\n## Description\n\n### Use in calc()\n\nWhere a `` is specified as an allowable type, this means that the percentage resolves to a frequency and therefore can be used in a [`calc()`](/en-US/docs/Web/CSS/calc()) expression.\n\n## Examples\n\n### Valid percentage values\n\n``` plain example-good\n90% Positive percentage\n+90% Positive percentage with leading +\n-90% Negative percentage — not valid for all properties that use percentages\n```\n\n### Invalid percentage values\n\n```plain example-bad\n90 % No space is allowed between the number and the unit\n```\n\n### Valid frequency values\n\n``` plain example-good\n12Hz Positive integer\n4.3Hz Non-integer\n14KhZ The unit is case-insensitive, though non-SI capitalization is not recommended.\n+0Hz Zero, with a leading + and a unit\n-0kHz Zero, with a leading - and a unit\n```\n\n### Invalid frequency values\n\n```plain example-bad\n12.0 This is a , not an , because it is missing a unit.\n7 Hz No space is allowed between the number and the unit.\n0 Although unitless zero is an allowable , it's an invalid .\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS data types](/en-US/docs/Web/CSS/CSS_Types)\n- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n- Related CSS data types:\n\n - {{cssxref(\"frequency\", \"<frequency>\")}}\n - {{cssxref(\"percentage\", \"<percentage>\")}}\n" }, { "property": "frequency", "document": "---\ntitle: \nslug: Web/CSS/frequency\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Reference\n - Web\nbrowser-compat: css.types.frequency\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties.\n\n## Syntax\n\nThe `` data type consists of a {{cssxref(\"<number>\")}} followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.\n\n### Units\n\n- `Hz`\n - : Represents a frequency in hertz. Examples: `0Hz`, `1500Hz`, `10000Hz`.\n- `kHz`\n - : Represents a frequency in kilohertz. Examples: `0kHz`, `1.5kHz`, `10kHz`.\n\n> **Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0Hz` or `0kHz`. Though the units are case-insensitive, it is good practice to use a capital \"H\" for `Hz` and `kHz`, as specified in the [SI](https://en.wikipedia.org/wiki/International_System_of_Units).\n\n## Examples\n\nValid frequency values:\n\n```plain example-good\n12Hz Positive integer\n4.3Hz Non-integer\n14KhZ The unit is case-insensitive, though non-SI capitalization is not recommended.\n+0Hz Zero, with a leading + and a unit\n-0kHz Zero, with a leading - and a unit\n```\n\nInvalid frequency values:\n\n```plain example-bad\n12.0 This is a , not an , because it is missing a unit.\n7 Hz No space is allowed between the number and the unit.\n0 Although unitless zero is an allowable , it's an invalid .\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<frequency-percentage>\")}}\n- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n" }, { "property": "gap", "document": "---\ntitle: gap (grid-gap)\nslug: Web/CSS/gap\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Grid\n - CSS Multi-column Layout\n - CSS Property\n - Reference\n - gap\n - recipe:css-property\nbrowser-compat: css.properties.gap\n---\n{{CSSRef}}\n\nThe **`gap`** [CSS](/en-US/docs/Web/CSS) property sets the gaps ({{glossary(\"gutters\")}}) between rows and columns. It is a [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) for {{CSSxRef(\"row-gap\")}} and {{CSSxRef(\"column-gap\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/gap.html\")}}\n\n## Syntax\n\n```css\n/* One value */\ngap: 20px;\ngap: 1em;\ngap: 3vmin;\ngap: 0.5cm;\n\n/* One value */\ngap: 16%;\ngap: 100%;\n\n/* Two values */\ngap: 20px 10px;\ngap: 1em 0.5em;\ngap: 3vmin 2vmax;\ngap: 0.5cm 2mm;\n\n/* One or two values */\ngap: 16% 100%;\ngap: 21px 82%;\n\n/* calc() values */\ngap: calc(10% + 20px);\ngap: calc(20px + 10%) calc(10% - 5px);\n\n/* Global values */\ngap: inherit;\ngap: initial;\ngap: revert;\ngap: revert-layer;\ngap: unset;\n```\n\nThis property is specified as a value for `<'row-gap'>` followed optionally by a value for `<'column-gap'>`. If `<'column-gap'>` is omitted, it's set to the same value as `<'row-gap'>`.\n\n`<'row-gap'>` and `<'column-gap'>` are each specified as a `` or a ``.\n\n### Values\n\n- {{CSSxRef(\"<length>\")}}\n - : Is the width of the gutter separating the grid lines.\n- {{CSSxRef(\"<percentage>\")}}\n - : Is the width of the gutter separating the grid lines, relative to the dimension of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Flex layout\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#flexbox {\n display: flex;\n flex-wrap: wrap;\n width: 300px;\n gap: 20px 5px;\n}\n\n#flexbox > div {\n border: 1px solid green;\n background-color: lime;\n flex: 1 1 auto;\n width: 100px;\n height: 50px;\n\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Flex_layout\", \"auto\", 250)}}\n\n### Grid layout\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 200px;\n grid-template: repeat(3, 1fr) / repeat(3, 1fr);\n gap: 20px 5px;\n}\n\n#grid > div {\n border: 1px solid green;\n background-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Grid_layout\", \"auto\", 250)}}\n\n### Multi-column layout\n\n#### HTML\n\n```html\n

    \n This is some multi-column text with a 40px column\n gap created with the CSS gap property.\n Don't you think that's fun and exciting? I sure do!\n

    \n```\n\n#### CSS\n\n```css\n.content-box {\n column-count: 3;\n gap: 40px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Multi-column_layout\", \"auto\", \"120px\")}}\n\n## Specifications\n\n{{Specifications(\"css.properties.gap.grid_context\")}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{CSSxRef(\"row-gap\")}}, {{CSSxRef(\"column-gap\")}}\n- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_\n" }, { "property": "flex_value", "document": "---\ntitle: \nslug: Web/CSS/flex_value\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.flex\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes a flexible length within a grid container. It is used in {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-rows\")}} and other related properties.\n\n## Syntax\n\nThe `` data type is specified as a {{cssxref(\"<number>\")}} followed by the unit `fr`. The `fr` unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.\n\n## Examples\n\n### Examples of correct values for the fr data type\n\n```css\n1fr /* Using an integer value */\n2.5fr /* Using a float value */\n```\n\n### Example of use in a tracklisting for CSS Grid layout\n\n```css\n.grid {\n display: grid;\n grid-template-columns: 1fr 1fr 2.5fr 1.5fr;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout)\n" }, { "property": "general_sibling_combinator", "document": "---\ntitle: General sibling combinator\nslug: Web/CSS/General_sibling_combinator\ntags:\n - CSS\n - Reference\n - Selector\n - Selectors\nbrowser-compat: css.selectors.general_sibling\n---\n{{CSSRef(\"Selectors\")}}\n\nThe **general sibling combinator** (`~`) separates two selectors and matches _all iterations_ of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent {{Glossary(\"element\")}}.\n\n```css\n/* Paragraphs that are siblings of and\n subsequent to any image */\nimg ~ p {\n color: red;\n}\n```\n\n## Syntax\n\n```css\nformer_element ~ target_element { style properties }\n```\n\n## Examples\n\n### CSS\n\n```css\np ~ span {\n color: red;\n}\n```\n\n### HTML\n\n```html\nThis is not red.\n

    Here is a paragraph.

    \nHere is some code.\nAnd here is a red span!\nAnd this is a red span!\nMore code...\n
    How are you?
    \n

    Whatever it may be, keep smiling.

    \n

    Dream big

    \nAnd yet again this is a red span!\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"auto\", 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator)\n" }, { "property": "font-variant-ligatures", "document": "---\ntitle: font-variant-ligatures\nslug: Web/CSS/font-variant-ligatures\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-ligatures\n---\n{{CSSRef}}\n\nThe **`font-variant-ligatures`** CSS property controls which {{Glossary(\"ligature\", \"ligatures\")}} and {{Glossary(\"contextual forms\")}} are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.\n\n{{EmbedInteractiveExample(\"pages/css/font-variant-ligatures.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nfont-variant-ligatures: normal;\nfont-variant-ligatures: none;\nfont-variant-ligatures: common-ligatures; /* */\nfont-variant-ligatures: no-common-ligatures; /* */\nfont-variant-ligatures: discretionary-ligatures; /* */\nfont-variant-ligatures: no-discretionary-ligatures; /* */\nfont-variant-ligatures: historical-ligatures; /* */\nfont-variant-ligatures: no-historical-ligatures; /* */\nfont-variant-ligatures: contextual; /* */\nfont-variant-ligatures: no-contextual; /* */\n\n/* Global values */\nfont-variant-ligatures: inherit;\nfont-variant-ligatures: initial;\nfont-variant-ligatures: revert;\nfont-variant-ligatures: revert-layer;\nfont-variant-ligatures: unset;\n```\n\nThe `font-variant-ligatures` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `normal`\n - : This keyword leads to the activation of the usual ligatures and contextual forms needed for correct rendering. The ligatures and forms activated depend on the font, language and kind of script. This is the default value.\n- `none`\n - : This keyword specifies that all ligatures and contextual forms are disabled, even common ones.\n- _\\_\n\n - : These values control the most common ligatures, like for `fi`, `ffi`, `th` or similar. They correspond to the OpenType values `liga` and `clig`. Two values are possible:\n\n - `common-ligatures` activating these ligatures. Note that the keyword `normal` activates these ligatures.\n - `no-common-ligatures` deactivating these ligatures.\n\n- _\\_\n\n - : These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values `dlig`. Two values are possible:\n\n - `discretionary-ligatures` activating these ligatures.\n - `no-discretionary-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.\n\n- _\\_\n\n - : These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values `hlig`. Two values are possible:\n\n - `historical-ligatures` activating these ligatures.\n - `no-historical-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.\n\n- _\\_\n\n - : These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values `calt`. Two values are possible:\n\n - `contextual` specifies that the contextual alternates are to be used. Note that the keyword `normal` usually activates these ligatures too.\n - `no-contextual` prevents their use.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting font ligatures and contextual forms\n\n#### HTML\n\n```html\n\n

    \n normal
    \n if fi ff tf ft jf fj\n

    \n

    \n none
    \n if fi ff tf ft jf fj\n

    \n

    \n common-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n no-common-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n discretionary-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n no-discretionary-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n historical-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n no-historical-ligatures
    \n if fi ff tf ft jf fj\n

    \n

    \n contextual
    \n if fi ff tf ft jf fj\n

    \n

    \n no-contextual
    \n if fi ff tf ft jf fj\n

    \n

    \n contextual
    \n if fi ff tf ft jf fj\n

    \n```\n\n#### CSS\n\n```css\np {\n font-family: Lora, serif;\n}\n.normal {\n font-variant-ligatures: normal;\n}\n\n.none {\n font-variant-ligatures: none;\n}\n\n.common-ligatures {\n font-variant-ligatures: common-ligatures;\n}\n\n.no-common-ligatures {\n font-variant-ligatures: no-common-ligatures;\n}\n\n.discretionary-ligatures {\n font-variant-ligatures: discretionary-ligatures;\n}\n\n.no-discretionary-ligatures {\n font-variant-ligatures: no-discretionary-ligatures;\n}\n\n.historical-ligatures {\n font-variant-ligatures: historical-ligatures;\n}\n\n.no-historical-ligatures {\n font-variant-ligatures: no-historical-ligatures;\n}\n\n.contextual {\n font-variant-ligatures: contextual;\n}\n\n.no-contextual {\n font-variant-ligatures: no-contextual;\n}\n\n.contextual {\n font-variant-ligatures: contextual;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n" }, { "property": "gradient", "document": "---\ntitle: \nslug: Web/CSS/gradient\ntags:\n - CSS\n - CSS Data Type\n - CSS Images\n - Data Type\n - Graphics\n - Layout\n - Reference\nbrowser-compat: css.types.image.gradient\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a special type of {{cssxref(\"<image>\")}} that consists of a progressive transition between two or more colors.\n\n{{EmbedInteractiveExample(\"pages/css/type-gradient.html\")}}\n\nA CSS gradient has [no intrinsic dimensions](/en-US/docs/Web/CSS/image#description); i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element to which it applies.\n\n## Syntax\n\nThe `` data type is defined with one of the function types listed below.\n\n#### Linear gradient\n\nLinear gradients transition colors progressively along an imaginary line. They are generated with the {{cssxref(\"gradient/linear-gradient\", \"linear-gradient()\")}} function.\n\n#### Radial gradient\n\nRadial gradients transition colors progressively from a center point (origin). They are generated with the {{cssxref(\"gradient/radial-gradient\", \"radial-gradient()\")}} function.\n\n#### Repeating gradient\n\nRepeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the {{cssxref(\"gradient/repeating-linear-gradient\", \"repeating-linear-gradient()\")}} and {{cssxref(\"gradient/repeating-radial-gradient\", \"repeating-radial-gradient()\")}} functions.\n\n#### Conic gradient\n\nConic gradients transition colors progressively around a circle. They are generated with the {{cssxref(\"gradient/conic-gradient\", \"conic-gradient()\")}} function.\n\n## Interpolation\n\nAs with any interpolation involving colors, gradients are calculated in the alpha-premultiplied color space. This prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (Be aware that older browsers may not use this behavior when using the [transparent keyword](/en-US/docs/Web/CSS/color_value#transparent_keyword).)\n\n## Examples\n\n### Linear gradient example\n\nA simple linear gradient.\n\n```html hidden\n
    Linear gradient
    \n```\n\n```css hidden\ndiv {\n width: 240px;\n height: 80px;\n}\n```\n\n```css\n.linear-gradient {\n background: linear-gradient(to right,\n red, orange, yellow, green, blue, indigo, violet);\n}\n```\n\n{{EmbedLiveSample('Linear_gradient_example', 240, 120)}}\n\n### Radial gradient example\n\nA simple radial gradient.\n\n```html hidden\n
    Radial gradient
    \n```\n\n```css hidden\ndiv {\n width: 240px;\n height: 80px;\n}\n```\n\n```css\n.radial-gradient {\n background: radial-gradient(red, yellow, rgb(30, 144, 255));\n}\n```\n\n{{EmbedLiveSample('Radial_gradient_example', 240, 120)}}\n\n### Repeating gradient examples\n\nSimple repeating linear and radial gradient examples.\n\n```html hidden\n
    Repeating linear gradient
    \n
    \n
    Repeating radial gradient
    \n```\n\n```css hidden\ndiv {\n width: 240px;\n height: 80px;\n}\n```\n\n```css\n.linear-repeat {\n background: repeating-linear-gradient(to top left,\n lightpink, lightpink 5px, white 5px, white 10px);\n}\n\n.radial-repeat {\n background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);\n}\n```\n\n{{EmbedLiveSample('Repeating_gradient_examples', 240, 220)}}\n\n### Conic gradient example\n\nA simple conic gradient example. Note that this isn't supported widely across browser as of yet.\n\n```html hidden\n
    Conic gradient
    \n```\n\n```css hidden\ndiv {\n width: 200px;\n height: 200px;\n}\n```\n\n```css\n.conic-gradient {\n background: conic-gradient(lightpink, white, powderblue);\n}\n```\n\n{{EmbedLiveSample('Conic_gradient_example', 240, 240)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using CSS gradients](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)\n- Gradient functions: {{cssxref(\"gradient/linear-gradient\", \"linear-gradient()\")}}, {{cssxref(\"gradient/repeating-linear-gradient\", \"repeating-linear-gradient()\")}}, {{cssxref(\"gradient/radial-gradient\", \"radial-gradient()\")}}, {{cssxref(\"gradient/repeating-radial-gradient\", \"repeating-radial-gradient()\")}}, {{cssxref(\"gradient/conic-gradient\", \"conic-gradient()\")}}, {{cssxref(\"gradient/repeating-conic-gradient\", \"repeating-conic-gradient()\")}}\n- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Types)\n- [CSS Units and Values](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n- [Introduction to CSS: Values and Units](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\n" }, { "property": "font-variant-position", "document": "---\ntitle: font-variant-position\nslug: Web/CSS/font-variant-position\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.font-variant-position\n---\n{{CSSRef}}\n\nThe **`font-variant-position`** CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.\n\nThe glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in {{HTMLElement(\"sub\")}} and {{HTMLElement(\"sup\")}} elements.\n\n```css\n/* Keyword values */\nfont-variant-position: normal;\nfont-variant-position: sub;\nfont-variant-position: super;\n\n/* Global values */\nfont-variant-position: inherit;\nfont-variant-position: initial;\nfont-variant-position: revert;\nfont-variant-position: revert-layer;\nfont-variant-position: unset;\n```\n\nWhen the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.\n\nThese alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.\n\n## Syntax\n\nThe `font-variant-position` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `normal`\n - : Deactivates alternate superscript and subscript glyphs.\n- `sub`\n - : Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.\n- `super`\n - : Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting superscript and subscript forms\n\n#### HTML\n\n```html\n

    Normal!

    \n

    Super!

    \n

    Sub!

    \n```\n\n#### CSS\n\n```css\np {\n display: inline;\n}\n\n.normal {\n font-variant-position: normal;\n}\n\n.super {\n font-variant-position: super;\n}\n\n.sub {\n font-variant-position: sub;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_superscript_and_subscript_forms') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See Also\n\n- {{cssxref(\"font-variant-alternates\")}}\n- {{cssxref(\"font-variant-caps\")}}\n- {{cssxref(\"font-variant-east-asian\")}}\n- {{cssxref(\"font-variant-ligatures\")}}\n- {{cssxref(\"font-variant-numeric\")}}\n" }, { "property": "grid-area", "document": "---\ntitle: grid-area\nslug: Web/CSS/grid-area\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.grid-area\n---\n{{CSSRef}}\n\nThe **`grid-area`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) specifies a grid item's size and location within a {{glossary(\"grid\", \"grid\")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-area.html\")}}\n\nIf four `` 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.\n\nWhen `grid-column-end` is omitted, if `grid-column-start` is a {{cssxref(\"<custom-ident>\")}}, `grid-column-end` is set to that ``; otherwise, it is set to `auto`.\n\nWhen `grid-row-end` is omitted, if `grid-row-start` is a ``, `grid-row-end` is set to that ``; otherwise, it is set to `auto`.\n\nWhen `grid-column-start` is omitted, if `grid-row-start` is a ``, all four longhands are set to that value. Otherwise, it is set to `auto`.\n\nThe grid-area property can also be set to a {{cssxref(\"<custom-ident>\")}} which acts as a name for the area, which can then be placed using {{cssxref(\"grid-template-areas\")}}.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`grid-row-start`](/en-US/docs/Web/CSS/grid-row-start)\n- [`grid-column-start`](/en-US/docs/Web/CSS/grid-column-start)\n- [`grid-row-end`](/en-US/docs/Web/CSS/grid-row-end)\n- [`grid-column-end`](/en-US/docs/Web/CSS/grid-column-end)\n\n## Syntax\n\n```css\n/* Keyword values */\ngrid-area: auto;\ngrid-area: auto / auto;\ngrid-area: auto / auto / auto;\ngrid-area: auto / auto / auto / auto;\n\n/* values */\ngrid-area: some-grid-area;\ngrid-area: some-grid-area / another-grid-area;\n\n/* && ? values */\ngrid-area: 4 some-grid-area;\ngrid-area: 4 some-grid-area / 2 another-grid-area;\n\n/* span && [ || ] values */\ngrid-area: span 3;\ngrid-area: span 3 / span some-grid-area;\ngrid-area: 2 span / another-grid-area span;\n\n/* Global values */\ngrid-area: inherit;\ngrid-area: initial;\ngrid-area: revert;\ngrid-area: revert-layer;\ngrid-area: unset;\n```\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '`-start`'/'`-end`', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-area: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the *n*th grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a {{cssxref(\"<custom-ident>\")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"<integer>\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is _n_ lines from the opposite edge.\n\n If a name is given as a {{cssxref(\"<custom-ident>\")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the {{cssxref(\"<integer>\")}} is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid areas\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 100px;\n grid-template: repeat(4, 1fr) / 50px 100px;\n}\n\n#item1 {\n background-color: lime;\n grid-area: 2 / 2 / auto / span 3;\n}\n\n#item2 {\n background-color: yellow;\n}\n\n#item3 {\n background-color: blue;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_areas\", \"100%\", \"150px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}, {{cssxref(\"grid-template-areas\")}}\n- Grid Layout Guide: _[Grid template areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)_\n- Video tutorial: *[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)*\n" }, { "property": "grid-auto-columns", "document": "---\ntitle: grid-auto-columns\nslug: Web/CSS/grid-auto-columns\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\nbrowser-compat: css.properties.grid-auto-columns\n---\n{{CSSRef}}\n\nThe **`grid-auto-columns`** CSS property specifies the size of an implicitly-created grid column {{glossary(\"grid tracks\", \"track\")}} or pattern of tracks.\n\n{{EmbedInteractiveExample(\"pages/css/grid-auto-columns.html\")}}\n\nIf a grid item is positioned into a column that is not explicitly sized by {{cssxref(\"grid-template-columns\")}}, implicit {{glossary(\"grid\", \"grid\")}} tracks are created to hold it. This can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns.\n\n## Syntax\n\n```css\n/* Keyword values */\ngrid-auto-columns: min-content;\ngrid-auto-columns: max-content;\ngrid-auto-columns: auto;\n\n/* values */\ngrid-auto-columns: 100px;\ngrid-auto-columns: 20cm;\ngrid-auto-columns: 50vmax;\n\n/* values */\ngrid-auto-columns: 10%;\ngrid-auto-columns: 33.3%;\n\n/* values */\ngrid-auto-columns: 0.5fr;\ngrid-auto-columns: 3fr;\n\n/* minmax() values */\ngrid-auto-columns: minmax(100px, auto);\ngrid-auto-columns: minmax(max-content, 2fr);\ngrid-auto-columns: minmax(20%, 80vmax);\n\n/* fit-content() values */\ngrid-auto-columns: fit-content(400px);\ngrid-auto-columns: fit-content(5cm);\ngrid-auto-columns: fit-content(20%);\n\n/* multiple track-size values */\ngrid-auto-columns: min-content max-content auto;\ngrid-auto-columns: 100px 150px 390px;\ngrid-auto-columns: 10% 33.3%;\ngrid-auto-columns: 0.5fr 3fr 1fr;\ngrid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);\ngrid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);\n\n/* Global values */\ngrid-auto-columns: inherit;\ngrid-auto-columns: initial;\ngrid-auto-columns: revert;\ngrid-auto-columns: revert-layer;\ngrid-auto-columns: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Is a non-negative length.\n- {{cssxref(\"<percentage>\")}}\n - : Is a non-negative {{cssxref(\"percentage\", \"<percentage>\")}} value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like `auto`.\n- {{cssxref(\"<flex>\")}}\n\n - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor.\n\n When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, )`).\n\n- {{cssxref(\"max-content\")}}\n - : Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"min-content\")}}\n - : Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"minmax\", \"minmax(min, max)\")}}\n - : Is a functional notation that defines a size range greater than or equal to _min_ and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `` value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).\n- {{cssxref(\"fit-content_function\", \"fit-content( [ <length> | <percentage> ] )\")}}\n - : Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum.\n- `auto`\n\n - : Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}}) of the grid items occupying the grid track.\n\n > **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref(\"align-content\")}} and {{cssxref(\"justify-content\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid column size\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n height: 100px;\n display: grid;\n grid-template-areas: \"a a\";\n gap: 10px;\n grid-auto-columns: 200px;\n}\n\n#grid > div {\n background-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_column_size\", \"410px\", \"100px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-auto-rows\")}}, {{cssxref(\"grid-auto-flow\")}}, {{cssxref(\"grid\")}}\n- Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#sizing_rows_in_the_implicit_grid)_\n- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_\n" }, { "property": "grid-auto-flow", "document": "---\ntitle: grid-auto-flow\nslug: Web/CSS/grid-auto-flow\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-auto-flow\n---\n{{CSSRef}}\n\nThe **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.\n\n{{EmbedInteractiveExample(\"pages/css/grid-auto-flow.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\ngrid-auto-flow: row;\ngrid-auto-flow: column;\ngrid-auto-flow: dense;\ngrid-auto-flow: row dense;\ngrid-auto-flow: column dense;\n\n/* Global values */\ngrid-auto-flow: inherit;\ngrid-auto-flow: initial;\ngrid-auto-flow: revert;\ngrid-auto-flow: revert-layer;\ngrid-auto-flow: unset;\n```\n\nThis property may take one of two forms:\n\n- a single keyword: one of `row`, `column`, or `dense`.\n- two keywords: `row dense` or `column dense`.\n\n### Values\n\n- `row`\n - : Items are placed by filling each row in turn, adding new rows as necessary. If neither `row` nor `column` is provided, `row` is assumed.\n- `column`\n - : Items are placed by filling each column in turn, adding new columns as necessary.\n- `dense`\n\n - : \"dense\" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.\n\n If it is omitted, a \"sparse\" algorithm is used, where the placement algorithm only ever moves \"forward\" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear \"in order\", even if this leaves holes that could have been filled by later items.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid auto-placement\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n\n\n\n```\n\n#### CSS\n\n```css\n#grid {\n height: 200px;\n width: 200px;\n display: grid;\n gap: 10px;\n grid-template: repeat(4, 1fr) / repeat(2, 1fr);\n grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */\n}\n\n#item1 {\n background-color: lime;\n grid-row-start: 3;\n}\n\n#item2 {\n background-color: yellow;\n}\n\n#item3 {\n background-color: blue;\n}\n\n#item4 {\n grid-column-start: 2;\n background-color: red;\n}\n\n#item5 {\n background-color: aqua;\n}\n```\n\n```js hidden\nfunction changeGridAutoFlow() {\n var grid = document.getElementById(\"grid\");\n var direction = document.getElementById(\"direction\");\n var dense = document.getElementById(\"dense\");\n var gridAutoFlow = direction.value === \"row\" ? \"row\" : \"column\";\n\n if (dense.checked) {\n gridAutoFlow += \" dense\";\n }\n\n grid.style.gridAutoFlow = gridAutoFlow;\n}\n\nconst selectElem = document.querySelector('select');\nconst inputElem = document.querySelector('input');\nselectElem.addEventListener('change', changeGridAutoFlow);\ninputElem.addEventListener('change', changeGridAutoFlow);\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_auto-placement\", \"200px\", \"260px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-auto-rows\")}}, {{cssxref(\"grid-auto-columns\")}}, {{cssxref(\"grid\")}}\n- Grid Layout Guide: _[Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)_\n- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_\n" }, { "property": "grid-column-end", "document": "---\ntitle: grid-column-end\nslug: Web/CSS/grid-column-end\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-column-end\n---\n{{CSSRef}}\n\nThe **`grid-column-end`** CSS property specifies a grid item's end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-column-end.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-column-end: auto;\n\n/* values */\ngrid-column-end: somegridarea;\n\n/* + values */\ngrid-column-end: 2;\ngrid-column-end: somegridarea 4;\n\n/* span + + values */\ngrid-column-end: span 3;\ngrid-column-end: span somegridarea;\ngrid-column-end: 5 somegridarea span;\n\n/* Global values */\ngrid-column-end: inherit;\ngrid-column-end: initial;\ngrid-column-end: revert;\ngrid-column-end: revert-layer;\ngrid-column-end: unset;\n```\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '\\-end', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column-end: foo;` will choose the end edge of that named grid area (unless another line named `foo-end` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement such that the column end edge of the grid item's grid area is n lines from the start edge.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n The `` cannot take the `span` value.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting column end for a grid item\n\n#### HTML\n\n```html\n
    \n
    One
    \n
    Two
    \n
    Three
    \n
    Four
    \n
    Five
    \n
    \n```\n\n#### CSS\n\n```css\n.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: 100px;\n}\n\n.box1 {\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n\n.box2 {\n grid-column-start: 1;\n grid-row-start: 3;\n grid-row-end: 5;\n}\n```\n\n```css hidden\n* {box-sizing: border-box;}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n\n.nested {\n border: 2px solid #ffec99;\n border-radius: 5px;\n background-color: #fff9db;\n padding: 1em;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_column_end_for_a_grid_item', '230', '420') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-row\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "grid-column-start", "document": "---\ntitle: grid-column-start\nslug: Web/CSS/grid-column-start\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-column-start\n---\n{{CSSRef}}\n\nThe **`grid-column-start`** CSS property specifies a grid item's start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-column-start.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-column-start: auto;\n\n/* value */\ngrid-column-start: somegridarea;\n\n/* + values */\ngrid-column-start: 2;\ngrid-column-start: somegridarea 4;\n\n/* span + + values */\ngrid-column-start: span 3;\ngrid-column-start: span somegridarea;\ngrid-column-start: span somegridarea 5;\n\n/* Global values */\ngrid-column-start: inherit;\ngrid-column-start: initial;\ngrid-column-start: revert;\ngrid-column-start: revert-layer;\ngrid-column-start: unset;\n```\n\nThis property is specified as a single `` value. A `` value can be specified as:\n\n- either the `auto` keyword\n- or a `` value\n- or an `` value\n- or both `` and ``, separated by a space\n- or the keyword `span` together with either a `` or an `` or both.\n\n### Values\n\n- `auto`\n - : A keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name `-start`, it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a ``, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement, such that the column start edge of the grid item's grid area is n lines from the end edge.\n\n If a name is given as a ``, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers and `0` are invalid.\n\n The `` cannot take the `span` value.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting column start for a grid item\n\n#### HTML\n\n```html\n
    \n
    One
    \n
    Two
    \n
    Three
    \n
    Four
    \n
    Five
    \n
    \n```\n\n#### CSS\n\n```css\n.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: 100px;\n}\n\n.box1 {\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n\n.box2 {\n grid-column-start: 1;\n grid-row-start: 3;\n grid-row-end: 5;\n}\n```\n\n```css hidden\n* {box-sizing: border-box;}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n\n.nested {\n border: 2px solid #ffec99;\n border-radius: 5px;\n background-color: #fff9db;\n padding: 1em;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-column-end\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-row\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "grid-row-end", "document": "---\ntitle: grid-row-end\nslug: Web/CSS/grid-row-end\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-row-end\n---\n{{CSSRef}}\n\nThe **`grid-row-end`** CSS property specifies a grid item's end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-row-end.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-row-end: auto;\n\n/* values */\ngrid-row-end: somegridarea;\n\n/* + values */\ngrid-row-end: 2;\ngrid-row-end: somegridarea 4;\n\n/* span + + values */\ngrid-row-end: span 3;\ngrid-row-end: span somegridarea;\ngrid-row-end: 5 somegridarea span;\n\n/* Global values */\ngrid-row-end: inherit;\ngrid-row-end: initial;\ngrid-row-end: revert;\ngrid-row-end: revert-layer;\ngrid-row-end: unset;\n```\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '\\-end', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-end: foo;` will choose the end edge of that named grid area (unless another line named `foo-end` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n The `` cannot take the `span` value.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement such that the row end edge of the grid item's grid area is n lines from the start edge.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting row end for a grid item\n\n#### HTML\n\n```html\n
    \n
    One
    \n
    Two
    \n
    Three
    \n
    Four
    \n
    Five
    \n
    \n```\n\n#### CSS\n\n```css\n.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: 100px;\n}\n\n.box1 {\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n\n.box2 {\n grid-column-start: 1;\n grid-row-start: 3;\n grid-row-end: 5;\n}\n```\n\n```css hidden\n* {box-sizing: border-box;}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n\n.nested {\n border: 2px solid #ffec99;\n border-radius: 5px;\n background-color: #fff9db;\n padding: 1em;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_row_end_for_a_grid_item', '230', '420') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}, {{cssxref(\"grid-column\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "grid-row-start", "document": "---\ntitle: grid-row-start\nslug: Web/CSS/grid-row-start\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-row-start\n---\n{{CSSRef}}\n\nThe **`grid-row-start`** CSS property specifies a grid item's start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-row-start.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-row-start: auto;\n\n/* values */\ngrid-row-start: somegridarea;\n\n/* + values */\ngrid-row-start: 2;\ngrid-row-start: somegridarea 4;\n\n/* span + + values */\ngrid-row-start: span 3;\ngrid-row-start: span somegridarea;\ngrid-row-start: 5 somegridarea span;\n\n/* Global values */\ngrid-row-start: inherit;\ngrid-row-start: initial;\ngrid-row-start: revert;\ngrid-row-start: revert-layer;\ngrid-row-start: unset;\n```\n\nThis property is specified as a single `` value. A `` value can be specified as:\n\n- either the `auto` keyword\n- or a `` value\n- or an `` value\n- or both `` and ``, separated by a space\n- or the keyword `span` together with either a `` or an `` or both.\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '\\-start', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row-start: foo;` will choose the start edge of that named grid area (unless another line named `foo-start` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement; such that the row start edge of the grid item's grid area is n lines from the end edge.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid, corresponding to the search direction, are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n The `` cannot take the `span` value.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting row start for a grid item\n\n#### HTML\n\n```html\n
    \n
    One
    \n
    Two
    \n
    Three
    \n
    Four
    \n
    Five
    \n
    \n```\n\n#### CSS\n\n```css\n.wrapper {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-auto-rows: 100px;\n}\n\n.box1 {\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n}\n\n.box2 {\n grid-column-start: 1;\n grid-row-start: 3;\n grid-row-end: 5;\n}\n```\n\n```css hidden\n* {box-sizing: border-box;}\n\n.wrapper {\n border: 2px solid #f76707;\n border-radius: 5px;\n background-color: #fff4e6;\n}\n\n.wrapper > div {\n border: 2px solid #ffa94d;\n border-radius: 5px;\n background-color: #ffd8a8;\n padding: 1em;\n color: #d9480f;\n}\n\n.nested {\n border: 2px solid #ffec99;\n border-radius: 5px;\n background-color: #fff9db;\n padding: 1em;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_row_start_for_a_grid_item', '230', '420') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}, {{cssxref(\"grid-column\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "grid-row", "document": "---\ntitle: grid-row\nslug: Web/CSS/grid-row\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.grid-row\n---\n{{CSSRef}}\n\nThe **`grid-row`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) specifies a grid item's size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-row.html\")}}\n\nIf two \\ values are specified, the `grid-row-start` longhand is set to the value before the slash, and the `grid-row-end` longhand is set to the value after the slash.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`grid-row-end`](/en-US/docs/Web/CSS/grid-row-end)\n- [`grid-row-start`](/en-US/docs/Web/CSS/grid-row-start)\n\n## Syntax\n\n```css\n/* Keyword values */\ngrid-row: auto;\ngrid-row: auto / auto;\n\n/* values */\ngrid-row: somegridarea;\ngrid-row: somegridarea / someothergridarea;\n\n/* + values */\ngrid-row: somegridarea 4;\ngrid-row: 4 somegridarea / 6;\n\n/* span + + values */\ngrid-row: span 3;\ngrid-row: span somegridarea;\ngrid-row: 5 somegridarea span;\ngrid-row: span 3 / 6;\ngrid-row: span somegridarea / span someothergridarea;\ngrid-row: 5 somegridarea span / 2 span;\n\n/* Global values */\ngrid-row: inherit;\ngrid-row: initial;\ngrid-row: revert;\ngrid-row: revert-layer;\ngrid-row: unset;\n```\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '\\-start'/'\\-end', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-row: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid row size and location\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 200px;\n grid-template-columns: 200px;\n grid-template-rows: repeat(6, 1fr);\n}\n\n#item1 {\n background-color: lime;\n}\n\n#item2 {\n background-color: yellow;\n grid-row: 2 / 4;\n}\n\n#item3 {\n background-color: blue;\n grid-row: span 2 / 7;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_row_size_and_location\", \"200px\", \"200px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "grid-template-rows", "document": "---\ntitle: grid-template-rows\nslug: Web/CSS/grid-template-rows\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-template-rows\n---\n{{CSSRef}}\n\nThe **`grid-template-rows`** CSS property defines the line names and track sizing functions of the {{glossary(\"grid rows\", \"grid rows\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-template-rows.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-template-rows: none;\n\n/* values */\ngrid-template-rows: 100px 1fr;\ngrid-template-rows: [linename] 100px;\ngrid-template-rows: [linename1] 100px [linename2 linename3];\ngrid-template-rows: minmax(100px, 1fr);\ngrid-template-rows: fit-content(40%);\ngrid-template-rows: repeat(3, 200px);\ngrid-template-rows: subgrid;\ngrid-template-rows: masonry;\n\n/* values */\ngrid-template-rows: 200px repeat(auto-fill, 100px) 300px;\ngrid-template-rows: minmax(100px, max-content)\n repeat(auto-fill, 200px) 20%;\ngrid-template-rows: [linename1] 100px [linename2]\n repeat(auto-fit, [linename3 linename4] 300px)\n 100px;\ngrid-template-rows: [linename1 linename2] 100px\n repeat(auto-fit, [linename1] 300px) [linename3];\n\n/* Global values */\ngrid-template-rows: inherit;\ngrid-template-rows: initial;\ngrid-template-rows: revert;\ngrid-template-rows: revert-layer;\ngrid-template-rows: unset;\n```\n\nThis property may be specified as:\n\n- either the keyword value `none`\n- or a `` value\n- or an `` value.\n\n### Values\n\n- `none`\n - : Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the {{cssxref(\"grid-auto-rows\")}} property.\n- `[linename]`\n - : A [``](/en-US/docs/Web/CSS/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.\n- {{cssxref(\"<length>\")}}\n - : Is a non-negative length.\n- {{cssxref(\"<percentage>\")}}\n - : Is a non-negative {{cssxref(\"percentage\", \"<percentage>\")}} value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto`.\n The intrinsic size contributions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would result in honoring the percentage.\n- {{cssxref(\"<flex_value>\",\"<flex>\")}}\n - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, )`).\n- {{cssxref(\"max-content\")}}\n - : Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"min-content\")}}\n - : Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"minmax\", \"minmax(min, max)\")}}\n - : Is a functional notation that defines a size range, greater than or equal to _min_, and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `` value sets the track's flex factor. It is invalid as a minimum.\n- `auto`\n\n - : As a maximum represents the largest {{cssxref(\"max-content\")}} size of the items in that track.\n\n As a minimum represents the largest minimum size of items in that track (specified by the {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}} of the items). This is often, though not always, the {{cssxref(\"min-content\")}} size.\n\n If used outside of {{cssxref(\"minmax\", \"minmax()\")}} notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.\n\n > **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref(\"align-content\")}} and {{cssxref(\"justify-content\")}} properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.\n\n- {{cssxref(\"fit-content_function\", \"fit-content( [ <length> | <percentage> ] )\")}}\n - : Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum.\n- {{cssxref(\"repeat\", \"repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )\")}}\n - : Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.\n- [`masonry`](/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout){{Experimental_Inline}}\n - : The masonry value indicates that this axis should be laid out according to the masonry algorithm.\n- [`subgrid`](/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)\n - : The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.\n\n> **Warning:** The `masonry` value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.\n>\n> The `subgrid` value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying grid row sizes\n\n#### HTML\n\n```html\n
    \n
    A
    \n
    B
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 100px;\n grid-template-rows: 30px 1fr;\n}\n\n#areaA {\n background-color: lime;\n}\n\n#areaB {\n background-color: yellow;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Specifying_grid_row_sizes\", \"40px\", \"100px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-areas\")}}, {{cssxref(\"grid-template\")}}\n- Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_tracks)_\n- Video tutorial: _[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)_\n- [Subgrid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)\n" }, { "property": "grid-template", "document": "---\ntitle: grid-template\nslug: Web/CSS/grid-template\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.grid-template\n---\n{{CSSRef}}\n\nThe **`grid-template`** CSS property is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) for defining {{glossary(\"grid column\", \"grid columns\")}}, {{glossary(\"grid rows\", \"rows\")}}, and {{glossary(\"grid areas\", \"areas\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-template.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`grid-template-areas`](/en-US/docs/Web/CSS/grid-template-areas)\n- [`grid-template-columns`](/en-US/docs/Web/CSS/grid-template-columns)\n- [`grid-template-rows`](/en-US/docs/Web/CSS/grid-template-rows)\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-template: none;\n\n/* grid-template-rows / grid-template-columns values */\ngrid-template: 100px 1fr / 50px 1fr;\ngrid-template: auto 1fr / auto 1fr auto;\ngrid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;\ngrid-template: fit-content(100px) / fit-content(40%);\n\n/* grid-template-areas grid-template-rows / grid-template-column values */\ngrid-template: \"a a a\"\n \"b b b\";\ngrid-template: \"a a a\" 20%\n \"b b b\" auto;\ngrid-template: [header-top] \"a a a\" [header-bottom]\n [main-top] \"b b b\" 1fr [main-bottom]\n / auto 1fr auto;\n\n/* Global values */\ngrid-template: inherit;\ngrid-template: initial;\ngrid-template: revert;\ngrid-template: revert-layer;\ngrid-template: unset;\n```\n\n### Values\n\n- `none`\n - : Is a keyword that sets all three longhand properties to `none`, meaning there is no explicit grid. There are no named grid areas. Rows and columns will be implicitly generated; their size will be determined by the {{cssxref(\"grid-auto-rows\")}} and {{cssxref(\"grid-auto-columns\")}} properties.\n- `<'grid-template-rows'> / <'grid-template-columns'>`\n - : Sets {{cssxref(\"grid-template-rows\")}} and {{cssxref(\"grid-template-columns\")}} to the specified values, and sets {{cssxref(\"grid-template-areas\")}} to `none`.\n- `[ ? ? ? ]+ [ / ]?`\n\n - : Sets {{cssxref(\"grid-template-areas\")}} to the strings listed, {{cssxref(\"grid-template-rows\")}} to the track sizes following each string (filling in `auto` for any missing sizes), and splicing in the named lines defined before/after each size, and {{cssxref(\"grid-template-columns\")}} to the track listing specified after the slash (or `none`, if not specified).\n\n > **Note:** The {{cssxref(\"repeat\", \"repeat()\")}} function isn't allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the \"ASCII art\".\n\n> **Note:** The {{cssxref(\"grid\")}} shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. Use `grid` (as opposed to `grid-template`) to prevent these values from cascading in separately.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Defining a grid template\n\n#### CSS\n\n```css\n#page {\n display: grid;\n width: 100%;\n height: 200px;\n grid-template: [header-left] \"head head\" 30px [header-right]\n [main-left] \"nav main\" 1fr [main-right]\n [footer-left] \"nav foot\" 30px [footer-right]\n / 120px 1fr;\n}\n\nheader {\n background-color: lime;\n grid-area: head;\n}\n\nnav {\n background-color: lightblue;\n grid-area: nav;\n}\n\nmain {\n background-color: yellow;\n grid-area: main;\n}\n\nfooter {\n background-color: red;\n grid-area: foot;\n}\n```\n\n#### HTML\n\n```html\n
    \n
    Header
    \n \n
    Main area
    \n
    Footer
    \n
    \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Defining_a_grid_template\", \"100%\", \"200px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template-rows\")}}, {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-areas\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_\n- Video tutorial: _[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)_\n" }, { "property": "grid", "document": "---\ntitle: grid\nslug: Web/CSS/grid\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.grid\n---\n{{CSSRef}}\n\nThe **`grid`** CSS property is a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) that sets all of the explicit and implicit grid properties in a single declaration.\n\nUsing `grid` you specify one axis using {{cssxref(\"grid-template-rows\")}} or {{cssxref(\"grid-template-columns\")}}, you then specify how content should auto-repeat in the other axis using the implicit grid properties: {{cssxref(\"grid-auto-rows\")}}, {{cssxref(\"grid-auto-columns\")}}, and {{cssxref(\"grid-auto-flow\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid.html\")}}\n\n> **Note:** The sub-properties you don't specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`grid-auto-columns`](/en-US/docs/Web/CSS/grid-auto-columns)\n- [`grid-auto-flow`](/en-US/docs/Web/CSS/grid-auto-flow)\n- [`grid-auto-rows`](/en-US/docs/Web/CSS/grid-auto-rows)\n- [`grid-template-areas`](/en-US/docs/Web/CSS/grid-template-areas)\n- [`grid-template-columns`](/en-US/docs/Web/CSS/grid-template-columns)\n- [`grid-template-rows`](/en-US/docs/Web/CSS/grid-template-rows)\n\n## Syntax\n\n```css\n/* <'grid-template'> values */\ngrid: none;\ngrid: \"a\" 100px \"b\" 1fr;\ngrid: [linename1] \"a\" 100px [linename2];\ngrid: \"a\" 200px \"b\" min-content;\ngrid: \"a\" minmax(100px, max-content) \"b\" 20%;\ngrid: 100px / 200px;\ngrid: minmax(400px, min-content) / repeat(auto-fill, 50px);\n\n/* <'grid-template-rows'> /\n [ auto-flow && dense? ] <'grid-auto-columns'>? values */\ngrid: 200px / auto-flow;\ngrid: 30% / auto-flow dense;\ngrid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;\ngrid: [line1] minmax(20em, max-content) / auto-flow dense 40%;\n\n/* [ auto-flow && dense? ] <'grid-auto-rows'>? /\n <'grid-template-columns'> values */\ngrid: auto-flow / 200px;\ngrid: auto-flow dense / 30%;\ngrid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);\ngrid: auto-flow dense 40% / [line1] minmax(20em, max-content);\n\n/* Global values */\ngrid: inherit;\ngrid: initial;\ngrid: revert;\ngrid: revert-layer;\ngrid: unset;\n```\n\n### Values\n\n- `<'grid-template'>`\n - : Defines the {{cssxref(\"grid-template\")}} including {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-rows\")}} and {{cssxref(\"grid-template-areas\")}}.\n- `<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?`\n\n - : Sets up an auto-flow by setting the row tracks explicitly via the {{cssxref(\"grid-template-rows\")}} property (and the {{cssxref(\"grid-template-columns\")}} property to `none`) and specifying how to auto-repeat the column tracks via {{cssxref(\"grid-auto-columns\")}} (and setting {{cssxref(\"grid-auto-rows\")}} to `auto`). {{cssxref(\"grid-auto-flow\")}} is also set to `column` accordingly, with `dense` if it's specified.\n\n All other `grid` sub-properties are reset to their initial values.\n\n- `[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`\n\n - : Sets up an auto-flow by setting the column tracks explicitly via the {{cssxref(\"grid-template-columns\")}} property (and the {{cssxref(\"grid-template-rows\")}} property to `none`) and specifying how to auto-repeat the row tracks via {{cssxref(\"grid-auto-rows\")}} (and setting {{cssxref(\"grid-auto-columns\")}} to `auto`). {{cssxref(\"grid-auto-flow\")}} is also set to `row` accordingly, with `dense` if it's specified.\n\n All other `grid` sub-properties are reset to their initial values.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Creating a grid layout\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#container {\n display: grid;\n grid: repeat(2, 60px) / auto-flow 80px;\n}\n\n#container > div {\n background-color: #8ca0ff;\n width: 50px;\n height: 50px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Creating_a_grid_layout\", \"100%\", 150)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template\")}}, {{cssxref(\"grid-template-rows\")}}, {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-areas\")}}, {{cssxref(\"grid-auto-columns\")}}, {{cssxref(\"grid-auto-rows\")}}, {{cssxref(\"grid-auto-flow\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_\n" }, { "property": "height", "document": "---\ntitle: height\nslug: Web/CSS/height\ntags:\n - CSS\n - CSS Property\n - Layout\n - Reference\n - Vertical\n - dimensions\n - height\n - recipe:css-property\n - size\nbrowser-compat: css.properties.height\n---\n{{CSSRef}}\n\nThe **`height`** CSS property specifies the height of an element. By default, the property defines the height of the [content area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area). If {{cssxref(\"box-sizing\")}} is set to `border-box`, however, it instead determines the height of the [border area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border_area).\n\n{{EmbedInteractiveExample(\"pages/css/height.html\")}}\n\nThe {{cssxref(\"min-height\")}} and {{cssxref(\"max-height\")}} properties override `height`.\n\n## Syntax\n\n```css\n/* values */\nheight: 120px;\nheight: 10em;\n\n/* value */\nheight: 75%;\n\n/* Keyword values */\nheight: max-content;\nheight: min-content;\nheight: fit-content(20em);\nheight: auto;\n\n/* Global values */\nheight: inherit;\nheight: initial;\nheight: revert;\nheight: revert-layer;\nheight: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Defines the height as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the height as a percentage of the containing block's height.\n- `auto`\n - : The browser will calculate and select a height for the specified element.\n- `max-content`\n - : The intrinsic preferred height.\n- `min-content`\n - : The intrinsic minimum height.\n- `fit-content`\n - : Box will use the available space, but never more than `max-content`\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the fit-content formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, ))`\n- {{cssxref(\"clamp\", \"clamp()\")}}\n - : Enables selecting a middle value within a range of values between a defined minimum and maximum\n\n## Accessibility concerns\n\nEnsure that elements set with a `height` aren't truncated and/or don't obscure other content when the page is zoomed to increase text size.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting height using pixels and percentages\n\n#### HTML\n\n```html\n
    I'm 50 pixels tall.
    \n
    I'm 25 pixels tall.
    \n
    \n
    \n I'm half the height of my parent.\n
    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n width: 250px;\n margin-bottom: 5px;\n border: 2px solid blue;\n}\n\n#taller {\n height: 50px;\n}\n\n#shorter {\n height: 25px;\n}\n\n#parent {\n height: 100px;\n}\n\n#child {\n height: 50%;\n width: 75%;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_height_using_pixels_and_percentages', 'auto', 240)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [The box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"width\")}}\n- {{cssxref(\"box-sizing\")}}\n- {{cssxref(\"min-height\")}}, {{cssxref(\"max-height\")}}\n- The mapped logical properties: {{cssxref(\"block-size\")}}, {{cssxref(\"inline-size\")}}\n" }, { "property": "hex-color", "document": "---\ntitle: \nslug: Web/CSS/hex-color\ntags:\n - Reference\n - CSS\n - CSS Data Type\nbrowser-compat: css.types.color.rgb_hexadecimal_notation\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a notation for describing the _hexadecimal color syntax_ of an [sRGB](/en-US/docs/Glossary/RGB) color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency. It can be used everywhere a [``](/en-US/docs/Web/CSS/color_value) type is allowed.\n\nA `` value can be used everywhere where a [``](/en-US/docs/Web/CSS/color_value) can be used.\n\n## Syntax\n\n```\n#RGB // The three-value syntax\n#RGBA // The four-value syntax\n#RRGGBB // The six-value syntax\n#RRGGBBAA // The eight-value syntax\n```\n\n### Value\n\n- `R` or `RR`\n - : The _red_ component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `1` means `11`.\n- `G` or `GG`\n - : The _green_ component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `c` means `cc`.\n- `B` or `BB`\n - : The _blue_ component of the color, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `9` means `99`.\n- `A` or `AA` {{optional_inline}}\n - : The _alpha_ component of the color, indicating its transparency, as a case-insensitive hexadecimal number between `0` and `ff` (255)). If there is only one number, it is duplicated: `e` means `ee`. `0` represents a fully transparent color, and `ff`a fully opaque one.\n\n> **Note:** The syntax is case-insensitive `#00ff00` is the same as `#00FF00`.\n\n## Examples\n\n```html\n/* Hexadecimal syntax for a fully opaque hot pink */\n#f09
    \n#F09
    \n#ff0099
    \n#FF0099
    \n```\n\n```css\ndiv {width: 40px; height: 40px;}\n.c1 { background: #f09}\n.c2 { background: #F09}\n.c3 { background: #ff0099}\n.c4 { background: #FF0099}\n```\n\n{{EmbedLiveSample(\"Examples\", \"100%\", \"450\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [``](/en-US/docs/Web/CSS/color_value) the data type these values belong to.\n- [`rgb()`](/en-US/docs/Web/CSS/color_value/rgb), the function allowing to set the three components of the color, as well as its transparency, using decimal values.\n" }, { "property": "hanging-punctuation", "document": "---\ntitle: hanging-punctuation\nslug: Web/CSS/hanging-punctuation\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.hanging-punctuation\n---\n{{CSSRef}}\n\nThe **`hanging-punctuation`** [CSS](/en-US/docs/Web/CSS) property specifies whether a punctuation mark should hang at the start or end of a line of text. Hanging punctuation may be placed outside the line box.\n\n```css\n/* Keyword values */\nhanging-punctuation: none;\nhanging-punctuation: first;\nhanging-punctuation: last;\nhanging-punctuation: force-end;\nhanging-punctuation: allow-end;\n\n/* Two keywords */\nhanging-punctuation: first force-end;\nhanging-punctuation: first allow-end;\nhanging-punctuation: first last;\nhanging-punctuation: last force-end;\nhanging-punctuation: last allow-end;\n\n/* Three keywords */\nhanging-punctuation: first force-end last;\nhanging-punctuation: first allow-end last;\n\n/* Global values */\nhanging-punctuation: inherit;\nhanging-punctuation: initial;\nhanging-punctuation: revert;\nhanging-punctuation: revert-layer;\nhanging-punctuation: unset;\n```\n\n## Syntax\n\nThe `hanging-punctuation` property may be specified with one, two, or three space-separated values.\n\n- **One-value** syntax uses any one of the keyword values in the list below.\n- **Two-value** syntax uses one of the following:\n\n - `first` together with any one of `last`, `allow-end`, or `force-end`\n - `last` together with any one of `first`, `allow-end`, or `force-end`\n\n- **Three-value** syntax uses one of the following:\n\n - `first`, `allow-end`, and `last`\n - `first`, `force-end`, and `last`\n\n### Values\n\n- `none`\n - : No character hangs.\n- `first`\n - : An opening bracket or quote at the start of the first formatted line of an element hangs.\n- `last`\n - : A closing bracket or quote at the end of the last formatted line of an element hangs.\n- `force-end`\n - : A stop or comma at the end of a line hangs.\n- `allow-end`\n - : A stop or comma at the end of a line hangs if it does not otherwise fit prior to justification.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting opening and closing quotes to hang\n\n#### HTML\n\n```html\n

    \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.\"

    \n```\n\n#### CSS\n\n```css\np {\n hanging-punctuation: first last;\n margin: .5rem;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_opening_and_closing_quotes_to_hang\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref('text-indent')}}\n- [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/)\n" }, { "property": "hyphenate-character", "document": "---\ntitle: hyphenate-character\nslug: Web/CSS/hyphenate-character\ntags:\n - CSS\n - CSS Property\n - Reference\nbrowser-compat: css.properties.hyphenate-character\n---\n{{CSSRef}}\n\nThe **`hyphenate-character`** [CSS](/en-US/docs/Web/CSS) property sets the character (or string) used at the end of a line before a hyphenation break.\n\nBoth automatic and soft hyphens are displayed according to the specified hyphenate-character value.\n\n## Syntax\n\nThe value either sets the string to use instead of a hyphen, or indicates that the user agent should select an appropriate string based on the current typographic conventions (default).\n\n```css\nhyphenate-character: ;\nhyphenate-character: auto;\n```\n\n### Values\n\n- ``\n - : The {{cssxref(\"<string>\")}} to use at the end of the line before a hyphenation break.\n The user agent may truncate this value if too many characters are used.\n- `auto`\n - : The user-agent selects an appropriate string based on the content language's typographic conventions.\n This is the default property value, and only needs to be explicitly set in order to override a different inherited value.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\nThis example shows two identical blocks of text that have {{cssxref(\"hyphens\")}} set to ensure that they break wherever needed, and on soft hyphen breaks (created using `­`).\nThe first block has the value of the hyphen changed to the equals symbol (\"`=`\").\nThe second block has no hyphenate-character set, which is equivalent to `hyphenate-character: auto` for user agents that support this property.\n\n#### HTML\n\n```html\n
    \n
    hyphenate-character: \"=\"
    \n
    Superc­alifragilisticexpialidocious
    \n
    hyphenate-character is not set
    \n
    Superc­alifragilisticexpialidocious
    \n
    \n```\n\n#### CSS\n\n```css\ndd {\n width: 90px;\n border: 1px solid black;\n hyphens: auto;\n}\n\ndd#string {\n -webkit-hyphenate-character: \"=\";\n hyphenate-character: \"=\";\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", 350)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"hyphens\")}}, {{cssxref(\"overflow-wrap\")}}.\n" }, { "property": "hyphens", "document": "---\ntitle: hyphens\nslug: Web/CSS/hyphens\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.hyphens\n---\n{{CSSRef}}\n\nThe **`hyphens`** [CSS](/en-US/docs/Web/CSS) property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.\n\n{{EmbedInteractiveExample(\"pages/css/hyphens.html\")}}\n\n> **Note:** In the above demo, the string \"An extraordinarily long English word!\" contains the hidden `­` (soft hyphen) character: `An extra­ordinarily long English word!`. This character is used to indicate a potential place to insert a hyphen when `hyphens: manual;` is specified.\n\nHyphenation rules are language-specific. In HTML, the language is determined by the [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) attribute, and browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available. In XML, the [`xml:lang`](/en-US/docs/Web/SVG/Attribute/xml:lang) attribute must be used.\n\n> **Note:** The rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.\n\nIf supported, {{cssxref(\"hyphenate-character\")}} may be used to specify an alternative hyphenation character to use at the end of the line being broken.\n\n## Syntax\n\n```css\n/* Keyword values */\nhyphens: none;\nhyphens: manual;\nhyphens: auto;\n\n/* Global values */\nhyphens: inherit;\nhyphens: initial;\nhyphens: revert;\nhyphens: revert-layer;\nhyphens: unset;\n```\n\nThe `hyphens` property is specified as a single keyword value chosen from the list below.\n\n### Values\n\n- `none`\n - : Words are not broken at line breaks, even if characters inside the words suggest line break points. Lines will only wrap at whitespace.\n- `manual`\n - : Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See [Suggesting line break opportunities](#suggesting_line_break_opportunities) below for details.\n- `auto`\n - : The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see [Suggesting line break opportunities](#suggesting_line_break_opportunities) below) will override automatic break point selection when present.\n\n> **Note:** The `auto` setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the `lang` HTML attribute to guarantee that automatic hyphenation is applied in that language.\n\n## Suggesting line break opportunities\n\nThere are two Unicode characters used to manually specify potential line break points within text:\n\n- U+2010 (HYPHEN)\n - : The \"hard\" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.\n- U+00AD (SHY)\n - : An invisible, \"**s**oft\" **hy**phen. This character is not rendered visibly; instead, it marks a place where the browser should break the word if hyphenation is necessary. In HTML, use `­` to insert a soft hyphen.\n\n> **Note:** When the HTML [``](/en-US/docs/Web/HTML/Element/wbr) element leads to a line break, no hyphen is added.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying text hyphenation\n\nThis example uses three classes, one for each possible configuration of the `hyphens` property.\n\n#### HTML\n\n```html\n
    \n
    none: no hyphen; overflow if needed
    \n
    An extreme­ly long English word
    \n
    manual: hyphen only at &hyphen; or &shy; (if needed)
    \n
    An extreme­ly long English word
    \n
    auto: hyphens where the algorithm decides (if needed)
    \n
    An extreme­ly long English word
    \n
    \n```\n\n#### CSS\n\n```css\ndd {\n width: 55px;\n border: 1px solid black;\n }\ndd.none {\n -webkit-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n}\ndd.manual {\n -webkit-hyphens: manual;\n -ms-hyphens: manual;\n hyphens: manual;\n}\ndd.auto {\n -webkit-hyphens: auto;\n -ms-hyphens: auto;\n hyphens: auto;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Specifying_text_hyphenation\", \"100%\", 490)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"content\")}}\n- {{cssxref(\"overflow-wrap\")}} (formerly `word-wrap`)\n- {{cssxref(\"word-break\")}}\n- [Guide to wrapping and breaking text](/en-US/docs/Web/CSS/CSS_Text/Wrapping_text)\n" }, { "property": "grid-auto-rows", "document": "---\ntitle: grid-auto-rows\nslug: Web/CSS/grid-auto-rows\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\nbrowser-compat: css.properties.grid-auto-rows\n---\n{{CSSRef}}\n\nThe **`grid-auto-rows`** CSS property specifies the size of an implicitly-created grid row {{glossary(\"grid tracks\", \"track\")}} or pattern of tracks.\n\n{{EmbedInteractiveExample(\"pages/css/grid-auto-rows.html\")}}\n\nIf a grid item is positioned into a row that is not explicitly sized by {{cssxref(\"grid-template-rows\")}}, implicit {{glossary(\"grid\", \"grid\")}} tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.\n\n## Syntax\n\n```css\n/* Keyword values */\ngrid-auto-rows: min-content;\ngrid-auto-rows: max-content;\ngrid-auto-rows: auto;\n\n/* values */\ngrid-auto-rows: 100px;\ngrid-auto-rows: 20cm;\ngrid-auto-rows: 50vmax;\n\n/* values */\ngrid-auto-rows: 10%;\ngrid-auto-rows: 33.3%;\n\n/* values */\ngrid-auto-rows: 0.5fr;\ngrid-auto-rows: 3fr;\n\n/* minmax() values */\ngrid-auto-rows: minmax(100px, auto);\ngrid-auto-rows: minmax(max-content, 2fr);\ngrid-auto-rows: minmax(20%, 80vmax);\n\n/* multiple track-size values */\ngrid-auto-rows: min-content max-content auto;\ngrid-auto-rows: 100px 150px 390px;\ngrid-auto-rows: 10% 33.3%;\ngrid-auto-rows: 0.5fr 3fr 1fr;\ngrid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);\ngrid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);\n\n/* Global values */\ngrid-auto-rows: inherit;\ngrid-auto-rows: initial;\ngrid-auto-rows: revert;\ngrid-auto-rows: revert-layer;\ngrid-auto-rows: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Is a non-negative length.\n- {{cssxref(\"<percentage>\")}}\n - : Is a non-negative {{cssxref(\"percentage\", \"<percentage>\")}} value relative to the block size of the grid container. If the block size of the grid container is indefinite, the percentage value is treated like `auto`.\n- {{cssxref(\"<flex>\")}}\n\n - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor.\n\n When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, )`).\n\n- {{cssxref(\"max-content\")}}\n - : Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"min-content\")}}\n - : Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"minmax\", \"minmax(min, max)\")}}\n - : Is a functional notation that defines a size range greater than or equal to _min_ and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `` value sets the track's flex factor. As a minimum, it is treated as zero (or minimal content, if the grid container is sized under a minimal content constraint).\n- {{cssxref(\"fit-content_function\", \"fit-content( [ <length> | <percentage> ] )\")}}\n - : Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum.\n- `auto`\n\n - : Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}}) of the grid items occupying the grid track.\n\n Note: `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref(\"align-content\")}} and {{cssxref(\"justify-content\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid row size\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n width: 200px;\n display: grid;\n grid-template-areas: \"a a\";\n gap: 10px;\n grid-auto-rows: 100px;\n}\n\n#grid > div {\n background-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_row_size\", \"210px\", \"210px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-auto-columns\")}}, {{cssxref(\"grid-auto-flow\")}}, {{cssxref(\"grid\")}}\n- Grid Layout Guide: _[Auto-placement in grid layout - sizing rows in the implicit grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid)_\n- Video tutorial: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_\n" }, { "property": "id_selectors", "document": "---\ntitle: ID selectors\nslug: Web/CSS/ID_selectors\ntags:\n - CSS\n - Reference\n - Selector\n - Selectors\nbrowser-compat: css.selectors.id\n---\n{{CSSRef}}\n\nThe CSS **ID selector** matches an element based on the value of the element's {{htmlattrxref(\"id\")}} attribute. In order for the element to be selected, its `id` attribute must match exactly the value given in the selector.\n\n```css\n/* The element with id=\"demo\" */\n#demo {\n border: red 2px solid;\n}\n```\n\n## Syntax\n\n```css\n#id_value { style properties }\n```\n\nNote that syntactically (but not specificity-wise), this is equivalent to the following {{Cssxref(\"Attribute_selectors\", \"attribute selector\")}}:\n\n```css\n[id=id_value] { style properties }\n```\n\n## Examples\n\n### CSS\n\n```css\n#identified {\n background-color: skyblue;\n}\n```\n\n### HTML\n\n```html\n
    This div has a special ID on it!
    \n
    This is just a regular div.
    \n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", '100%', 50)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Selectors](/en-US/docs/Web/CSS/CSS_Selectors)\n- [Learn CSS: Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors)\n" }, { "property": "grid-column", "document": "---\ntitle: grid-column\nslug: Web/CSS/grid-column\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.grid-column\n---\n{{CSSRef}}\n\nThe **`grid-column`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) specifies a grid item's size and location within a {{glossary(\"grid column\")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its {{glossary(\"grid areas\", \"grid area\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-column.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`grid-column-end`](/en-US/docs/Web/CSS/grid-column-end)\n- [`grid-column-start`](/en-US/docs/Web/CSS/grid-column-start)\n\n## Syntax\n\n```css\ngrid-column: auto;\n\n/* with line numbers */\ngrid-column: 1;\ngrid-column: 1 / 3;\ngrid-column: 1 / span 2;\n\n/* with line names */\ngrid-column: main-start;\ngrid-column: main-start / main-end;\n\n/* Global values */\ngrid-column: inherit;\ngrid-column: initial;\ngrid-column: revert;\ngrid-column: revert-layer;\ngrid-column: unset;\n```\n\nThis property is specified as one or two `` values.\n\nIf two `` values are given they are separated by \"/\". The `grid-column-start` longhand is set to the value before the slash, and the `grid-column-end` longhand is set to the value after the slash.\n\nEach `` value can be specified as:\n\n- either the `auto` keyword\n- or a `` value\n- or an `` value\n- or both `` and ``, separated by a space\n- or the keyword `span` together with either a `` or an `` or both.\n\n### Values\n\n- `auto`\n - : Is a keyword indicating that the property contributes nothing to the grid item's placement, indicating auto-placement, an automatic span, or a default span of `1`.\n- ``\n\n - : If there is a named line with the name '\\-start'/'\\-end', it contributes the first such line to the grid item's placement.\n\n > **Note:** Named grid areas automatically generate implicit named lines of this form, so specifying `grid-column: foo;` will choose the start/end edge of that named grid area (unless another line named `foo-start`/`foo-end` was explicitly specified before it).\n\n Otherwise, this is treated as if the integer `1` had been specified along with the ``.\n\n- ` && ?`\n\n - : Contributes the nth grid line to the grid item's placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.\n\n An {{cssxref(\"integer\")}} value of `0` is invalid.\n\n- `span && [ || ]`\n\n - : Contributes a grid span to the grid item's placement such that the corresponding edge of the grid item's grid area is n lines from the opposite edge.\n\n If a name is given as a \\, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.\n\n If the \\ is omitted, it defaults to `1`. Negative integers or 0 are invalid.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting grid column size and location\n\n#### HTML\n\n```html\n
    \n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 100px;\n grid-template-columns: repeat(6, 1fr);\n grid-template-rows: 100px;\n}\n\n#item1 {\n background-color: lime;\n}\n\n#item2 {\n background-color: yellow;\n grid-column: 2 / 4;\n}\n\n#item3 {\n background-color: blue;\n grid-column: span 2 / 7;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_grid_column_size_and_location\", \"100%\", \"100px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Video tutorial: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_\n" }, { "property": "ident", "document": "---\ntitle: ident\nslug: Web/CSS/ident\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Draft\n - Layout\n - Reference\n - Web\n - ident\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes an arbitrary string used as an {{glossary(\"identifier\")}}.\n\n## Syntax\n\nThe syntax of `` is similar to CSS identifiers (such as property names), except that it is [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). It consists of one or more characters, where characters can be any of the following:\n\n- any alphabetical character (`A` to `Z`, or `a` to `z`),\n- any decimal digit (`0` to `9`),\n- a hyphen (`-`),\n- an underscore (`_`),\n- an escaped character (preceded by a backslash, `\\`),\n- a [Unicode](https://en.wikipedia.org/wiki/Unicode) character (in the format of a backslash, `\\`, followed by one to six hexadecimal digits, representing its Unicode code point)\n\nNote that `id1`, `Id1`, `iD1` and `ID1` are all different identifiers as they are [case-sensitive](https://en.wikipedia.org/wiki/Case_sensitivity). On the other hand, as there are several ways to escape a character, `toto\\?` and `toto\\3F` are the same identifiers.\n\n## Examples\n\n### Valid identifiers\n\n```plain example-good\nnono79 A mix of alphanumeric characters and numbers\nground-level A mix of alphanumeric characters and a dash\n-test A dash followed by alphanumeric characters\n--toto A custom-property like identifier\n_internal An underscore followed by alphanumeric characters\n\\22 toto A Unicode character followed by a sequence of alphanumeric characters\nbili\\.bob A correctly escaped period\n```\n\n### Invalid identifiers\n\n```plain example-bad\n34rem It must not start with a decimal digit.\n-12rad It must not start with a dash followed by a decimal digit.\nbili.bob Only alphanumeric characters, _, and - needn't be escaped.\n'bilibob' This would be a {{CSSxRef(\"<string>\")}}.\n\"bilibob\" This would be a {{CSSxRef(\"<string>\")}}.\n```\n\n## Specifications\n\n| Specification | Status | Comment |\n| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |\n| {{SpecName('CSS4 Values', '#css-identifier', '<ident>')}} | {{Spec2('CSS4 Values')}} | |\n| {{SpecName('CSS3 Values', '#css-identifier', '<ident>')}} | {{Spec2('CSS3 Values')}} | |\n\n## Browser compatibility\n\n_As this type is not a real type but a convenience type used to simplify the definition of other CSS syntax._\n\n## See also\n\n- {{CSSxRef(\"<custom-ident>\")}} – A restricted subset of `` values excluding CSS-wide keywords, {{CSSxRef(\"--*\", \"custom properties\")}} and other per-property values.\n" }, { "property": "image-orientation", "document": "---\ntitle: image-orientation\nslug: Web/CSS/image-orientation\ntags:\n - CSS\n - Reference\n - image-orientation\n - recipe:css-property\nbrowser-compat: css.properties.image-orientation\n---\nThe **`image-orientation`** [CSS](/en-US/docs/Web/CSS) property specifies a layout-independent correction to the orientation of an image.\n\n```css\n/* keyword values */\nimage-orientation: none;\nimage-orientation: from-image; /* Use EXIF data from the image */\n\n/* Global values */\nimage-orientation: inherit;\nimage-orientation: initial;\nimage-orientation: revert;\nimage-orientation: revert-layer;\nimage-orientation: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : Does not apply any additional image rotation; the image is oriented as encoded or as other CSS property values dictate.\n- `from-image`\n - : Default initial value. The {{interwiki(\"wikipedia\", \"EXIF\")}} information contained in the image is used to rotate the image appropriately.\n\n## Description\n\nThis property is intended _only_ to be used for the purpose of correcting the orientation of images which were shot with the camera rotated. It should _not_ be used for arbitrary rotations. For any purpose other than correcting an image's orientation due to how it was shot or scanned, use a {{cssxref(\"transform\")}} property with the `rotate` keyword to specify rotation. This includes any user-directed changes to the orientation of the image, or changes required for printing in portrait versus landscape orientation.\n\nIf used in conjunction with other CSS properties, such as a {{cssxref(\"<transform-function>\")}}, any `image-orientation` rotation is applied before any other transformations.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Orienting image from image data\n\nThe following image has been rotated through 180 degrees, and the `image-orientation` property is used to correct its orientation based on the EXIF data in the image. By changing the `image-orientation` to `none` you can see the effect of the property.\n\n#### CSS\n\n```css\n#image {\n image-orientation: from-image; /* Can be changed in the live sample */\n}\n```\n\n```css hidden\nimg {\n margin: .5rem 0;\n}\n\nlabel {\n font-family: monospace;\n}\n```\n\n```html hidden\n\"Orientation\n\n
    \n \n \n
    \n\n
    \n \n \n
    \n```\n\n```js hidden\ndocument.addEventListener('change', evt => {\n document.getElementById(\"image\").style.imageOrientation = evt.target.value;\n});\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Orienting_image_from_image_data\", \"100%\", 900)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other image-related CSS properties: {{cssxref(\"object-fit\")}}, {{cssxref(\"object-position\")}}, {{cssxref(\"image-orientation\")}}, {{cssxref(\"image-rendering\")}}, {{cssxref(\"image-resolution\")}}.\n- {{cssxref(\"transform\")}} and {{cssxref(\"rotate\")}}\n\n{{CSSRef}}\n" }, { "property": "image-rendering", "document": "---\ntitle: image-rendering\nslug: Web/CSS/image-rendering\ntags:\n - CSS\n - CSS Images\n - CSS Property\n - Reference\n - image-rendering\n - recipe:css-property\nbrowser-compat: css.properties.image-rendering\n---\n{{CSSRef}}\n\nThe **`image-rendering`** [CSS](/en-US/docs/Web/CSS) property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.\n\n{{EmbedInteractiveExample(\"pages/css/image-rendering.html\")}}\n\nThe {{Glossary(\"user agent\")}} will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). For example, if the natural size of an image is `100×100px`_,_ but its actual dimensions are `200×200px` (or `50×50px`), then the image will be upscaled (or downscaled) using the algorithm specified by `image-rendering`. This property has no effect on non-scaled images.\n\n## Syntax\n\n```css\n/* Keyword values */\nimage-rendering: auto;\nimage-rendering: crisp-edges;\nimage-rendering: pixelated;\n\n/* Global values */\nimage-rendering: inherit;\nimage-rendering: initial;\nimage-rendering: revert;\nimage-rendering: revert-layer;\nimage-rendering: unset;\n```\n\n### Values\n\n- `auto`\n - : The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses _bilinear_ resampling (high quality).\n- `smooth` {{Experimental_Inline}}\n - : The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that \"smooth\" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.\n- `high-quality` {{Experimental_Inline}}\n - : Identical to `smooth`, but with a preference for higher-quality scaling. If system resources are constrained, images with `high-quality` should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.\n- `crisp-edges`\n - : The image is scaled with the nearest-neighbor algorithm.\n- `pixelated`\n - : Using the nearest-neighbor algorithm, the image is scaled up to the next integer multiple that is greater than or equal to its original size, then scaled down to the target size, as for `smooth`. When scaling up to integer multiples of the original size, this will have the same effect as `crisp-edges`.\n\n> **Note:** The values `optimizeQuality` and `optimizeSpeed` present in an early draft (and coming from its SVG counterpart {{SVGAttr(\"image-rendering\")}}) are defined as synonyms for the `smooth` and `pixelated` values respectively.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting image scaling algorithms\n\nIn practical use, the `pixelated` and `crisp-edges` rules can be combined to provide some fallback for each other. (Just prepend the actual rules with the fallback.) The [Canvas API](/en-US/docs/Web/API/Canvas_API) can provide a [fallback solution for `pixelated`](http://phrogz.net/tmp/canvas_image_zoom.html) through manual image data manipulation or with [`imageSmoothingEnabled`](/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).\n\n```html hidden\n
    \n \"auto\"\n \"pixelated\"\n \"crisp-edges\"\n
    \n```\n\n```css hidden\nimg {\n height: 200px;\n}\n```\n\n#### CSS\n\n```css\n.auto {\n image-rendering: auto;\n}\n\n.pixelated {\n -ms-interpolation-mode: nearest-neighbor;\n image-rendering: pixelated;\n}\n\n.crisp-edges {\n image-rendering: -webkit-optimize-contrast;\n image-rendering: crisp-edges;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_image_scaling_algorithms')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n> **Note:** Although `crisp-edges` is supposed to use a pixel-art scaler like in the specification example, in practice no browsers (as of January 2020) do so. [In Firefox](https://searchfox.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727), `crisp-edges` is interpreted as nearest-neighbor, `pixelated` is not supported, and `auto` is interpolated as trilinear or linear.\n>\n> For behavior on Chromium and Safari (WebKit), see the [`GetInterpolationQuality`](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160) function and [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324) respectively.\n\n## See also\n\n- Other image-related CSS properties: {{cssxref(\"object-fit\")}}, {{cssxref(\"object-position\")}}, {{cssxref(\"image-orientation\")}}, {{cssxref(\"image-rendering\")}}, {{cssxref(\"image-resolution\")}}.\n" }, { "property": "image-resolution", "document": "---\ntitle: image-resolution\nslug: Web/CSS/image-resolution\ntags:\n - CSS\n - CSS Images\n - CSS Property\n - Experimental\n - Reference\n - image-resolution\nbrowser-compat: css.properties.image-resolution\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`image-resolution`** [CSS](/en-US/docs/Web/CSS) property specifies the intrinsic resolution of all raster images used in or on the element. It affects content images such as replaced elements and generated content, and decorative images such as `background-image` images.\n\nThe image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the `image-resolution` property allows a different resolution to be specified.\n\n## Syntax\n\n```css\nimage-resolution: from-image;\nimage-resolution: 300dpi;\nimage-resolution: from-image 300dpi;\nimage-resolution: 300dpi snap;\n\n/* Global values */\nimage-resolution: inherit;\nimage-resolution: initial;\nimage-resolution: revert;\nimage-resolution: revert-layer;\nimage-resolution: unset;\n```\n\n### Values\n\n- `{{cssxref(\"<resolution>\")}}`\n - : Specifies the intrinsic resolution explicitly.\n- `from-image`\n - : Uses the intrinsic resolution as specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to `1dppx` (1 image pixel per CSS px unit).\n- `snap`\n - : If the `snap` keyword is provided, the computed resolution is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image's native resolution similarly adjusted.\n\n> **Note:** As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a high dpi for print\n\nWhen printing the document, use a higher resolution.\n\n```css\n@media print {\n .myimage {\n image-resolution: 300dpi;\n }\n}\n```\n\n### Use image resolution with fallback\n\nUses the resolution from the image. If the image does not have a resolution, use 300dpi rather than the default 1dppx.\n\n```css\n.myimage {\n image-resolution: from-image 300dpi;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other image-related CSS properties: {{cssxref(\"object-fit\")}}, {{cssxref(\"object-position\")}}, {{cssxref(\"image-orientation\")}}, {{cssxref(\"image-rendering\")}}.\n- [Chromium bug: 1086473](https://bugs.chromium.org/p/chromium/issues/detail?id=1086473).\n" }, { "property": "image", "document": "---\ntitle: \nslug: Web/CSS/image\ntags:\n - CSS\n - CSS Data Type\n - CSS Images\n - Data Type\n - Graphics\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.image\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a two-dimensional image.\n\n## Syntax\n\nThe `` data type can be represented with any of the following:\n\n- An image denoted by the {{CSSxRef(\"url\", \"url()\")}} data type\n- A {{CSSxRef(\"<gradient>\")}} data type\n- A part of the webpage, defined by the {{CSSxRef(\"element\",\"element()\")}} function\n- An image, image fragment or solid patch of color, defined by the {{CSSxRef(\"image/image\",\"image()\")}} function\n- A blending of two or more images defined by the {{CSSxRef(\"cross-fade\",\"cross-fade()\")}} function.\n- A selection of images chosen based on resolution defined by the {{CSSxRef(\"image/image-set\",\"image-set()\")}} function.\n\n## Description\n\nCSS can handle the following kinds of images:\n\n- Images with _intrinsic dimensions_ (a natural size), like a JPEG, PNG, or other [raster format](https://en.wikipedia.org/wiki/Raster_graphics).\n- Images with _multiple intrinsic dimensions_, existing in multiple versions inside a single file, like some .ico formats. (In this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.)\n- Images with no intrinsic dimensions but with _an intrinsic aspect ratio_ between its width and height, like an SVG or other [vector format](https://en.wikipedia.org/wiki/Vector_graphics).\n- Images with _neither intrinsic dimensions, nor an intrinsic aspect ratio_, like a CSS gradient.\n\nCSS determines an object's _concrete size_ using (1) its _intrinsic dimensions_; (2) its _specified size_, defined by CSS properties like {{CSSxRef(\"width\")}}, {{CSSxRef(\"height\")}}, or {{CSSxRef(\"background-size\")}}; and (3) its _default size_, determined by the kind of property the image is used with:\n\n| Kind of Object (CSS Property) | Default object size |\n| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n| {{CSSxRef(\"background-image\")}} | The size of the element's background positioning area |\n| {{CSSxRef(\"list-style-image\")}} | The size of a `1em` character |\n| {{CSSxRef(\"border-image-source\")}} | The size of the element's border image area |\n| {{CSSxRef(\"cursor\")}} | The browser-defined size matching the usual cursor size on the client's system |\n| {{CSSxRef(\"mask-image\")}} | ? |\n| {{CSSxRef(\"shape-outside\")}} | ? |\n| {{CSSxRef(\"mask-border-source\")}} | ? |\n| {{CSSxRef(\"symbols\", \"symbols()\")}} for @counter-style | At risk feature. If supported, the browser-defined size matching the usual cursor size on the client's system |\n| {{CSSxRef(\"content\")}} for a pseudo-element ({{CSSxRef(\"::after\")}}/{{CSSxRef(\"::before\")}}) | A 300px × 150px rectangle |\n\nThe concrete object size is calculated using the following algorithm:\n\n- If the specified size defines _both the width and the height_, these values are used as the concrete object size.\n- If the specified size defines _only the width or only the height_, the missing value is determined using the intrinsic ratio, if there is any, the intrinsic dimensions if the specified value matches, or the default object size for that missing value.\n- If the specified size defines _neither the width nor the height_, the concrete object size is calculated so that it matches the intrinsic aspect ratio of the image but without exceeding the default object size in any dimension. If the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used; if this object has none, the missing width or height are taken from the default object size.\n\n> **Note:** Not all browsers support every type of image on every property. See the [browser compatibility section](#browser_compatibility) for details.\n\n## Accessibility concerns\n\nBrowsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.\n\n- [MDN Understanding WCAG, Guideline 1.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)\n- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)\n\n## Examples\n\n### Valid images\n\n```css example-good\nurl(test.jpg) /* A , as long as test.jpg is an actual image */\nlinear-gradient(blue, red) /* A */\nelement(#realid) /* A part of the webpage, referenced with the element() function,\n if \"realid\" is an existing ID on the page */\nimage(ltr 'arrow.png#xywh=0,0,16,16', red)\n /* A section 16x16 section of , starting from the top, left of the original\n image as long as arrow.png is a supported image, otherwise a solid\n red swatch. If language is rtl, the image will be horizontally flipped. */\ncross-fade(20% url(twenty.png), url(eighty.png))\n /* cross faded images, with twenty being 20% opaque\n and eighty being 80% opaque. */\nimage-set('test.jpg' 1x, 'test-2x.jpg' 2x)\n /* a selection of images with varying resolutions */\n```\n\n### Invalid images\n\n```css example-bad\nnourl.jpg /* An image file must be defined using the url() function. */\nurl(report.pdf) /* A file pointed to by the url() function must be an image. */\nelement(#fakeid) /* An element ID must be an existing ID on the page. */\nimage(z.jpg#xy=0,0) /* The spatial fragment must be written in the format of xywh=#,#,#,# */\nimage-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"<gradient>\")}}\n- {{CSSxRef(\"element\",\"element()\")}}\n- {{CSSxRef(\"image/image\", \"image()\")}}\n- {{CSSxRef(\"image/image-set\",\"image-set()\")}}\n- {{CSSxRef(\"cross-fade\",\"cross-fade()\")}}\n" }, { "property": "ime-mode", "document": "---\ntitle: ime-mode\nslug: Web/CSS/ime-mode\ntags:\n - CSS\n - CSS Property\n - Deprecated\n - recipe:css-property\nbrowser-compat: css.properties.ime-mode\n---\n{{CSSRef}} {{deprecated_header}}\n\nThe **`ime-mode`** [CSS](/en-US/docs/Web/CSS) property controls the state of the input method editor (IME) for text fields. This property is obsolete.\n\n```css\n/* Keyword values */\nime-mode: auto;\nime-mode: normal;\nime-mode: active;\nime-mode: inactive;\nime-mode: disabled;\n\n/* Global values */\nime-mode: inherit;\nime-mode: initial;\nime-mode: revert;\nime-mode: revert-layer;\nime-mode: unset;\n```\n\nThe `ime-mode` property is only partially and inconsistently implemented in browsers. It was introduced by Microsoft with Internet Explorer 5 as a proprietary extension: {{spec(\"https://msdn.microsoft.com/library/ms530767(VS.85).aspx\",\"-ms-ime-mode Attribute | imeMode Property\")}}.\n\n> **Note:** In general, it's not appropriate for a public web site to change the IME mode. This property should only be used for private web applications or to undo the property if it was previously set by legacy code.\n\n## Syntax\n\nThe `ime-mode` property is specified using one of the keyword values listed below.\n\n### Values\n\n- `auto`\n - : No change is made to the current input method editor state. This is the default.\n- `normal`\n - : The IME state should be normal; this value can be used in a user style sheet to override the page's setting. _This value is not supported by Internet Explorer._\n- `active`\n - : The input method editor is initially active; text entry is performed through it unless the user specifically dismisses it. _Not supported on Linux._\n- `inactive`\n - : The input method editor is initially inactive, but the user may activate it if they wish. _Not supported on Linux._\n- `disabled`\n - : The input method editor is disabled and may not be activated by the user.\n\n## Description\n\nUnlike Internet Explorer, Firefox's implementation of `ime-mode` allows this property on ``. However, this makes for a bad user experience, and password fields _should not_ enable the IME. Users may correct the inappropriate behavior of sites that don't follow this recommendation by placing the following CSS into their user stylesheet:\n\n```css\ninput[type=password] {\n ime-mode: auto !important;\n}\n```\n\nThe Mac version of Gecko 1.9 (Firefox 3) can't recover the previous state of the IME when a field for which it is disabled loses focus, so Mac users may get grumpy when you use the `disabled` value.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Disabling input method support\n\nThis example disables input method support for a form field. In the past, this was commonly used on fields that entered data into databases which didn't support extended character sets.\n\n```html\n\n```\n\n> **Note:** You shouldn't rely on disabling IME to prevent extended characters from passing through your form. Even with IME disabled, users can still paste extended characters into your form's fields.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n" }, { "property": "inheritance", "document": "---\ntitle: Inheritance\nslug: Web/CSS/inheritance\ntags:\n - CSS\n - Guide\n - Inheritance\n - Layout\n - Web\n---\n{{CSSRef}}\n\nIn CSS, **inheritance** controls what happens when no value is specified for a property on an element.\n\nCSS properties can be categorized in two types:\n\n- **inherited properties**, which by default are set to the [computed value](/en-US/docs/Web/CSS/computed_value) of the parent element\n- **non-inherited properties**, which by default are set to [initial value](/en-US/docs/Web/CSS/initial_value) of the property\n\nRefer to [any CSS property](/en-US/docs/Web/CSS/Reference#keyword_index) definition to see whether a specific property inherits by default (\"Inherited: yes\") or not (\"Inherited: no\").\n\n## Inherited properties\n\nWhen no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/initial_value) given in the property's summary.\n\nA typical example of an inherited property is the {{ Cssxref(\"color\") }} property. Given the style rules:\n\n```css\np { color: green; }\n```\n\n... and the markup:\n\n```html\n

    This paragraph has emphasized text in it.

    \n```\n\n... the words \"emphasized text\" will appear green, since the `em` element has inherited the value of the {{ Cssxref(\"color\") }} property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color).\n\n## Non-inherited properties\n\nWhen no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](/en-US/docs/Web/CSS/initial_value) of that property (as specified in the property's summary).\n\nA typical example of a non-inherited property is the {{ Cssxref(\"border\") }} property. Given the style rules:\n\n```css\n p { border: medium solid; }\n```\n\n... and the markup:\n\n```html\n

    This paragraph has emphasized text in it.

    \n```\n\n... the words \"emphasized text\" will not have a border (since the initial value of {{ Cssxref(\"border-style\") }} is `none`).\n\n## Notes\n\nThe {{ Cssxref(\"inherit\") }} keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.\n\nYou can control inheritance for all properties at once using the {{cssxref(\"all\")}} shorthand property, which applies its value to all properties. For example:\n\n```css\np {\n all: revert;\n font-size: 200%;\n font-weight: bold;\n}\n```\n\nThis reverts the style of the paragraphs' {{cssxref(\"font\")}} property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a {{cssxref(\"font-weight\")}} of `\"bold\"`.\n\n## See also\n\n- CSS values for controlling inheritance: {{ cssxref(\"inherit\") }}, {{cssxref(\"initial\")}}, {{cssxref(\"revert\")}}, {{cssxref(\"revert-layer\")}}, and {{cssxref(\"unset\")}}\n- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade)\n- [Cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)\n- {{ CSS_key_concepts() }}\n" }, { "property": "initial-letter-align", "document": "---\ntitle: initial-letter-align\nslug: Web/CSS/initial-letter-align\ntags:\n - Align\n - CSS\n - CSS Inline\n - CSS Property\n - Experimental\n - Graphics\n - Layout\n - NeedsL\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.initial-letter-align\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`initial-letter-align`** CSS property specifies the alignment of initial letters within a paragraph.\n\n```css\n/* Keyword values */\ninitial-letter-align: auto;\ninitial-letter-align: alphabetic;\ninitial-letter-align: hanging;\ninitial-letter-align: ideographic;\n\n/* Global values */\ninitial-letter-align: inherit;\ninitial-letter-align: initial;\ninitial-letter-align: revert;\ninitial-letter-align: revert-layer;\ninitial-letter-align: unset;\n```\n\n## Syntax\n\nOne of the keyword values listed below.\n\n### Values\n\n- `auto`\n - : The user agent selects the value which corresponds to the language of the text. Western languages would default to alphabetic, CJK languages to ideographic, and some Indic languages to hanging.\n- `alphabetic`\n - : As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.\n- `hanging`\n - : The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text.\n- `ideographic`\n - : The initial letter is centered in the N-line area.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Aligning initial letter\n\n#### HTML\n\n```html\n

    Initial letter - auto

    \n

    Initial letter - alphabetic

    \n

    Initial letter - hanging

    \n

    Initial letter - ideographic

    \n```\n\n#### CSS\n\n```css\n.auto::first-letter {\n -webkit-initial-letter-align: auto;\n initial-letter-align: auto;\n}\n\n.alphabetic::first-letter {\n -webkit-initial-letter-align: alphabetic;\n initial-letter-align: alphabetic;\n}\n\n.hanging::first-letter {\n -webkit-initial-letter-align: hanging;\n initial-letter-align: hanging;\n}\n\n.ideographic::first-letter {\n -webkit-initial-letter-align: ideographic;\n initial-letter-align: ideographic;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Aligning_initial_letter')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n- {{cssxref(\"initial-letter\")}}\n- [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/)\n" }, { "property": "initial-letter", "document": "---\ntitle: initial-letter\nslug: Web/CSS/initial-letter\ntags:\n - CSS\n - CSS Inline\n - CSS Property\n - Experimental\n - Graphics\n - Layout\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.initial-letter\n---\n{{CSSRef}}\n\nThe `initial-letter` CSS property sets styling for dropped, raised, and sunken initial letters.\n\n```css\n/* Keyword values */\ninitial-letter: normal;\n\n/* Numeric values */\ninitial-letter: 1.5; /* Initial letter occupies 1.5 lines */\ninitial-letter: 3.0; /* Initial letter occupies 3 lines */\ninitial-letter: 3.0 2; /* Initial letter occupies 3 lines and\n sinks 2 lines */\n\n/* Global values */\ninitial-letter: inherit;\ninitial-letter: initial;\ninitial-letter: revert;\ninitial-letter: revert-layer;\ninitial-letter: unset;\n```\n\n## Syntax\n\nThe keyword value `normal`, or a `` optionally followed by an ``.\n\n### Values\n\n- `normal`\n - : No special initial-letter effect. Text behaves as normal.\n- ``\n - : Defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.\n- ``\n - : Defines the number of lines the initial letter should sink when the size of it is given. Values must be greater than zero. If omitted, it duplicates the size value, floored to the nearest positive whole number.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting initial letter size\n\n#### HTML\n\n```html\n

    Initial letter is normal

    \n

    Initial letter occupies 1.5 lines

    \n

    Initial letter occupies 3 lines

    \n```\n\n#### CSS\n\n```css\n.normal::first-letter {\n -webkit-initial-letter: normal;\n initial-letter: normal;\n}\n\n.onefive::first-letter {\n -webkit-initial-letter: 1.5;\n initial-letter: 1.5;\n}\n\n.three::first-letter {\n -webkit-initial-letter: 3.0;\n initial-letter: 3.0;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n- {{cssxref(\"initial-letter-align\")}}\n- [Drop caps in CSS](https://www.oddbird.net/2017/01/03/initial-letter/)\n" }, { "property": "initial_value", "document": "---\ntitle: Initial value\nslug: Web/CSS/initial_value\ntags:\n - CSS\n - Guide\n - Reference\nspec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value\n---\n{{CSSRef}}\n\nThe **initial value** of a [CSS](/en-US/docs/Web/CSS) property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not:\n\n- For [inherited properties](/en-US/docs/Web/CSS/inheritance#inherited_properties), the initial value is used on the _root element only_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied.\n- For [non-inherited properties](/en-US/docs/Web/CSS/inheritance#non-inherited_properties), the initial value is used on _all elements_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied.\n\nYou can explicitly specify the initial value by using the {{cssxref(\"initial\")}} keyword.\n\n> **Note:** The initial value should not be confused with the value specified by the browser's style sheet.\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- {{cssxref(\"initial\")}}\n- {{CSS_key_concepts}}\n" }, { "property": "inline-size", "document": "---\ntitle: inline-size\nslug: Web/CSS/inline-size\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inline-size\n---\n{{CSSRef}}\n\nThe **`inline-size`** [CSS](/en-US/docs/Web/CSS) property defines the horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the {{cssxref(\"width\")}} or the {{cssxref(\"height\")}} property, depending on the value of {{cssxref(\"writing-mode\")}}.\n\nIf the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the width of the element. A related property is {{cssxref(\"block-size\")}}, which defines the other dimension of the element.\n\n{{EmbedInteractiveExample(\"pages/css/inline-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\ninline-size: 300px;\ninline-size: 25em;\n\n/* values */\ninline-size: 75%;\n\n/* Keyword values */\ninline-size: max-content;\ninline-size: min-content;\ninline-size: fit-content(20em);\ninline-size: auto;\n\n/* Global values */\ninline-size: inherit;\ninline-size: initial;\ninline-size: revert;\ninline-size: revert-layer;\ninline-size: unset;\n```\n\n### Values\n\nThe `inline-size` property takes the same values as the {{cssxref(\"width\")}} and {{cssxref(\"height\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline size in pixels\n\n#### HTML\n\n```html\n

    Example text

    \n```\n\n#### CSS\n\n```css\n.exampleText {\n writing-mode: vertical-rl;\n background-color: yellow;\n inline-size: 110px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_size_in_pixels\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"width\")}} and {{cssxref(\"height\")}}\n- {{cssxref(\"writing-mode\")}}\n" }, { "property": "inline_formatting_context", "document": "---\ntitle: Inline formatting context\nslug: Web/CSS/Inline_formatting_context\ntags:\n - CSS\n - Formatting context\n - Guide\n - Reference\n---\nThis article explains the inline formatting context\n\n## Core concepts\n\nThe inline formatting context is part of the visual rendering of a web page. Inline boxes are laid out one after the other, in the direction sentences run in the writing mode in use:\n\n- In a horizontal writing mode, boxes are laid out horizontally, starting on the left.\n- In a vertical writing mode they would be laid out vertically starting at the top.\n\nIn the example below, the two ({{HTMLElement(\"div\")}}) elements with the black borders form a [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), inside which each word participates in an inline formatting context. The boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically.\n\n{{EmbedGHLiveSample(\"css-examples/inline-formatting/inline.html\", '100%', 720)}}\n\nBoxes forming a line are contained by a rectangular area called a line box. This box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. Therefore a paragraph is a set of inline line boxes, stacked in the block direction.\n\nWhen an inline box is split, margins, borders, and padding have no visual effect where the split occurs. In the next example there is a ({{HTMLElement(\"span\")}}) element wrapping a set of words wrapping onto two lines. The border on the `` breaks at the wrapping point.\n\n{{EmbedGHLiveSample(\"css-examples/inline-formatting/break.html\", '100%', 720)}}\n\nMargins, borders, and padding in the inline direction are respected. In the example below you can see how the margin, border, and padding on the inline `` element are added.\n\n{{EmbedGHLiveSample(\"css-examples/inline-formatting/mbp.html\", '100%', 920)}}\n\n> **Note:** I am using the logical, flow-relative properties — {{cssxref(\"padding-inline-start\")}} rather than {{cssxref(\"padding-left\")}} — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in [Logical Properties and Values](/en-US/docs/Web/CSS/CSS_Logical_Properties).\n\n## Alignment in the block direction\n\nInline boxes may be aligned in the block direction in different ways, using the {{cssxref(\"vertical-align\")}} property, which will align on the block axis in vertical writing modes (therefore not vertically at all!). In the example below the large text is making the line box of the first sentence larger, therefore the `vertical-align` property can be used to align the inline boxes either side of it. I have used the value `top`, try changing it to `middle`, `bottom`, or `baseline`.\n\n{{EmbedGHLiveSample(\"css-examples/inline-formatting/align.html\", '100%', 920)}}\n\n## Alignment in the inline direction\n\nIf there is additional space in the inline direction, the {{cssxref(\"text-align\")}} property can be used to align the inline boxes within their line box. Try changing the value of `text-align` below to `end`.\n\n{{EmbedGHLiveSample(\"css-examples/inline-formatting/text-align.html\", '100%', 920)}}\n\n## Effect of floats\n\nLine boxes usually have the same size in the inline direction, therefore the same width if working in a horizontal writing mode, or height if working in a vertical writing mode. If there is a {{cssxref(\"float\")}} within the same block formatting context however, the float will cause the line boxes that wrap the float to become shorter.\n\n{{EmbedGHLiveSample(\"css-examples/flow/formatting-contexts/float.html\", '100%', 720)}}\n\n## See also\n\n- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context)\n- [Visual Formatting Model](/en-US/docs/Web/CSS/Visual_formatting_model)\n" }, { "property": "inset-block-end", "document": "---\ntitle: inset-block-end\nslug: Web/CSS/inset-block-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inset-block-end\n---\n{{CSSRef}}\n\nThe **`inset-block-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, or {{cssxref(\"left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-block-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-block-end: 3px;\ninset-block-end: 2.4em;\n\n/* s of the width or height of the containing block */\ninset-block-end: 10%;\n\n/* Keyword value */\ninset-block-end: auto;\n\n/* Global values */\ninset-block-end: inherit;\ninset-block-end: initial;\ninset-block-end: revert;\ninset-block-end: revert-layer;\ninset-block-end: unset;\n```\n\n### Values\n\nThe `inset-block-end` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block end offset\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n position: relative;\n inset-block-end: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_end_offset\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The properties which defines other insets: {{cssxref(\"inset-block-start\")}}, {{cssxref(\"inset-inline-start\")}}, and {{cssxref(\"inset-inline-end\")}}\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "inset-block-start", "document": "---\ntitle: inset-block-start\nslug: Web/CSS/inset-block-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inset-block-start\n---\n{{CSSRef}}\n\nThe **`inset-block-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, or {{cssxref(\"left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-block-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-block-start: 3px;\ninset-block-start: 2.4em;\n\n/* s of the width or height of the containing block */\ninset-block-start: 10%;\n\n/* Keyword value */\ninset-block-start: auto;\n\n/* Global values */\ninset-block-start: inherit;\ninset-block-start: initial;\ninset-block-start: revert;\ninset-block-start: revert-layer;\ninset-block-start: unset;\n```\n\n### Values\n\nThe `inset-block-start` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block start offset\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n position: relative;\n inset-block-start: 20px;\n background-color: #c8c800;\n}\n```\n\n{{EmbedLiveSample(\"Setting_block_start_offset\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The properties which defines other insets: {{cssxref(\"inset-block-end\")}}, {{cssxref(\"inset-inline-start\")}}, and {{cssxref(\"inset-inline-end\")}}\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "inset-block", "document": "---\ntitle: inset-block\nslug: Web/CSS/inset-block\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.inset-block\n---\n{{CSSRef}}\n\nThe **`inset-block`** [CSS](/en-US/docs/Web/CSS) property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}} and {{cssxref(\"bottom\")}}, or {{cssxref(\"right\")}} and {{cssxref(\"left\")}} properties depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-block.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"inset-block-end\")}}\n- {{cssxref(\"inset-block-start\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-block: 3px 10px;\ninset-block: 2.4em 3em;\ninset-block: 10px; /* value applied to start and end */\n\n/* s of the width or height of the containing block */\ninset-block: 10% 5%;\n\n/* Keyword value */\ninset-block: auto;\n\n/* Global values */\ninset-block: inherit;\ninset-block: initial;\ninset-block: revert;\ninset-block: revert-layer;\ninset-block: unset;\n```\n\n### Values\n\nThe `inset-block` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block start and end offsets\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n position: relative;\n inset-block: 20px 50px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_start_and_end_offsets\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- The mapped physical shortcut: {{cssxref(\"inset\")}}\n- The mapped inline shortcut: {{cssxref(\"inset-inline\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "inset-inline-end", "document": "---\ntitle: inset-inline-end\nslug: Web/CSS/inset-inline-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - NeedsContent\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inset-inline-end\n---\n{{CSSRef}}\n\nThe **`inset-inline-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline end inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, or {{cssxref(\"left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-inline-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-inline-end: 3px;\ninset-inline-end: 2.4em;\n\n/* s of the width or height of the containing block */\ninset-inline-end: 10%;\n\n/* Keyword value */\ninset-inline-end: auto;\n\n/* Global values */\ninset-inline-end: inherit;\ninset-inline-end: initial;\ninset-inline-end: revert;\ninset-inline-end: revert-layer;\ninset-inline-end: unset;\n```\n\nThe shorthand for {{cssxref(\"inset-inline-start\")}} and `inset-inline-end` is {{cssxref(\"inset-inline\")}}.\n\n### Values\n\nThe `inset-inline-end` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline end offset\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n position: relative;\n inset-inline-end: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_end_offset\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The properties which defines other insets: {{cssxref(\"inset-block-start\")}}, {{cssxref(\"inset-block-end\")}}, and {{cssxref(\"inset-inline-start\")}}\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "inset-inline-start", "document": "---\ntitle: inset-inline-start\nslug: Web/CSS/inset-inline-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inset-inline-start\n---\n{{CSSRef}}\n\nThe **`inset-inline-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, or {{cssxref(\"left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-inline-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-inline-start: 3px;\ninset-inline-start: 2.4em;\n\n/* s of the width or height of the containing block */\ninset-inline-start: 10%;\n\n/* Keyword value */\ninset-inline-start: auto;\n\n/* Global values */\ninset-inline-start: inherit;\ninset-inline-start: initial;\ninset-inline-start: revert;\ninset-inline-start: revert-layer;\ninset-inline-start: unset;\n```\n\nThe shorthand for `inset-inline-start` and {{cssxref(\"inset-inline-end\")}} is {{cssxref(\"inset-inline\")}}.\n\n### Values\n\nThe `inset-inline-start` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline start offset\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n position: relative;\n inset-inline-start: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_start_offset\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The properties which defines other insets: {{cssxref(\"inset-block-start\")}}, {{cssxref(\"inset-block-end\")}}, and {{cssxref(\"inset-inline-end\")}}\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "grid-template-areas", "document": "---\ntitle: grid-template-areas\nslug: Web/CSS/grid-template-areas\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-template-areas\n---\n{{CSSRef}}\n\nThe **`grid-template-areas`** CSS property specifies named {{glossary(\"grid areas\")}}, establishing the cells in the grid and assigning them names.\n\n{{EmbedInteractiveExample(\"pages/css/grid-template-areas.html\")}}\n\nThose areas are not associated with any particular grid item, but can be referenced from the grid-placement properties {{cssxref(\"grid-row-start\")}}, {{cssxref(\"grid-row-end\")}}, {{cssxref(\"grid-column-start\")}}, {{cssxref(\"grid-column-end\")}}, and their shorthands {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-column\")}}, and {{cssxref(\"grid-area\")}}.\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-template-areas: none;\n\n/* values */\ngrid-template-areas: \"a b\";\ngrid-template-areas: \"a b b\"\n \"a c d\";\n\n/* Global values */\ngrid-template-areas: inherit;\ngrid-template-areas: initial;\ngrid-template-areas: revert;\ngrid-template-areas: revert-layer;\ngrid-template-areas: unset;\n```\n\n### Values\n\n- `none`\n - : The grid container doesn't define any named grid areas.\n- `{{cssxref(\"<string>\")}}+`\n - : A row is created for every separate string listed, and a column is created for each cell in the string. Multiple cell tokens with the same name within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying named grid areas\n\n#### HTML\n\n```html\n
    \n
    Header
    \n \n
    Main area
    \n
    Footer
    \n
    \n```\n\n#### CSS\n\n```css\n#page {\n display: grid;\n width: 100%;\n height: 250px;\n grid-template-areas: \"head head\"\n \"nav main\"\n \"nav foot\";\n grid-template-rows: 50px 1fr 30px;\n grid-template-columns: 150px 1fr;\n}\n\n#page > header {\n grid-area: head;\n background-color: #8ca0ff;\n}\n\n#page > nav {\n grid-area: nav;\n background-color: #ffa08c;\n}\n\n#page > main {\n grid-area: main;\n background-color: #ffff64;\n}\n\n#page > footer {\n grid-area: foot;\n background-color: #8cffa0;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Specifying_named_grid_areas\", \"100%\", \"250px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template-rows\")}}, {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template\")}}\n- Grid Layout Guide: _[Grid template areas](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas)_\n- Video tutorial: _[Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/)_\n" }, { "property": "inset-inline", "document": "---\ntitle: inset-inline\nslug: Web/CSS/inset-inline\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.inset-inline\n---\n{{CSSRef}}\n\nThe **`inset-inline`** [CSS](/en-US/docs/Web/CSS) property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"top\")}} and {{cssxref(\"bottom\")}}, or {{cssxref(\"right\")}} and {{cssxref(\"left\")}} properties depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/inset-inline.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"inset-inline-end\")}}\n- {{cssxref(\"inset-inline-start\")}}\n\n## Syntax\n\n```css\n/* values */\ninset-inline: 3px 10px;\ninset-inline: 2.4em 3em;\ninset-inline: 10px; /* value applied to start and end */\n\n/* s of the width or height of the containing block */\ninset-inline: 10% 5%;\n\n/* Keyword value */\ninset-inline: auto;\n\n/* Global values */\ninset-inline: inherit;\ninset-inline: initial;\ninset-inline: revert;\ninset-inline: revert-layer;\ninset-inline: unset;\n```\n\n### Values\n\nThe `inset-inline` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline start and end offsets\n\n#### HTML\n\n```html\n
    \n

    Example text

    \n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n position: relative;\n inset-inline: 20px 50px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_start_and_end_offsets\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}\n- The mapped physical shortcut: {{cssxref(\"inset\")}}\n- The mapped block shortcut: {{cssxref(\"inset-block\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "inherit", "document": "---\ntitle: inherit\nslug: Web/CSS/inherit\ntags:\n - CSS\n - CSS Cascade\n - CSS Value\n - Cascade\n - Inheritance\n - Keyword\n - Layout\n - Reference\n - Style\n - inherit\nbrowser-compat: css.types.global_keywords.inherit\n---\n{{CSSRef}}\n\nThe **`inherit`** CSS keyword causes the element to take the [computed value](/en-US/docs/Web/CSS/computed_value) of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref(\"all\")}}.\n\nFor [inherited properties](/en-US/docs/Web/CSS/inheritance#inherited_properties), this reinforces the default behavior, and is only needed to override another rule.\n\n> **Note:** Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block.\n\n## Examples\n\n### Exclude selected elements from a rule\n\n```css\n/* Make second-level headers green */\nh2 { color: green; }\n\n/* ...but leave those in the sidebar alone so they use their parent's color */\n#sidebar h2 { color: inherit; }\n```\n\nIn this example, the `h2` elements inside the sidebar might be different colors. For example, if one of them were the child of a `div` matched by the rule ...\n\n```css\ndiv#current { color: blue; }\n```\n\n... it would be blue.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Inheritance](/en-US/docs/Web/CSS/inheritance)\n- Use the {{cssxref(\"initial\")}} keyword to set a property to its initial value.\n- Use the {{cssxref(\"revert\")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).\n- Use the {{cssxref(\"revert-layer\")}} keyword to reset a property to the value established in a previous cascade layer.\n- Use the {{cssxref(\"unset\")}} keyword to set a property to its inherited value if it inherits or to its initial value if not.\n- The {{cssxref(\"all\")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.\n" }, { "property": "inset", "document": "---\ntitle: inset\nslug: Web/CSS/inset\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.inset\n---\n{{CSSRef}}\n\nThe **`inset`** [CSS](/en-US/docs/Web/CSS) property is a shorthand that corresponds to the {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and/or {{cssxref(\"left\")}} properties. It has the same multi-value syntax of the {{cssxref(\"margin\")}} shorthand.\n\n{{EmbedInteractiveExample(\"pages/css/inset.html\")}}\n\nWhile part of the _CSS Logical Properties_ specification, it does not define _logical_ offsets. It defines _physical_ offsets, regardless of the element's writing mode, directionality, and text orientation.\n\n## Syntax\n\n```css\n/* values */\ninset: 10px; /* value applied to all edges */\ninset: 4px 8px; /* top/bottom left/right */\ninset: 5px 15px 10px; /* top left/right bottom */\ninset: 2.4em 3em 3em 3em; /* top right bottom left */\n\n/* s of the width (left/right) or height (top/bottom) of the containing block */\ninset: 10% 5% 5% 5%;\n\n/* Keyword value */\ninset: auto;\n\n/* Global values */\ninset: inherit;\ninset: initial;\ninset: revert;\ninset: revert-layer;\ninset: unset;\n```\n\n### Values\n\nThe `inset` property takes the same values as the {{cssxref(\"left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting offsets for an element\n\n#### HTML\n\n```html\n
    \n Example text\n
    \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 150px;\n height: 120px;\n position: relative;\n}\n\n.exampleText {\n writing-mode: sideways-rl;\n position: absolute;\n inset: 20px 40px 30px 10px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_offsets_for_an_element\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The longhand box offset properties: {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, and {{cssxref(\"left\")}}.\n- The mapped logical shorthands: {{cssxref(\"inset-block\")}} and {{cssxref(\"inset-inline\")}}\n- The {{cssxref(\"margin\")}} shorthand multi-value syntax.\n" }, { "property": "integer", "document": "---\ntitle: \nslug: Web/CSS/integer\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Reference\n - Web\nbrowser-compat: css.types.integer\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a special type of {{cssxref(\"number\")}} that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as {{cssxref(\"column-count\")}}, {{cssxref(\"counter-increment\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-row\")}}, and {{cssxref(\"z-index\")}}.\n\n## Syntax\n\nThe `` data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single `+` or `-` sign. There is no unit associated with integers.\n\n> **Note:** There is no official range of valid `` values. Opera 12.1 supports values up to 2^15 - 1, IE up to 2^20 - 1, and other browsers even higher. During the CSS3 Values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, [in April 2012 during the LC phase](https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html), was \\[-2^27 - 1; 2^27 - 1], but other values like 2^24 - 1 and 2^30 - 1 [were also proposed](https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html). However, the latest spec doesn't specify a range anymore.\n\n## Interpolation\n\nWhen animated, values of the `` data type are {{Glossary(\"interpolation\", \"interpolated\")}} using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the [floor function](https://en.wikipedia.org/wiki/Floor_function). The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.\n\n## Examples\n\n### Valid integers\n\n```css example-good\n12 Positive integer (without a leading + sign)\n+123 Positive integer (with a leading + sign)\n-456 Negative integer\n0 Zero\n+0 Zero, with a leading +\n-0 Zero, with a leading -\n```\n\n### Invalid integers\n\n```plain example-bad\n12.0 This is a , not an , though it represents an integer.\n12. Decimal points are not allowed.\n+---12 Only one leading +/- is allowed.\nten Letters are not allowed.\n_5 Special characters are not allowed.\n\\35 Escaped Unicode characters are not allowed, even if they are an integer (here: 5).\n\\4E94 Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).\n3e4 Scientific notation is not allowed.\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<number>\")}}\n" }, { "property": "justify-content", "document": "---\ntitle: justify-content\nslug: Web/CSS/justify-content\ntags:\n - CSS\n - CSS Box Alignment\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.justify-content\n---\n{{CSSRef}}\n\nThe [CSS](/en-US/docs/Web/CSS) **`justify-content`** property defines how the browser distributes space between and around content items along the {{Glossary(\"Main Axis\", \"main-axis\")}} of a flex container, and the inline axis of a grid container.\n\nThe interactive example below demonstrates some of the values using Grid Layout.\n\n{{EmbedInteractiveExample(\"pages/css/justify-content.html\")}}\n\nThe alignment is done after the lengths and auto margins are applied, meaning that, if in a [Flexbox layout](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) there is at least one flexible element, with {{cssxref(\"flex-grow\")}} different from `0`, it will have no effect as there won't be any available space.\n\n## Syntax\n\n```css\n/* Positional alignment */\njustify-content: center; /* Pack items around the center */\njustify-content: start; /* Pack items from the start */\njustify-content: end; /* Pack items from the end */\njustify-content: flex-start; /* Pack flex items from the start */\njustify-content: flex-end; /* Pack flex items from the end */\njustify-content: left; /* Pack items from the left */\njustify-content: right; /* Pack items from the right */\n\n/* Baseline alignment */\n/* justify-content does not take baseline values */\n\n/* Normal alignment */\njustify-content: normal;\n\n/* Distributed alignment */\njustify-content: space-between; /* Distribute items evenly\n The first item is flush with the start,\n the last is flush with the end */\njustify-content: space-around; /* Distribute items evenly\n Items have a half-size space\n on either end */\njustify-content: space-evenly; /* Distribute items evenly\n Items have equal space around them */\njustify-content: stretch; /* Distribute items evenly\n Stretch 'auto'-sized items to fit\n the container */\n\n/* Overflow alignment */\njustify-content: safe center;\njustify-content: unsafe center;\n\n/* Global values */\njustify-content: inherit;\njustify-content: initial;\njustify-content: revert;\njustify-content: revert-layer;\njustify-content: unset;\n```\n\n### Values\n\n- `start`\n - : The items are packed flush to each other toward the start edge of the alignment container in the main axis.\n- `end`\n - : The items are packed flush to each other toward the end edge of the alignment container in the main axis.\n- `flex-start`\n - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side.\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`.\n- `flex-end`\n - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side.\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`.\n- `center`\n - : The items are packed flush to each other toward the center of the alignment container along the main axis.\n- `left`\n - : The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `right`\n - : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `normal`\n - : The items are packed in their default position as if no `justify-content` value was set. This value behaves as `stretch` in grid and flex containers.\n- `baseline first baseline`\n `last baseline`\n - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.\n The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.\n- `space-between`\n - : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.\n- `space-around`\n - : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.\n- `space-evenly`\n - : The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.\n- `stretch`\n\n - : If the combined size of the items along the main axis is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref(\"max-height\")}}/{{cssxref(\"max-width\")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.\n\n > **Note:** `stretch` is not supported by flexible boxes (flexbox).\n\n- `safe`\n - : Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.\n- `unsafe`\n - : Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting flex item distribution\n\n#### CSS\n\n```css\n#container {\n display: flex;\n justify-content: space-between; /* Can be changed in the live sample */\n}\n\n#container > div {\n width: 100px;\n height: 100px;\n background: linear-gradient(-45deg, #788cff, #b4c8ff);\n}\n```\n\n```html hidden\n
    \n
    \n
    \n
    \n
    \n\n```\n\n```js hidden\nvar justifyContent = document.getElementById(\"justifyContent\");\njustifyContent.addEventListener(\"change\", function (evt) {\n document.getElementById(\"container\").style.justifyContent =\n evt.target.value;\n});\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_flex_item_distribution\", \"100%\", 180)}}\n\n## Specifications\n\n{{Specifications(\"css.properties.justify-content.grid_context\")}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n" }, { "property": "justify-items", "document": "---\ntitle: justify-items\nslug: Web/CSS/justify-items\ntags:\n - CSS\n - CSS Box Alignment\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.justify-items\n---\n{{CSSRef}}\n\nThe [CSS](/en-US/docs/Web/CSS) **`justify-items`** property defines the default {{CSSxRef(\"justify-self\")}} for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n{{EmbedInteractiveExample(\"pages/css/justify-items.html\")}}\n\nThe effect of this property is dependent of the layout mode we are in:\n\n- In block-level layouts, it aligns the items inside their containing block on the inline axis.\n- For absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.\n- In table cell layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables) about alignment in block, absolute positioned and table layout)\n- In flexbox layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) about alignment in Flexbox)\n- In grid layouts, it aligns the items inside their grid areas on the inline axis ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) about alignment in grid layouts)\n\n## Syntax\n\n```css\n/* Basic keywords */\njustify-items: normal;\njustify-items: stretch;\n\n/* Positional alignment */\njustify-items: center; /* Pack items around the center */\njustify-items: start; /* Pack items from the start */\njustify-items: end; /* Pack items from the end */\njustify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in Flexbox layouts. */\njustify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in Flexbox layouts. */\njustify-items: self-start;\njustify-items: self-end;\njustify-items: left; /* Pack items from the left */\njustify-items: right; /* Pack items from the right */\n\n/* Baseline alignment */\njustify-items: baseline;\njustify-items: first baseline;\njustify-items: last baseline;\n\n/* Overflow alignment (for positional alignment only) */\njustify-items: safe center;\njustify-items: unsafe center;\n\n/* Legacy alignment */\njustify-items: legacy right;\njustify-items: legacy left;\njustify-items: legacy center;\n\n/* Global values */\njustify-items: inherit;\njustify-items: initial;\njustify-items: revert;\njustify-items: revert-layer;\njustify-items: unset;\n```\n\nThis property can take one of four different forms:\n\n- Basic keywords: one of the keyword values `normal` or `stretch`.\n- Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.\n- Positional alignment: one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`. Plus optionally `safe` or `unsafe`.\n- Legacy alignment: the `legacy` keyword, followed by one of `left` or `right`.\n\n### Values\n\n- `normal`\n - : The effect of this keyword is dependent of the layout mode we are in:\n - In block-level layouts, the keyword is a synonym of `start`.\n - In absolutely-positioned layouts, the keyword behaved like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.\n - In table cell layouts, this keyword has no meaning as this property is _ignored_.\n - In flexbox layouts, this keyword has no meaning as this property is _ignored._\n - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.\n- `start`\n - : The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.\n- `end`\n - : The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.\n- `flex-start`\n - : For items that are not children of a flex container, this value is treated like `start`.\n- `flex-end`\n - : For items that are not children of a flex container, this value is treated like `end`.\n- `self-start`\n - : The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.\n- `self-end`\n - : The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.\n- `center`\n - : The items are packed flush to each other toward the center of the alignment container.\n- `left`\n - : The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `right`\n - : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `baseline`, `first baseline`, `last baseline`\n - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.\n The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.\n- `stretch`\n - : If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef(\"max-height\")}}/{{CSSxRef(\"max-width\")}} (or equivalent functionality), so that the combined size exactly fills the alignment container.\n- `safe`\n - : If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.\n- `unsafe`\n - : Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.\n- `legacy`\n - : Makes the value inherited by the box descendants. Note that if a descendant has a `justify-self: auto` value, the `legacy` keyword is not considered by the descend, only the `left`, `right`, or `center` value associated to it.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nIn the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` (the default), which causes the grid items to stretch across the entire width of their cells.\n\nIf you hover or tab onto the grid container however, it is given a `justify-items` value of `center`, which causes the grid items to span only as wide as their content width, and align in the center of their cells.\n\n#### HTML\n\n```html\n
    \n First child\n Second child\n Third child\n Fourth child\n
    \n```\n\n#### CSS\n\n```css\nhtml {\n font-family: helvetica, arial, sans-serif;\n letter-spacing: 1px;\n}\n\narticle {\n background-color: red;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 40px;\n grid-gap: 10px;\n width: 300px;\n justify-items: stretch;\n}\n\narticle:hover, article:focus {\n justify-items: center;\n}\n\narticle span {\n background-color: black;\n color: white;\n margin: 1px;\n text-align: center;\n}\n\narticle, span {\n padding: 10px;\n border-radius: 7px;\n}\n\narticle {\n margin: 20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}\n\n## Specifications\n\n{{Specifications(\"css.properties.justify-items.grid_context\")}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n- The {{CSSxRef(\"place-items\")}} shorthand property\n- The {{CSSxRef(\"justify-self\")}} property\n- The {{CSSxRef(\"align-items\")}} property\n" }, { "property": "justify-self", "document": "---\ntitle: justify-self\nslug: Web/CSS/justify-self\ntags:\n - CSS\n - CSS Box Alignment\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.justify-self\n---\n{{CSSRef}}\n\nThe [CSS](/en-US/docs/Web/CSS) **`justify-self`** property sets the way a box is justified inside its alignment container along the appropriate axis.\n\n{{EmbedInteractiveExample(\"pages/css/justify-self.html\")}}\n\nThe effect of this property is dependent of the layout mode we are in:\n\n- In block-level layouts, it aligns an item inside its containing block on the inline axis.\n- For absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.\n- In table cell layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables) about alignment in block, absolute positioned and table layout)\n- In flexbox layouts, this property is _ignored_ ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) about alignment in Flexbox)\n- In grid layouts, it aligns an item inside its grid area on the inline axis ([more](/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) about alignment in grid layouts)\n\n## Syntax\n\n```css\n/* Basic keywords */\njustify-self: auto;\njustify-self: normal;\njustify-self: stretch;\n\n/* Positional alignment */\njustify-self: center; /* Pack item around the center */\njustify-self: start; /* Pack item from the start */\njustify-self: end; /* Pack item from the end */\njustify-self: flex-start; /* Equivalent to 'start'. Note that justify-self is ignored in Flexbox layouts. */\njustify-self: flex-end; /* Equivalent to 'end'. Note that justify-self is ignored in Flexbox layouts. */\njustify-self: self-start;\njustify-self: self-end;\njustify-self: left; /* Pack item from the left */\njustify-self: right; /* Pack item from the right */\n\n/* Baseline alignment */\njustify-self: baseline;\njustify-self: first baseline;\njustify-self: last baseline;\n\n/* Overflow alignment (for positional alignment only) */\njustify-self: safe center;\njustify-self: unsafe center;\n\n/* Global values */\njustify-self: inherit;\njustify-self: initial;\njustify-self: revert;\njustify-self: revert-layer;\njustify-self: unset;\n```\n\nThis property can take one of three different forms:\n\n- Basic keywords: one of the keyword values `normal`, `auto`, or `stretch`.\n- Baseline alignment: the `baseline` keyword, plus optionally one of `first` or `last`.\n- Positional alignment:\n\n - one of: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, or `right`.\n - Plus optionally `safe` or `unsafe`.\n\n### Values\n\n- `auto`\n - : The value used is the value of the `justify-items` property of the parents box, unless the box has no parent, or is absolutely positioned, in these cases, `auto` represents `normal`.\n- `normal`\n\n - : The effect of this keyword is dependent of the layout mode we are in:\n\n - In block-level layouts, the keyword is a synonym of `start`.\n - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.\n - In table cell layouts, this keyword has no meaning as this property is _ignored_.\n - In flexbox layouts, this keyword has no meaning as this property is _ignored._\n - In grid layouts, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.\n\n- `start`\n - : The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.\n- `end`\n - : The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.\n- `flex-start`\n - : For items that are not children of a flex container, this value is treated like `start`.\n- `flex-end`\n - : For items that are not children of a flex container, this value is treated like `end`.\n- `self-start`\n - : The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.\n- `self-end`\n - : The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.\n- `center`\n - : The items are packed flush to each other toward the center of the alignment container.\n- `left`\n - : The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `right`\n - : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `baseline`, `first baseline`, `last baseline`\n - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.\n The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.\n- `stretch`\n - : If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef(\"max-height\")}}/{{CSSxRef(\"max-width\")}} (or equivalent functionality), so that the combined size exactly fills the alignment container.\n- `safe`\n - : If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.\n- `unsafe`\n - : Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nIn the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells.\n\nThe second, third, and fourth grid items are then given different values of `justify-self`, to show how these override the `justify-items` value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.\n\n#### HTML\n\n```html\n
    \n First child\n Second child\n Third child\n Fourth child\n
    \n```\n\n#### CSS\n\n```css\nhtml {\n font-family: helvetica, arial, sans-serif;\n letter-spacing: 1px;\n}\n\narticle {\n background-color: red;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 40px;\n grid-gap: 10px;\n width: 300px;\n justify-items: stretch;\n}\n\nspan:nth-child(2) {\n justify-self: start;\n}\n\nspan:nth-child(3) {\njustify-self: center;\n}\n\nspan:nth-child(4) {\njustify-self: end;\n}\n\narticle span {\n background-color: black;\n color: white;\n margin: 1px;\n text-align: center;\n}\n\narticle, span {\n padding: 10px;\n border-radius: 7px;\n}\n\narticle {\n margin: 20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}\n\n## Specifications\n\n{{Specifications(\"css.properties.justify-self.grid_context\")}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n- The {{CSSxRef(\"justify-items\")}} property\n" }, { "property": "justify-tracks", "document": "---\ntitle: justify-tracks\nslug: Web/CSS/justify-tracks\ntags:\n - CSS\n - Experimental\n - Property\n - Reference\n - grid\n - justify-tracks\n - masonry\nbrowser-compat: css.properties.justify-tracks\n---\n{{CSSRef}}\n\n{{SeeCompatTable}}\n\nThe **`justify-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have [masonry](/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) in their inline axis.\n\n## Syntax\n\n```css\n/* Keyword values */\njustify-tracks: start;\njustify-tracks: space-between;\njustify-tracks: center;\njustify-tracks: start,center,end;\n\n/* Global values */\njustify-tracks: inherit;\njustify-tracks: initial;\njustify-tracks: revert;\njustify-tracks: revert-layer;\njustify-tracks: unset;\n```\n\nThe property can take a single value, in which case all tracks are aligned in the same way. If a list of values is used then the first value applies to the first track in the grid axis, the second to the next, and so on.\n\nIf there are fewer values than tracks, the last value is used for all remaining tracks. If there are more values than tracks, any additional values are ignored.\n\n### Values\n\n- `start`\n - : The items are packed flush to each other toward the start edge of the alignment container in the masonry axis.\n- `end`\n - : The items are packed flush to each other toward the end edge of the alignment container in the masonry axis.\n- `center`\n - : The items are packed flush to each other toward the center of the alignment container along the masonry axis.\n- `normal`\n - : Acts as `start`.\n- `space-between`\n - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.\n- `space-around`\n - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.\n- `space-evenly`\n - : The items are evenly distributed within the alignment container along the masonry axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.\n- `stretch`\n - : The items stretch along the masonry axis to fill the content box. Items with definite size do not stretch.\n- `left`\n - : The items are packed flush to each other toward the left edge of the alignment container.\n- `right`\n - : The items are packed flush to each other toward the right edge of the alignment container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Masonry layout with multiple values for justify-tracks\n\n{{EmbedGHLiveSample(\"css-examples/grid/masonry/justify-tracks.html\", '100%', 1000)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"align-tracks\")}}, {{cssxref(\"masonry-auto-flow\")}}\n" }, { "property": "layout_cookbook", "document": "---\ntitle: CSS Layout cookbook\nslug: Web/CSS/Layout_cookbook\ntags:\n - CSS\n - Guide\n - Layout\n - cookbook\n - recipes\n---\n{{CSSRef}}\n\nThe CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.\n\n> **Note:** If you are new to CSS layout then you might first like to take a look at our [CSS layout learning module](/en-US/docs/Learn/CSS/CSS_layout), as this will give you the basic grounding you need to make use of the recipes here.\n\n## The Recipes\n\n| Recipe | Description | Layout Methods |\n| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |\n| [Media objects](/en-US/docs/Web/CSS/Layout_cookbook/Media_objects) | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout), {{cssxref(\"float\")}} fallback, {{cssxref(\"fit-content\")}} sizing |\n| [Columns](/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts) | When to choose multi-column layout, flexbox or grid for your columns. | [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout), [Multicol](/en-US/docs/Web/CSS/CSS_Columns), [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) |\n| [Center an element](/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element) | How to center an item horizontally and vertically. | [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) |\n| [Sticky footers](/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers) | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) |\n| [Split navigation](/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation) | A navigation pattern where some links are visually separated from the others. | [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref(\"margin\")}} |\n| [Breadcrumb navigation](/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation) | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) |\n| [List group with badges](/en-US/docs/Web/CSS/Layout_cookbook/List_group_with_badges) | A list of items with a badge to display a count. | [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) |\n| [Pagination](/en-US/docs/Web/CSS/Layout_cookbook/Pagination) | Links to pages of content (such as search results). | [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout), [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) |\n| [Card](/en-US/docs/Web/CSS/Layout_cookbook/Card) | A card component, which displays in a grid of cards. | [Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) |\n| [Grid wrapper](/en-US/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | For aligning grid content within a central wrapper, while also allowing items to break out. | [CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) |\n\n## Contribute a Recipe\n\nAs with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. [See this page](/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe) for a template and guidelines for writing your own example.\n" }, { "property": "layout_mode", "document": "---\ntitle: Layout mode\nslug: Web/CSS/Layout_mode\ntags:\n - CSS\n - Guide\n - Layout\n - Reference\n---\n{{CSSRef}}\n\nA [CSS](/en-US/docs/Web/CSS) **layout mode**, sometimes called _layout_, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:\n\n- _[Normal flow](/en-US/docs/Web/CSS/CSS_Flow_Layout)_ — all elements are part of normal flow until you do something to take them out of it. Normal flow includes _block layout_, designed for laying out boxes such as paragraphs and _inline layout_, which lays out inline items such as text.\n- [_Table layout_](/en-US/docs/Web/CSS/CSS_Table), designed for laying out tables.\n- _Float layout_, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.\n- [_Positioned layout_](/en-US/docs/Web/CSS/CSS_Positioning), designed for positioning elements without much interaction with other elements.\n- [_Multi-column layout_](/en-US/docs/Web/CSS/CSS_Columns), designed for laying content out in columns as in a newspaper.\n- [_Flexible box layout_](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout), designed for laying out complex pages that can be resized smoothly.\n- [_Grid layout_](/en-US/docs/Web/CSS/CSS_Grid_Layout), designed for laying out elements relative to a fixed grid.\n\n> **Note:** Not all [CSS properties](/en-US/docs/Web/CSS/Reference) apply to all _layout modes_. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.\n\n## See also\n\n- {{CSS_key_concepts}}\n" }, { "property": "length-percentage", "document": "---\ntitle: \nslug: Web/CSS/length-percentage\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Reference\n - length-percentage\n - units\n - values\nbrowser-compat: css.types.length-percentage\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref(\"length\")}} or a {{Cssxref(\"percentage\")}}.\n\n## Syntax\n\nRefer to the documentation for {{Cssxref(\"length\")}} and {{Cssxref(\"percentage\")}} for details of the individual syntaxes allowed by this type.\n\n## Examples\n\n### length-percentage examples\n\nThe following simple example demonstrates several properties that use `` values.\n\n#### HTML\n\n```html\n

    You can use percentages and lengths in so many places.

    \n```\n\n#### CSS\n\n```css\np {\n /* length-percentage examples */\n width: 75%;\n height: 200px;\n margin: 3rem;\n padding: 1%;\n border-radius: 10px 10%;\n font-size: 250%;\n line-height: 1.5em;\n\n /* length examples */\n text-shadow: 1px 1px 1px red;\n border: 5px solid red;\n letter-spacing: 3px;\n\n /* percentage example */\n text-size-adjust: 20%;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('length-percentage_examples', '100%', 320)}}\n\n### Use in calc()\n\nWhere a `` is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a {{cssxref(\"calc\", \"calc()\")}} expression. Therefore, all of the following values are acceptable for {{cssxref(\"width\")}}:\n\n```css example-good\nwidth: 200px;\nwidth: 20%;\nwidth: calc(100% - 200px);\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<percentage>\")}}\n- {{cssxref(\"<length>\")}}\n- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n" }, { "property": "length", "document": "---\ntitle: \nslug: Web/CSS/length\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\n - length\nbrowser-compat: css.types.length\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a distance value. Lengths can be used in numerous CSS properties, such as {{Cssxref(\"width\")}}, {{Cssxref(\"height\")}}, {{Cssxref(\"margin\")}}, {{Cssxref(\"padding\")}}, {{Cssxref(\"border-width\")}}, {{Cssxref(\"font-size\")}}, and {{Cssxref(\"text-shadow\")}}.\n\n> **Note:** Although {{cssxref(\"<percentage>\")}} values are usable in some of the same properties that accept `` values, they are not themselves `` values. See {{cssxref(\"<length-percentage>\")}}.\n\n## Syntax\n\nThe `` data type consists of a {{cssxref(\"<number>\")}} followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number. The length unit is optional after the number `0`.\n\n> **Note:** Some properties allow negative ``s, while others do not.\n\n### Units\n\n#### Relative length units\n\nRelative lengths represent a measurement in terms of some other distance. Depending on the unit, this can be the size of a specific character, the [line height](/en-US/docs/Web/CSS/line-height), or the size of the {{glossary(\"viewport\")}}.\n\n##### Font-relative lengths\n\nFont-relative lengths define the `` value in terms of the size of a particular character or font attribute in the font currently in effect in an element or its parent.\n\n> **Note:** These units, especially `em` and `rem`, are often used to create scalable layouts, which maintain the [vertical rhythm of the page](https://24ways.org/2006/compose-to-a-vertical-rhythm) even when the user changes the font size.\n\n- `cap` {{experimental_inline}}\n - : Represents the \"cap height\" (nominal height of capital letters) of the element's {{Cssxref(\"font\")}}.\n- `ch`\n\n - : Represents the width, or more precisely the {{Glossary(\"advance measure\")}}, of the glyph \"0\" (zero, the Unicode character U+0030) in the element's {{Cssxref(\"font\")}}.\n\n In the cases where it is impossible or impractical to determine the measure of the \"0\" glyph, it must be assumed to be 0.5em wide by 1em tall.\n\n- `em`\n - : Represents the calculated {{Cssxref(\"font-size\")}} of the element. If used on the {{Cssxref(\"font-size\")}} property itself, it represents the _inherited_ font-size of the element.\n- `ex`\n - : Represents the [x-height](https://en.wikipedia.org/wiki/X-height) of the element's {{Cssxref(\"font\")}}. On fonts with the \"x\" letter, this is generally the height of lowercase letters in the font; `1ex ≈ 0.5em` in many fonts.\n- `ic` {{experimental_inline}}\n - : Equal to the used {{Glossary(\"advance measure\")}} of the \"水\" glyph (CJK water ideograph, U+6C34), found in the font used to render it.\n- `lh` {{experimental_inline}}\n - : Equal to the computed value of the {{Cssxref(\"line-height\")}} property of the element on which it is used, converted to an absolute length.\n- `rem`\n - : Represents the {{Cssxref(\"font-size\")}} of the root element (typically {{HTMLElement(\"html\")}}). When used within the root element {{Cssxref(\"font-size\")}}, it represents its initial value (a common browser default is `16px`, but user-defined preferences may modify this).\n- `rlh` {{experimental_inline}}\n - : Equal to the computed value of the {{Cssxref(\"line-height\")}} property on the root element (typically {{HTMLElement(\"html\")}}), converted to an absolute length. When used on the {{Cssxref(\"font-size\")}} or {{Cssxref(\"line-height\")}} properties of the root element, it refers to the properties' initial value.\n\n##### Viewport-percentage lengths\n\nViewport-percentage lengths define the `` value relative to the size of the {{glossary(\"viewport\")}}, i.e., the visible portion of the document. Viewport lengths are invalid in {{cssxref(\"@page\")}} declaration blocks.\n\n- `vh`\n - : Equal to 1% of the height of the viewport's initial [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `vw`\n - : Equal to 1% of the width of the viewport's initial [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `vi` {{experimental_inline}}\n - : Equal to 1% of the size of the initial [containing block](/en-US/docs/Web/CSS/Containing_block), in the direction of the root element's [inline axis](/en-US/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline).\n- `vb` {{experimental_inline}}\n - : Equal to 1% of the size of the initial [containing block](/en-US/docs/Web/CSS/Containing_block), in the direction of the root element's [block axis](/en-US/docs/Web/CSS/CSS_Logical_Properties#block_vs._inline).\n- `vmin`\n - : Equal to the smaller of `vw` and `vh`.\n- `vmax`\n - : Equal to the larger of `vw` and `vh`.\n\n#### Absolute length units\n\nAbsolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit, and then defining the others relative to it. The anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.\n\nFor low-dpi devices, the unit `px` represents the physical _reference pixel_; other units are defined relative to it. Thus, `1in` is defined as `96px`, which equals `72pt`. The consequence of this definition is that on such devices, dimensions described in inches (`in`), centimeters (`cm`), or millimeters (`mm`) don't necessary match the size of the physical unit with the same name.\n\nFor high-dpi devices, inches (`in`), centimeters (`cm`), and millimeters (`mm`) are the same as their physical counterparts. Therefore, the `px` unit is defined relative to them (1/96 of 1 inch).\n\n> **Note:** Many users increase their {{glossary(\"user agent\")}}'s default font size to make text more legible. Absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. For this reason, prefer relative lengths (such as `em` or `rem`) when setting `font-size`.\n\n- `px`\n - : One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for _printers_ and _high-resolution screens_, one CSS pixel implies multiple device pixels. `1px` = 1/96th of `1in`.\n- `cm`\n - : One centimeter. `1cm` = `96px/2.54`.\n- `mm`\n - : One millimeter. `1mm` = 1/10th of `1cm`.\n- `Q` {{experimental_inline}}\n - : One quarter of a millimeter. `1Q` = 1/40th of `1cm`.\n- `in`\n - : One inch. `1in` = `2.54cm` = `96px`.\n- `pc`\n - : One pica. `1pc` = `12pt` = 1/6th of `1in`.\n- `pt`\n - : One point. `1pt` = 1/72nd of `1in`.\n\n## Interpolation\n\nWhen animated, values of the `` data type are interpolated as real, floating-point numbers. The interpolation happens on the calculated value. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.\n\n## Examples\n\n### Length unit comparison\n\nThe following demo provides you with an input field in which you can enter a `` value (e.g. `300px`, `50%`, `30vw`) to set the width of a result bar that will appear below it once you've pressed the Enter or the Return key.\n\nThis allows you to compare and contrast the effect of different length units.\n\n#### HTML\n\n```html\n
    \n
    \n \n \n
    \n
    \n\n
    \n
    \n
    \n
    \n```\n\n#### CSS\n\n```css\nhtml {\n font-family: sans-serif;\n font-weight: bold;\n box-sizing: border-box;\n}\n\n.outer {\n width: 100%;\n height: 50px;\n background-color: #eee;\n position: relative;\n}\n\n.inner {\n height: 50px;\n background-color: #999;\n box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),\n inset -3px -3px 5px rgba(0,0,0,0.5);\n}\n\n.result {\n height: 20px;\n background-color: #999;\n box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),\n inset -3px -3px 5px rgba(0,0,0,0.5);\n background-color: orange;\n display: flex;\n align-items: center;\n margin-top: 10px;\n}\n\n.result code {\n position: absolute;\n margin-left: 20px;\n}\n\n.results {\n margin-top: 10px;\n}\n\n.input-container {\n position: absolute;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n height: 50px;\n}\n\nlabel {\n margin: 0 10px 0 20px;\n}\n```\n\n#### JavaScript\n\n```js\nconst inputDiv = document.querySelector('.inner');\nconst inputElem = document.querySelector('input');\nconst resultsDiv = document.querySelector('.results');\n\ninputElem.addEventListener('change', () => {\n inputDiv.style.width = inputElem.value;\n\n const result = document.createElement('div');\n result.className = 'result';\n result.style.width = inputElem.value;\n result.innerHTML = `width: ${inputElem.value}`;\n resultsDiv.appendChild(result);\n\n inputElem.value = '';\n inputElem.focus();\n})\n```\n\n#### Result\n\n{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS values & units tutorial](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\n- [CSS values & units reference](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n- [Box Model](/en-US/docs/Web/CSS/CSS_Box_Model)\n" }, { "property": "line-break", "document": "---\ntitle: line-break\nslug: Web/CSS/line-break\ntags:\n - Asian\n - CSS\n - CSS Property\n - CSS Text\n - NeedsExample\n - Reference\n - i18n\n - l10n\n - recipe:css-property\nbrowser-compat: css.properties.line-break\n---\n{{CSSRef}}\n\nThe **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.\n\n```css\n/* Keyword values */\nline-break: auto;\nline-break: loose;\nline-break: normal;\nline-break: strict;\nline-break: anywhere;\n\n/* Global values */\nline-break: inherit;\nline-break: initial;\nline-break: revert;\nline-break: revert-layer;\nline-break: unset;\n```\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Break text using the default line break rule.\n- `loose`\n - : Break text using the least restrictive line break rule. Typically used for short lines, such as in newspapers.\n- `normal`\n - : Break text using the most common line break rule.\n- `strict`\n - : Break text using the most stringent line break rule.\n- `anywhere`\n - : There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the {{cssxref(\"word-break\")}} property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting text wrapping\n\nSee whether the text is wrapped before \"々\", \"ぁ\" and \"。\".\n\n#### HTML\n\n```html\n
    \n

    auto:
    そこは湖のほとりで木々が輝いていた。
    その景色に、美しいなぁと思わずつぶやいた。

    \n

    loose:
    そこは湖のほとりで木々が輝いていた。
    その景色に、美しいなぁと思わずつぶやいた。

    \n

    normal:
    そこは湖のほとりで木々が輝いていた。
    その景色に、美しいなぁと思わずつぶやいた。

    \n

    strict:
    そこは湖のほとりで木々が輝いていた。
    その景色に、美しいなぁと思わずつぶやいた。

    \n

    anywhere:
    そこは湖のほとりで木々が輝いていた。
    その景色に、美しいなぁと思わずつぶやいた。

    \n
    \n```\n\n#### CSS\n\n```css\n.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }\n.auto { line-break: auto; }\n.loose { line-break: loose; }\n.normal { line-break: normal; }\n.strict { line-break: strict; }\n.anywhere { line-break: anywhere; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_text_wrapping', 200, 400) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n- [CSS and International text](https://www.w3.org/International/articles/css3-text/)\n" }, { "property": "letter-spacing", "document": "---\ntitle: letter-spacing\nslug: Web/CSS/letter-spacing\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - SVG\n - recipe:css-property\nbrowser-compat: css.properties.letter-spacing\n---\n{{CSSRef}}\n\nThe **`letter-spacing`** [CSS](/en-US/docs/Web/CSS) property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of `letter-spacing` causes characters to spread farther apart, while negative values of `letter-spacing` bring characters closer together.\n\n{{EmbedInteractiveExample(\"pages/css/letter-spacing.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\nletter-spacing: normal;\n\n/* values */\nletter-spacing: 0.3em;\nletter-spacing: 3px;\nletter-spacing: .3px;\n\n/* Global values */\nletter-spacing: inherit;\nletter-spacing: initial;\nletter-spacing: revert;\nletter-spacing: revert-layer;\nletter-spacing: unset;\n```\n\n### Values\n\n- `normal`\n - : The normal letter spacing for the current font. Unlike a value of `0`, this keyword allows the {{glossary(\"user agent\")}} to alter the space between characters in order to justify text.\n- {{cssxref(\"<length>\")}}\n - : Specifies extra inter-character space _in addition to_ the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.\n\n## Accessibility concerns\n\nA large positive or negative `letter-spacing` value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.\n\nLegible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n\n## Internationalization concerns\n\nSome written languages should not have any letter spacing applied. For instance, languages that use the Arabic script expect connected letters to remain visually connected, as in the following example. Applying letter spacing will lead the text to look broken.\n\n>

    شسيبتنمك

    \n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting letter spacing\n\n#### HTML\n\n```html\n

    letter spacing

    \n

    letter spacing

    \n

    letter spacing

    \n

    letter spacing

    \n

    letter spacing

    \n```\n\n#### CSS\n\n```css\n.normal { letter-spacing: normal; }\n.em-wide { letter-spacing: 0.4em; }\n.em-wider { letter-spacing: 1em; }\n.em-tight { letter-spacing: -0.05em; }\n.px-wide { letter-spacing: 6px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_letter_spacing', 440, 185) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-kerning\")}}\n" }, { "property": "line-height-step", "document": "---\ntitle: line-height-step\nslug: Web/CSS/line-height-step\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.line-height-step\n---\n{{CSSRef}}\n\n{{SeeCompatTable}}\n\nThe **`line-height-step`** CSS property sets the step unit for line box heights. When the property is set, line box heights are rounded up to the closest multiple of the unit.\n\n```css\n/* Point values */\nline-height-step: 18pt;\n\n/* Global values */\nline-height-step: inherit;\nline-height-step: initial;\nline-height-step: revert;\nline-height-step: revert-layer;\nline-height-step: unset;\n```\n\n## Syntax\n\nThe `line-height-step` property is specified as any one of the following:\n\n- a ``.\n\n### Values\n\n- ``\n - : The specified {{cssxref(\"<length>\")}} is used in the calculation of the line box height step.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting step unit for line box height\n\nIn the following example, the height of line box in each paragraph is rounded up to the step unit. The line box in `

    ` does not fit into one step unit and thus occupies two, but it is still centered within the two step unit.\n\n```css\n:root {\n font-size: 12pt;\n --my-grid: 18pt;\n line-height-step: var(--my-grid);\n}\nh1 {\n font-size: 20pt;\n margin-top: calc(2 * var(--my-grid));\n}\n```\n\nThe result of these rules is shown below in the following screenshot:\n\n![How the line-height-step property affects the appearance of text.](line-grid-center.png)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"font\")}}\n- {{Cssxref(\"font-size\")}}\n- {{Cssxref(\"line-height\")}}\n" }, { "property": "grid-template-columns", "document": "---\ntitle: grid-template-columns\nslug: Web/CSS/grid-template-columns\ntags:\n - CSS\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.grid-template-columns\n---\n{{CSSRef}}\n\nThe **`grid-template-columns`** CSS property defines the line names and track sizing functions of the {{glossary(\"grid column\", \"grid columns\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/grid-template-columns.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\ngrid-template-columns: none;\n\n/* values */\ngrid-template-columns: 100px 1fr;\ngrid-template-columns: [linename] 100px;\ngrid-template-columns: [linename1] 100px [linename2 linename3];\ngrid-template-columns: minmax(100px, 1fr);\ngrid-template-columns: fit-content(40%);\ngrid-template-columns: repeat(3, 200px);\ngrid-template-columns: subgrid;\ngrid-template-columns: masonry;\n\n/* values */\ngrid-template-columns: 200px repeat(auto-fill, 100px) 300px;\ngrid-template-columns: minmax(100px, max-content)\n repeat(auto-fill, 200px) 20%;\ngrid-template-columns: [linename1] 100px [linename2]\n repeat(auto-fit, [linename3 linename4] 300px)\n 100px;\ngrid-template-columns: [linename1 linename2] 100px\n repeat(auto-fit, [linename1] 300px) [linename3];\n\n/* Global values */\ngrid-template-columns: inherit;\ngrid-template-columns: initial;\ngrid-template-columns: revert;\ngrid-template-columns: revert-layer;\ngrid-template-columns: unset;\n```\n\n### Values\n\n- `none`\n - : Indicates that there is no explicit grid. Any columns will be implicitly generated and their size will be determined by the {{cssxref(\"grid-auto-columns\")}} property.\n- `[linename]`\n - : A [``](/en-US/docs/Web/CSS/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.\n- {{cssxref(\"<length>\")}}\n - : A non-negative length, giving the width of the column.\n- {{cssxref(\"<percentage>\")}}\n - : Is a non-negative {{cssxref(\"percentage\", \"<percentage>\")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto`.\n The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.\n- {{cssxref(\"<flex>\")}}\n\n - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor.\n\n When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e. `minmax(auto, )`).\n\n- {{cssxref(\"max-content\")}}\n - : Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"min-content\")}}\n - : Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.\n- {{cssxref(\"minmax\", \"minmax(min, max)\")}}\n - : Is a functional notation that defines a size range greater than or equal to _min_ and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `` value sets the track's flex factor. It is invalid as a minimum.\n- `auto`\n\n - : As a maximum represents the largest {{cssxref(\"max-content\")}} size of the items in that track.\n\n As a minimum represents the largest minimum size of items in that track (specified by the {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}} of the items). This is often, though not always, the {{cssxref(\"min-content\")}} size.\n\n If used outside of {{cssxref(\"minmax\", \"minmax()\")}} notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.\n\n > **Note:** `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref(\"align-content\")}} and {{cssxref(\"justify-content\")}} properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.\n\n- `{{cssxref(\"fit-content_function\", \"fit-content( [ <length> | <percentage> ] )\")}}`\n - : Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e. `minmax(auto, max-content)`), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum.\n- {{cssxref(\"repeat\", \"repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )\")}}\n - : Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.\n- [`masonry`](/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout){{Experimental_Inline}}\n - : The masonry value indicates that this axis should be laid out according to the masonry algorithm.\n- [`subgrid`](/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)\n - : The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.\n\n> **Warning:** The `masonry` value is from Level 3 of the Grid specification and currently only has an experimental implementation behind a flag in Firefox.\n>\n> The `subgrid` value is from Level 2 of the Grid specification and currently only has implementation in Firefox 71 and onwards.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Specifying grid column sizes\n\n#### HTML\n\n```html\n
    \n
    A
    \n
    B
    \n
    \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n width: 100%;\n grid-template-columns: 50px 1fr;\n}\n\n#areaA {\n background-color: lime;\n}\n\n#areaB {\n background-color: yellow;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Specifying_grid_column_sizes\", \"100%\", \"20px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template-rows\")}}, {{cssxref(\"grid-template-areas\")}}, {{cssxref(\"grid-template\")}}\n- Grid Layout Guide: _[Basic concepts of grid layout - Grid Tracks](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_tracks)_\n- Video tutorial: _[Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/)_\n- [Subgrid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid)\n" }, { "property": "line-height", "document": "---\ntitle: line-height\nslug: Web/CSS/line-height\ntags:\n - CSS\n - CSS Fonts\n - CSS Property\n - Layout\n - Reference\n - Text\n - Vertical\n - height\n - recipe:css-property\n - size\nbrowser-compat: css.properties.line-height\n---\n{{CSSRef}}\n\nThe **`line-height`** [CSS](/en-US/docs/Web/CSS) property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-[replaced](/en-US/docs/Web/CSS/Replaced_element) inline elements, it specifies the height that is used to calculate line box height.\n\n{{EmbedInteractiveExample(\"pages/css/line-height.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\nline-height: normal;\n\n/* Unitless values: use this number multiplied\nby the element's font size */\nline-height: 3.5;\n\n/* values */\nline-height: 3em;\n\n/* values */\nline-height: 34%;\n\n/* Global values */\nline-height: inherit;\nline-height: initial;\nline-height: revert;\nline-height: revert-layer;\nline-height: unset;\n```\n\nThe `line-height` property is specified as any one of the following:\n\n- a ``\n- a ``\n- a ``\n- the keyword `normal`.\n\n### Values\n\n- `normal`\n - : Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly **`1.2`**, depending on the element's `font-family`.\n- `` (unitless)\n - : The used value is this unitless {{cssxref(\"<number>\")}} multiplied by the element's own font size. The computed value is the same as the specified ``. In most cases, **this is the preferred way** to set `line-height` and avoid unexpected results due to inheritance.\n- ``\n - : The specified {{cssxref(\"<length>\")}} is used in the calculation of the line box height. Values given in **em** units may produce unexpected results (see example below).\n- ``\n - : Relative to the font size of the element itself. The computed value is this {{cssxref(\"<percentage>\")}} multiplied by the element's computed font size. **Percentage** values may produce unexpected results (see the second example below).\n- `-moz-block-height` {{non-standard_inline}}\n - : Sets the line height to the content height of the current block.\n\n## Accessibility concerns\n\nUse a minimum value of `1.5` for `line-height` for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.\n\n[W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n```css\n/* All rules below have the same resultant line height */\n\ndiv { line-height: 1.2; font-size: 10pt; } /* number/unitless */\ndiv { line-height: 1.2em; font-size: 10pt; } /* length */\ndiv { line-height: 120%; font-size: 10pt; } /* percentage */\ndiv { font: 10pt/1.2 Georgia,\"Bitstream Charter\",serif; } /* font shorthand */\n```\n\nIt is often more convenient to set `line-height` by using the {{cssxref(\"font\")}} shorthand as shown above, but this requires the `font-family` property to be specified as well.\n\n### Prefer unitless numbers for line-height values\n\nThis example shows why it is better to use {{cssxref(\"<number>\")}} values instead of {{cssxref(\"<length>\")}} values. We will use two {{HTMLElement(\"div\")}} elements. The first, with the green border, uses a unitless `line-height` value. The second, with the red border, uses a `line-height` value defined in `em`s.\n\n#### HTML\n\n```html\n
    \n

    Avoid unexpected results by using unitless line-height.

    \n length and percentage line-heights have poor inheritance behavior ...\n
    \n\n
    \n

    Avoid unexpected results by using unitless line-height.

    \n length and percentage line-heights have poor inheritance behavior ...\n
    \n\n\n\n```\n\n#### CSS\n\n```css\n.green {\n line-height: 1.1;\n border: solid limegreen;\n}\n\n.red {\n line-height: 1.1em;\n border: solid red;\n}\n\nh1 {\n font-size: 30px;\n}\n\n.box {\n width: 18em;\n display: inline-block;\n vertical-align: top;\n font-size: 15px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"font\")}}, {{Cssxref(\"font-size\")}}\n" }, { "property": "list-style-image", "document": "---\ntitle: list-style-image\nslug: Web/CSS/list-style-image\ntags:\n - CSS\n - CSS Lists\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.list-style-image\n---\n{{CSSRef}}\n\nThe **`list-style-image`** [CSS](/en-US/docs/Web/CSS) property sets an image to be used as the list item marker.\n\nIt is often more convenient to use the shorthand {{ cssxref(\"list-style\") }}.\n\n{{EmbedInteractiveExample(\"pages/css/list-style-image.html\")}}\n\n> **Note:** This property is applied to list items, i.e. elements with `{{cssxref(\"display\")}}: list-item;` [by default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes {{HTMLElement(\"li\")}} elements. Because this property is inherited, it can be set on the parent element (normally {{HTMLElement(\"ol\")}} or {{HTMLElement(\"ul\")}}) to let it apply to all list items.\n\n## Syntax\n\n```css\n/* Keyword values */\nlist-style-image: none;\n\n/* values */\nlist-style-image: url('starsolid.gif');\n\n/* valid image values */\nlist-style-image: linear-gradient(to left bottom, red, blue);\n\n/* Global values */\nlist-style-image: inherit;\nlist-style-image: initial;\nlist-style-image: revert;\nlist-style-image: revert-layer;\nlist-style-image: unset;\n```\n\n### Values\n\n- {{cssxref(\"<image>\")}}\n - : A valid image to use as the marker.\n- `none`\n - : Specifies that no image is used as the marker. If this value is set, the marker defined in {{ Cssxref(\"list-style-type\") }} will be used instead.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using a url value\n\n#### HTML\n\n```html\n
      \n
    • Item 1
      • \n
    • Item 2
      • \n
    \n```\n\n#### CSS\n\n```css\nul {\n list-style-image: url(\"starsolid.gif\");\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Using_a_url_value') }}\n\n### Using a gradient\n\n#### HTML\n\n```html\n
      \n
    • Item 1
      • \n
    • Item 2
      • \n
    \n```\n\n#### CSS\n\n```css\nul {\n font-size: 200%;\n list-style-image: linear-gradient(to left bottom, red, blue);\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Using_a_gradient') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"list-style\")}}, {{Cssxref(\"list-style-type\")}}, {{Cssxref(\"list-style-position\")}}\n- {{cssxref(\"url\", \"url()\")}} function\n" }, { "property": "isolation", "document": "---\ntitle: isolation\nslug: Web/CSS/isolation\ntags:\n - CSS\n - CSS Property\n - Compositing and Blending\n - NeedsContent\n - isolation\n - recipe:css-property\nbrowser-compat: css.properties.isolation\n---\n{{CSSRef}}\n\nThe **`isolation`** [CSS](/en-US/docs/Web/CSS) property determines whether an element must create a new {{glossary(\"stacking context\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/isolation.html\")}}\n\nThis property is especially helpful when used in conjunction with {{cssxref(\"mix-blend-mode\")}} and {{cssxref(\"z-index\")}}.\n\n## Syntax\n\n```css\n/* Keyword values */\nisolation: auto;\nisolation: isolate;\n\n/* Global values */\nisolation: inherit;\nisolation: initial;\nisolation: revert;\nisolation: revert-layer;\nisolation: unset;\n```\n\nThe `isolation` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `auto`\n - : A new stacking context is created only if one of the properties applied to the element requires it.\n- `isolate`\n - : A new stacking context must be created.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Forcing a new stacking context for an element\n\n#### HTML\n\n```html\n
    \n
    \n
    auto
    \n
    \n
    \n
    isolate
    \n
    \n
    \n```\n\n#### CSS\n\n```css\n.a {\n background-color: rgb(0,255,0);\n}\n#b {\n width: 200px;\n height: 210px;\n}\n.c {\n width: 100px;\n height: 100px;\n border: 1px solid black;\n padding: 2px;\n mix-blend-mode: difference;\n}\n#d {\n isolation: auto;\n}\n#e {\n isolation: isolate;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Forcing_a_new_stacking_context_for_an_element', 230, 230) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<blend-mode>\")}}\n- {{cssxref(\"mix-blend-mode\")}}, {{cssxref(\"background-blend-mode\")}}\n" }, { "property": "initial", "document": "---\ntitle: initial\nslug: Web/CSS/initial\ntags:\n - CSS\n - CSS Cascade\n - CSS Value\n - Default state\n - Initial state\n - Keyword\n - Layout\n - Reference\n - initial\nbrowser-compat: css.types.global_keywords.initial\n---\n{{CSSRef}}\n\nThe **`initial`** CSS keyword applies the [initial (or default) value](/en-US/docs/Web/CSS/initial_value) of a property to an element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref(\"all\")}}. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately.\n\nOn [inherited properties](/en-US/docs/Web/CSS/inheritance#inherited_properties), the initial value may be unexpected. You should consider using the {{cssxref(\"inherit\")}}, {{cssxref(\"unset\")}}, {{cssxref(\"revert\")}}, or {{cssxref(\"revert-layer\")}} keywords instead.\n\n## Examples\n\n### Using initial to reset color for an element\n\n#### HTML\n\n```html\n

    \n This text is red.\n This text is in the initial color (typically black).\n This is red again.\n

    \n```\n\n#### CSS\n\n```css\np {\n color: red;\n}\n\nem {\n color: initial;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Using_initial_to_reset_color_for_an_element')}}\n\nWith the `initial` keyword in this example, `color` value on the `em` element is restored to the initial value of [`color`](/en-US/docs/Web/CSS/color#formal_definition), as defined in the specification.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Use the {{cssxref(\"inherit\")}} keyword to make an element's property the same as its parent.\n- Use the {{cssxref(\"revert\")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).\n- Use the {{cssxref(\"revert-layer\")}} keyword to reset a property to the value established in a previous cascade layer.\n- Use the {{cssxref(\"unset\")}} keyword to set a property to its inherited value if it inherits or to its initial value if not.\n- The {{cssxref(\"all\")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.\n" }, { "property": "list-style", "document": "---\ntitle: list-style\nslug: Web/CSS/list-style\ntags:\n - CSS\n - CSS Lists\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.list-style\n---\n{{CSSRef}}\n\nThe **`list-style`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) allows you to set all the list style properties at once.\n\n{{EmbedInteractiveExample(\"pages/css/list-style.html\")}}\n\n> **Note:** This property is applied to list items, i.e., elements with `{{cssxref(\"display\")}}: list-item;` . [By default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes {{HTMLElement(\"li\")}} elements. Because this property is inherited, it can be set on a parent element (normally {{HTMLElement(\"ol\")}} or {{HTMLElement(\"ul\")}}) to make the same list styling apply to all the items inside.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`list-style-image`](/en-US/docs/Web/CSS/list-style-image)\n- [`list-style-position`](/en-US/docs/Web/CSS/list-style-position)\n- [`list-style-type`](/en-US/docs/Web/CSS/list-style-type)\n\n## Syntax\n\n```css\n/* type */\nlist-style: square;\n\n/* image */\nlist-style: url('../img/shape.png');\n\n/* position */\nlist-style: inside;\n\n/* type | position */\nlist-style: georgian inside;\n\n/* type | image | position */\nlist-style: lower-roman url('../img/shape.png') outside;\n\n/* Keyword value */\nlist-style: none;\n\n/* Global values */\nlist-style: inherit;\nlist-style: initial;\nlist-style: revert;\nlist-style: revert-layer;\nlist-style: unset;\n```\n\nThe `list-style` property is specified as one, two, or three keywords in any order. If {{cssxref(\"list-style-type\")}} and {{cssxref(\"list-style-image\")}} are both set, then `list-style-type` is used as a fallback if the image is unavailable.\n\n### Values\n\n- {{cssxref(\"list-style-type\")}}\n - : See {{cssxref(\"list-style-type\")}}.\n- {{cssxref(\"list-style-image\")}}\n - : See {{cssxref(\"list-style-image\")}}.\n- {{cssxref(\"list-style-position\")}}\n - : See {{cssxref(\"list-style-position\")}}.\n- `none`\n - : No list style is used.\n\n## Accessibility concerns\n\nIn a notable exception, Safari will not recognize an unordered list as a list in the accessibility tree if has a `list-style` value of `none`.\n\nThe most straightforward way to address this is to add an explicit `role=\"list\"` to the `
      ` element in the markup. This will restore the list semantics without affecting the design.\n\nCSS-only workarounds are also available for those who do not have access to the markup. One is to add a [zero-width space](https://en.wikipedia.org/wiki/Zero-width_space) as [pseudo-content](/en-US/docs/Web/CSS/content) before each list item:\n\n```css\nul {\n list-style: none;\n}\n\nul li::before {\n content: \"\\200B\";\n}\n```\n\nA second approach is to apply a url value to the list-style property:\n\n```css\nnav ol, nav ul {\n list-style: none;\n}\n\n/* becomes */\n\nnav ol, nav ul {\n list-style: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E\");\n}\n```\n\nThese CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact users' experiences.\n\n- ['Fixing' Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)\n- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)\n- [MDN Understanding WCAG, Guideline 1.3 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)\n- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting list style type and position\n\n#### HTML\n\n```html\nList 1\n
        \n
      • List Item1
        • \n
      • List Item2
        • \n
      • List Item3
        • \n
      \nList 2\n
        \n
      • List Item A
        • \n
      • List Item B
        • \n
      • List Item C
        • \n
      \n```\n\n#### CSS\n\n```css\n.one {\n list-style: circle;\n}\n\n.two {\n list-style: square inside;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_list_style_type_and_position', 'auto', 220)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"list-style-type\")}}, {{Cssxref(\"list-style-image\")}}, {{Cssxref(\"list-style-position\")}}\n" }, { "property": "margin-block-end", "document": "---\ntitle: margin-block-end\nslug: Web/CSS/margin-block-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - NeedsContent\n - Reference\n - margin-block\n - margin-block-end\n - recipe:css-property\nbrowser-compat: css.properties.margin-block-end\n---\n{{CSSRef}}\n\nThe **`margin-block-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical block end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/margin-block-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-block-end: 10px; /* An absolute length */\nmargin-block-end: 1em; /* relative to the text size */\nmargin-block-end: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-block-end: auto;\n\n/* Global values */\nmargin-block-end: inherit;\nmargin-block-end: initial;\nmargin-block-end: revert;\nmargin-block-end: revert-layer;\nmargin-block-end: unset;\n```\n\nIt corresponds to the {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, or {{cssxref(\"margin-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\nIt relates to {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}}, which define the other margins of the element.\n\n### Values\n\nThe `margin-block-end` property takes the same values as the {{cssxref(\"margin-left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block end margin\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n margin-block-end: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_end_margin\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "margin-block", "document": "---\ntitle: margin-block\nslug: Web/CSS/margin-block\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - margin-block\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.margin-block\n---\n{{CSSRef}}\n\nThe **`margin-block`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/margin-block.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"margin-block-start\")}}\n- {{cssxref(\"margin-block-end\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-block: 10px 20px; /* An absolute length */\nmargin-block: 1em 2em; /* relative to the text size */\nmargin-block: 5% 2%; /* relative to the nearest block container's width */\nmargin-block: 10px; /* sets both start and end values */\n\n/* Keyword values */\nmargin-block: auto;\n\n/* Global values */\nmargin-block: inherit;\nmargin-block: initial;\nmargin-block: revert;\nmargin-block: revert-layer;\nmargin-block: unset;\n```\n\nThis property corresponds to the {{CSSxRef(\"margin-top\")}} and {{CSSxRef(\"margin-bottom\")}}, or the {{CSSxRef(\"margin-right\")}} and {{CSSxRef(\"margin-left\")}} properties, depending on the values defined for {{CSSxRef(\"writing-mode\")}}, {{CSSxRef(\"direction\")}}, and {{CSSxRef(\"text-orientation\")}}.\n\nThe `margin-block` property may be specified using one or two values.\n\n- When **one** value is specified, it applies the same margin to **both start and end**.\n- When **two** values are specified, the first margin applies to the **start**, the second to the **end**.\n\n### Values\n\nThe `margin-block` property takes the same values as the {{CSSxRef(\"margin\", \"\", \"#values\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block start and end margins\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: auto;\n border: 1px solid green;\n}\n\np {\n margin: 0;\n margin-block: 20px 40px;\n background-color: tan;\n}\n\n.verticalExample {\n writing-mode: vertical-rl;\n}\n```\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n
      \n

      Example text

      \n
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_start_and_end_margins\", 140, 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{CSSxRef(\"margin-top\")}}, {{CSSxRef(\"margin-right\")}}, {{CSSxRef(\"margin-bottom\")}}, and {{CSSxRef(\"margin-left\")}}\n- {{CSSxRef(\"writing-mode\")}}, {{CSSxRef(\"direction\")}}, {{CSSxRef(\"text-orientation\")}}\n" }, { "property": "list-style-type", "document": "---\ntitle: list-style-type\nslug: Web/CSS/list-style-type\ntags:\n - CSS\n - CSS Lists\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.list-style-type\n---\n{{CSSRef}}\n\nThe **`list-style-type`** [CSS](/en-US/docs/Web/CSS) property sets the marker (such as a disc, character, or custom counter style) of a list item element.\n\n{{EmbedInteractiveExample(\"pages/css/list-style-type.html\")}}\n\nThe [color](/en-US/docs/Web/CSS/color_value) of the marker will be the same as the computed color of the element it applies to.\n\nOnly a few elements ({{HTMLElement(\"li\")}} and {{HTMLElement(\"summary\")}}) have a default value of `display: list-item`. However, the `list-style-type` property may be applied to any element whose {{cssxref(\"display\")}} value is set to `list-item`. Moreover, because this property is inherited, it can be set on a parent element (commonly {{HTMLElement(\"ol\")}} or {{HTMLElement(\"ul\")}}) to make it apply to all list items.\n\n## Syntax\n\n```css\n/* Partial list of types */\nlist-style-type: disc;\nlist-style-type: circle;\nlist-style-type: square;\nlist-style-type: decimal;\nlist-style-type: georgian;\nlist-style-type: trad-chinese-informal;\nlist-style-type: kannada;\n\n/* value */\nlist-style-type: '-';\n\n/* Identifier matching an @counter-style rule */\nlist-style-type: custom-counter-style;\n\n/* Keyword value */\nlist-style-type: none;\n\n/* Global values */\nlist-style-type: inherit;\nlist-style-type: initial;\nlist-style-type: revert;\nlist-style-type: revert-layer;\nlist-style-type: unset;\n```\n\nThe `list-style-type` property may be defined as any one of:\n\n- a `` value\n- a `symbols()` value\n- a `` value\n- the keyword `none`.\n\nNote that:\n\n- Some types require a suitable font installed to display as expected.\n- The `cjk-ideographic` is identical to `trad-chinese-informal`; it exists for legacy reasons.\n\n### Values\n\n- {{cssxref(\"custom-ident\", \"<custom-ident>\")}}\n - : A identifier matching the value of a {{cssxref(\"@counter-style\")}} or one of the predefined styles:\n- {{cssxref(\"symbols\", \"symbols()\")}}\n - : Defines an anonymous style of the list.\n- {{cssxref(\"<string>\")}}\n - : The specified string will be used as the item's marker.\n- `none`\n - : No item marker is shown.\n- `disc`\n - : A filled circle (default value).\n- `circle`\n - : A hollow circle.\n- `square`\n - : A filled square.\n- `decimal`\n - : Decimal numbers, beginning with 1.\n- `cjk-decimal` {{experimental_inline}}\n - : Han decimal numbers.\n- `decimal-leading-zero`\n - : Decimal numbers, padded by initial zeros.\n- `lower-roman`\n - : Lowercase roman numerals.\n- `upper-roman`\n - : Uppercase roman numerals.\n- `lower-greek`\n - : Lowercase classical Greek.\n- `lower-alpha`, `lower-latin`\n - : Lowercase ASCII letters.\n- `upper-alpha`, `upper-latin`\n - : Uppercase ASCII letters.\n- `arabic-indic`, `-moz-arabic-indic`\n - : Arabic-Indic numbers.\n- `armenian`\n - : Traditional Armenian numbering.\n- `bengali`, `-moz-bengali`\n - : Bengali numbering.\n- `cambodian`/`khmer`\n - : Cambodian/Khmer numbering.\n- `cjk-earthly-branch`, `-moz-cjk-earthly-branch`\n - : Han \"Earthly Branch\" ordinals.\n- `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem`\n - : Han \"Heavenly Stem\" ordinals.\n- `cjk-ideographic`{{experimental_inline}}\n - : Identical to `trad-chinese-informal`.\n- `devanagari`, `-moz-devanagari`\n - : Devanagari numbering.\n- `ethiopic-numeric` {{experimental_inline}}\n - : Ethiopic numbering.\n- `georgian`\n - : Traditional Georgian numbering.\n- `gujarati`, `-moz-gujarati`\n - : Gujarati numbering.\n- `gurmukhi`, `-moz-gurmukhi`\n - : Gurmukhi numbering.\n- `hebrew` {{experimental_inline}}\n - : Traditional Hebrew numbering\n- `hiragana` {{experimental_inline}}\n - : Dictionary-order hiragana lettering.\n- `hiragana-iroha` {{experimental_inline}}\n - : {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} hiragana lettering\n- `japanese-formal` {{experimental_inline}}\n - : Japanese formal numbering to be used in legal or financial documents. The kanjis are designed so that they can't be modified to look like another correct one.\n- `japanese-informal` {{experimental_inline}}\n - : Japanese informal numbering.\n- `kannada`, `-moz-kannada`\n - : Kannada numbering.\n- `katakana` {{experimental_inline}}\n - : Dictionary-order katakana lettering\n- `katakana-iroha` {{experimental_inline}}\n - : {{interwiki('wikipedia', 'Iroha', 'Iroha-order')}} katakana lettering\n- `korean-hangul-formal` {{experimental_inline}}\n - : Korean hangul numbering.\n- `korean-hanja-formal` {{experimental_inline}}\n - : Formal Korean Han numbering.\n- `korean-hanja-informal` {{experimental_inline}}\n - : Korean hanja numbering.\n- `lao`, `-moz-lao`\n - : Laotian numbering.\n- `lower-armenian` {{experimental_inline}}\\*\n - : Lowercase Armenian numbering.\n- `malayalam`, `-moz-malayalam`\n - : Malayalam numbering.\n- `mongolian` {{experimental_inline}}\n - : Mongolian numbering.\n- `myanmar`, `-moz-myanmar`\n - : Myanmar (Burmese) numbering.\n- `oriya`, `-moz-oriya`\n - : Oriya numbering.\n- `persian` {{experimental_inline}}, `-moz-persian`\n - : Persian numbering\n- `simp-chinese-formal` {{experimental_inline}}\n - : Simplified Chinese formal numbering.\n- `simp-chinese-informal` {{experimental_inline}}\n - : Simplified Chinese informal numbering.\n- `tamil` {{experimental_inline}}, `-moz-tamil`\n - : Tamil numbering.\n- `telugu`, `-moz-telugu`\n - : Telugu numbering.\n- `thai`, `-moz-thai`\n - : Thai numbering.\n- `tibetan` {{experimental_inline}}\\*\n - : Tibetan numbering.\n- `trad-chinese-formal` {{experimental_inline}}\n - : Traditional Chinese formal numbering.\n- `trad-chinese-informal` {{experimental_inline}}\n - : Traditional Chinese informal numbering.\n- `upper-armenian` {{experimental_inline}}\\*\n - : Traditional uppercase Armenian numbering.\n- `disclosure-open` {{experimental_inline}}\n - : Symbol indicating that a disclosure widget such as {{HTMLElement(\"details\")}} is opened.\n- `disclosure-closed` {{experimental_inline}}\n - : Symbol indicating that a disclosure widget, like {{HTMLElement(\"details\")}} is closed.\n\n### Non-standard extensions\n\nA few more predefined types are provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.\n\n- `-moz-ethiopic-halehame`\n- `-moz-ethiopic-halehame-am`\n- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er`\n- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et`\n- `hangul`, `-moz-hangul`\n- `hangul-consonant`, `-moz-hangul-consonant`\n- `urdu`, `-moz-urdu`\n\n## Accessibility concerns\n\nThe [VoiceOver](https://help.apple.com/voiceover/info/guide/) screen reader has an issue where unordered lists with a `list-style-type` value of `none` applied to them will not be announced as a list. To address this, add a [zero-width space](https://en.wikipedia.org/wiki/Zero-width_space) as [pseudo content](/en-US/docs/Web/CSS/content) before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.\n\n```css\nul {\n list-style: none;\n}\n\nul li::before {\n content: \"\\200B\";\n}\n```\n\n- [VoiceOver and list-style-type: none – Unfettered Thoughts](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/)\n- [MDN Understanding WCAG, Guideline 1.3 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)\n- [Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting list item markers\n\n#### HTML\n\n```html\nList 1\n
        \n
      1. Hello
        2. \n
      2. World
        3. \n
      3. What's up?
        4. \n
      \n\nList 2\n
        \n
      1. Looks
        2. \n
      2. Like
        3. \n
      3. The
        4. \n
      4. Same
        5. \n
      \n```\n\n#### CSS\n\n```css\nol.normal {\n list-style-type: upper-alpha;\n}\n\n/* or use the shortcut \"list-style\": */\nol.shortcut {\n list-style: upper-alpha;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_list_item_markers\",\"200\",\"300\")}}\n\n### All list style types\n\n#### HTML\n\n```html\n
        \n
      1. Apollo
        2. \n
      2. Hubble
        3. \n
      3. Chandra
        4. \n
      4. Cassini-Huygens
        5. \n
      5. Spitzer
        6. \n
      \n\n

      Choose a list style type:

      \n\n
      \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n
      \n```\n\n#### CSS\n\n```css\n\nol {\n font-size: 1.2rem;\n}\n\n.container {\n column-count: 3;\n}\n\nlabel {\n display: block;\n}\n\ninput {\n margin: .4rem;\n}\n```\n\n#### JavaScript\n\n```js\nconst container = document.querySelector(\".container\");\ncontainer.addEventListener(\"change\", event => {\n const list = document.querySelector(\"ol\");\n list.setAttribute(\"style\", `list-style-type: ${event.target.value}`);\n});\n```\n\n#### Result\n\n{{EmbedLiveSample(\"All_list_style_types\", \"600\", \"800\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"list-style\")}}, {{Cssxref(\"list-style-image\")}}, {{Cssxref(\"list-style-position\")}}\n" }, { "property": "left", "document": "---\ntitle: left\nslug: Web/CSS/left\ntags:\n - CSS\n - CSS Positioning\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.left\n---\n{{CSSRef}}\n\nThe **`left`** [CSS](/en-US/docs/Web/CSS) property participates in specifying the horizontal position of a [positioned element](/en-US/docs/Web/CSS/position). It has no effect on non-positioned elements.\n\n{{EmbedInteractiveExample(\"pages/css/left.html\")}}\n\n## Syntax\n\n```css\n/* values */\nleft: 3px;\nleft: 2.4em;\n\n/* s of the width of the containing block */\nleft: 10%;\n\n/* Keyword value */\nleft: auto;\n\n/* Global values */\nleft: inherit;\nleft: initial;\nleft: revert;\nleft: revert-layer;\nleft: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n\n - : A negative, null, or positive {{cssxref(\"<length>\")}} that represents:\n\n - for _absolutely positioned elements_, the distance to the left edge of the containing block.\n - for _relatively positioned elements_, the distance that the element is moved to the right of its normal position.\n\n- {{cssxref(\"<percentage>\")}}\n - : A {{cssxref(\"<percentage>\")}} of the containing block's width.\n- `auto`\n\n - : Specifies that:\n\n - for _absolutely positioned elements_, the position of the element is based on the {{Cssxref(\"right\")}} property, while `width: auto` is treated as a width based on the content; or if `right` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.\n - for _relatively positioned elements_, the distance of the element from its normal position is based on the {{Cssxref(\"right\")}} property; or if `right` is also `auto`, the element is not moved horizontally at all.\n\n- `inherit`\n - : Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref(\"<length>\")}}, {{cssxref(\"<percentage>\")}}, or the `auto` keyword.\n\n## Description\n\nThe effect of `left` depends on how the element is positioned (i.e., the value of the {{cssxref(\"position\")}} property):\n\n- When `position` is set to `absolute` or `fixed`, the `left` property specifies the distance between the element's left edge and the left edge of its containing block. (The containing block is the ancestor to which the element is relatively positioned.)\n- When `position` is set to `relative`, the `left` property specifies the distance the element's left edge is moved to the right from its normal position.\n- When `position` is set to `sticky`, the `left` property is used to compute the sticky-constraint rectangle.\n- When `position` is set to `static`, the `left` property has _no effect_.\n\nWhen both `left` and {{cssxref(\"right\")}} are defined, and width constraints don't prevent it, the element will stretch to satisfy both. If the element cannot stretch to satisfy both, the position of the element is _overspecified_. When this is the case, the `left` value has precedence when the container is left-to-right; the `right` value has precedence when the container is right-to-left.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Positioning elements\n\n#### HTML\n\n```html\n
      \n
      \n 
      \n      position: absolute;\n      left: 20px;\n      top: 20px;\n
      \n

      The only containing element for this div is the main window, so it positions itself in relation to it.

      \n
      \n\n
      \n 
      \n      position: relative;\n      top: 0;\n      right: 0;\n
      \n

      Relative position in relation to its siblings.

      \n
      \n\n
      \n 
      \n      float: right;\n      position: relative;\n      top: 20px;\n      left: 20px;\n
      \n

      Relative to its sibling div above, but removed from flow of content.

      \n\n
      \n 
      \n        position: absolute;\n        bottom: 10px;\n        right: 20px;\n
      \n

      Absolute position inside of a parent with relative position

      \n
      \n\n
      \n 
      \n        position: absolute;\n        right: 0;\n        left: 0;\n        top: 200px;\n
      \n

      Absolute position with both left and right declared

      \n
      \n
      \n```\n\n#### CSS\n\n```css\n#wrap {\n width: 700px;\n margin: 0 auto;\n background: #5C5C5C;\n}\n\npre {\n white-space: pre;\n white-space: pre-wrap;\n white-space: pre-line;\n word-wrap: break-word;\n}\n\n#example_1 {\n width: 200px;\n height: 200px;\n position: absolute;\n left: 20px;\n top: 20px;\n background-color: #D8F5FF;\n}\n\n#example_2 {\n width: 200px;\n height: 200px;\n position: relative;\n top: 0;\n right: 0;\n background-color: #C1FFDB;\n\n}\n#example_3 {\n width: 600px;\n height: 400px;\n position: relative;\n top: 20px;\n left: 20px;\n background-color: #FFD7C2;\n}\n\n#example_4 {\n width:200px;\n height:200px;\n position:absolute;\n bottom:10px;\n right:20px;\n background-color:#FFC7E4;\n}\n#example_5 {\n position: absolute;\n right: 0;\n left: 0;\n top: 100px;\n background-color: #D7FFC2;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Positioning_elements',1200,650)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"inset\")}}, the shorthand for all related properties: {{cssxref(\"top\")}}, {{cssxref(\"bottom\")}}, {{cssxref(\"left\")}}, and {{cssxref(\"right\")}}\n- The mapped logical properties: {{cssxref(\"inset-block-start\")}}, {{cssxref(\"inset-block-end\")}}, {{cssxref(\"inset-inline-start\")}}, and {{cssxref(\"inset-inline-end\")}} and the shorthands {{cssxref(\"inset-block\")}} and {{cssxref(\"inset-inline\")}}\n- {{cssxref(\"position\")}}\n" }, { "property": "margin-bottom", "document": "---\ntitle: margin-bottom\nslug: Web/CSS/margin-bottom\ntags:\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.margin-bottom\n---\n{{CSSRef}}\n\nThe **`margin-bottom`** [CSS](/en-US/docs/Web/CSS) property sets the [margin area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin_area) on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\n{{EmbedInteractiveExample(\"pages/css/margin-bottom.html\")}}\n\n![The effect of the CSS margin-bottom property on the element box](margin-bottom.svg)\n\nThis property has no effect on _non-[replaced](/en-US/docs/Web/CSS/Replaced_element)_ inline elements, such as {{HTMLElement(\"span\")}} or {{HTMLElement(\"code\")}}.\n\n## Syntax\n\n```css\n/* values */\nmargin-bottom: 10px; /* An absolute length */\nmargin-bottom: 1em; /* relative to the text size */\nmargin-bottom: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-bottom: auto;\n\n/* Global values */\nmargin-bottom: inherit;\nmargin-bottom: initial;\nmargin-bottom: revert;\nmargin-bottom: revert-layer;\nmargin-bottom: unset;\n```\n\nThe `margin-bottom` property is specified as the keyword `auto`, or a ``, or a ``. Its value can be positive, zero, or negative.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the margin as a fixed value.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `auto`\n - : The browser selects a suitable value to use. See {{cssxref(\"margin\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting positive and negative bottom margins\n\n#### HTML\n\n```html\n
      \n
      Box 0
      \n
      Box 1
      \n
      Box one's negative margin pulls me up
      \n
      \n```\n\n#### CSS\n\nCSS for divs to set margin-bottom and height\n\n```css\n.box0 {\n margin-bottom:1em;\n height:3em;\n}\n.box1 {\n margin-bottom:-1.5em;\n height:4em;\n}\n.box2 {\n border:1px dashed black;\n border-width:1px 0;\n margin-bottom:2em;\n}\n```\n\nSome definitions for container and divs so margins' effects can be seen more clearly\n\n```css\n.container {\n background-color:orange;\n width:320px;\n border:1px solid black;\n}\ndiv {\n width:320px;\n background-color:gold;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, and {{cssxref(\"margin-left\")}} and the {{cssxref(\"margin\")}} shorthand\n- The mapped logical properties: {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}} and the shorthands {{cssxref(\"margin-block\")}} and {{cssxref(\"margin-inline\")}}\n" }, { "property": "margin-inline-start", "document": "---\ntitle: margin-inline-start\nslug: Web/CSS/margin-inline-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - margin-inline\n - margin-inline-start\n - recipe:css-property\nbrowser-compat: css.properties.margin-inline-start\n---\n{{CSSRef}}\n\nThe **`margin-inline-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, or {{cssxref(\"margin-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/margin-inline-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-inline-start: 10px; /* An absolute length */\nmargin-inline-start: 1em; /* relative to the text size */\nmargin-inline-start: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-inline-start: auto;\n\n/* Global values */\nmargin-inline-start: inherit;\nmargin-inline-start: initial;\nmargin-inline-start: revert;\nmargin-inline-start: revert-layer;\nmargin-inline-start: unset;\n```\n\nIt relates to {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, and {{cssxref(\"margin-inline-end\")}}, which define the other margins of the element.\n\n### Values\n\nThe `margin-inline-start` property takes the same values as the {{cssxref(\"margin-left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline start margin\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n margin-inline-start: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_start_margin\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-inline-end\")}}\n- The mapped physical properties: {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "margin-inline", "document": "---\ntitle: margin-inline\nslug: Web/CSS/margin-inline\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - margin-inline\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.margin-inline\n---\n{{CSSRef}}\n\nThe **`margin-inline`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/margin-inline.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"margin-inline-start\")}}\n- {{cssxref(\"margin-inline-end\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-inline: 10px 20px; /* An absolute length */\nmargin-inline: 1em 2em; /* relative to the text size */\nmargin-inline: 5% 2%; /* relative to the nearest block container's width */\nmargin-inline: 10px; /* sets both start and end values */\n\n/* Keyword values */\nmargin-inline: auto;\n\n/* Global values */\nmargin-inline: inherit;\nmargin-inline: initial;\nmargin-inline: revert;\nmargin-inline: revert-layer;\nmargin-inline: unset;\n```\n\nThis property corresponds to the {{CSSxRef(\"margin-top\")}} and {{CSSxRef(\"margin-bottom\")}}, or the {{CSSxRef(\"margin-right\")}} and {{CSSxRef(\"margin-left\")}} properties, depending on the values defined for {{CSSxRef(\"writing-mode\")}}, {{CSSxRef(\"direction\")}}, and {{CSSxRef(\"text-orientation\")}}.\n\nThe `margin-inline` property may be specified using one or two values.\n\n- When **one** value is specified, it applies the same margin to **both start and end**.\n- When **two** values are specified, the first margin applies to the **start**, the second to the **end**.\n\n### Values\n\nThe `margin-inline` property takes the same values as the {{CSSxRef(\"margin\", \"\", \"#values\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline start and end margins\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: auto;\n border: 1px solid green;\n}\n\np {\n margin: 0;\n margin-inline: 20px 40px;\n background-color: tan;\n}\n\n.verticalExample {\n writing-mode: vertical-rl;\n}\n```\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n
      \n

      Example text

      \n
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_start_and_end_margins\", 140, 240)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{CSSxRef(\"margin-top\")}}, {{CSSxRef(\"margin-right\")}}, {{CSSxRef(\"margin-bottom\")}}, and {{CSSxRef(\"margin-left\")}}\n- {{CSSxRef(\"writing-mode\")}}, {{CSSxRef(\"direction\")}}, {{CSSxRef(\"text-orientation\")}}\n" }, { "property": "margin-left", "document": "---\ntitle: margin-left\nslug: Web/CSS/margin-left\ntags:\n - CSS\n - CSS Property\n - Layout\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.margin-left\n---\n{{CSSRef}}\n\nThe **`margin-left`** [CSS](/en-US/docs/Web/CSS) property sets the [margin area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin_area) on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\n{{EmbedInteractiveExample(\"pages/css/margin-left.html\")}}\n\nThe vertical margins of two adjacent boxes may fuse. This is called [_margin collapsing_](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).\n\nIn the rare cases where width is overconstrained (i.e., when all of `width`, `margin-left`, `border`, `padding`, the content area, and `margin-right` are defined), `margin-left` is ignored, and will have the same calculated value as if the `auto` value was specified.\n\n## Syntax\n\n```css\n/* values */\nmargin-left: 10px; /* An absolute length */\nmargin-left: 1em; /* relative to the text size */\nmargin-left: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-left: auto;\n\n/* Global values */\nmargin-left: inherit;\nmargin-left: initial;\nmargin-left: revert;\nmargin-left: revert-layer;\nmargin-left: unset;\n```\n\nThe `margin-left` property is specified as the keyword `auto`, or a ``, or a ``. Its value can be positive, zero, or negative.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the margin as a fixed value.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `auto`\n\n - : The left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      Value of {{cssxref(\"display\")}}Value of {{cssxref(\"float\")}}Value of {{cssxref(\"position\")}}Computed value of autoComment
      \n inline, inline-block,\n inline-table\n anystatic or relative0Inline layout mode
      \n block, inline, inline-block,\n block, table, inline-table,\n list-item, table-caption\n anystatic or relative\n 0, except if both margin-left and\n margin-right are set to auto. In this case, it\n is set to the value centering the element inside its parent.\n Block layout mode
      \n block, inline, inline-block,\n block, table, inline-table,\n list-item, table-caption\n left or rightstatic or relative0Block layout mode (floating element)
      \n any table-*, except table-caption\n anyany0\n Internal table-* elements don't have margins, use\n {{ cssxref(\"border-spacing\") }} instead\n
      \n any, except flex, inline-flex, or table-*\n any\n fixed or absolute\n \n 0, except if both margin-left and\n margin-right are set to auto. In this case, it\n is set to the value centering the border area inside the available\n width, if fixed.\n Absolutely positioned layout mode
      flex, inline-flexanyany\n 0, except if there is any positive horizontal free space.\n In this case, it is evenly distributed to all horizontal\n auto margins.\n Flexbox layout mode
      \n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting left margin using pixels and percentages\n\n```css\n.content { margin-left: 5%; }\n.sidebox { margin-left: 10px; }\n.logo { margin-left: -5px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, and {{cssxref(\"margin-bottom\")}} and the {{cssxref(\"margin\")}} shorthand\n- The mapped logical properties: {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}} and the shorthands {{cssxref(\"margin-block\")}} and {{cssxref(\"margin-inline\")}}\n" }, { "property": "margin-right", "document": "---\ntitle: margin-right\nslug: Web/CSS/margin-right\ntags:\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.margin-right\n---\n{{CSSRef}}\n\nThe **`margin-right`** [CSS](/en-US/docs/Web/CSS) property sets the [margin area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin_area) on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\n{{EmbedInteractiveExample(\"pages/css/margin-right.html\")}}\n\nThe vertical margins of two adjacent boxes may fuse. This is called [_margin collapsing_](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).\n\n## Syntax\n\n```css\n/* values */\nmargin-right: 20px; /* An absolute length */\nmargin-right: 1em; /* relative to the text size */\nmargin-right: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-right: auto;\n\n/* Global values */\nmargin-right: inherit;\nmargin-right: initial;\nmargin-right: revert;\nmargin-right: revert-layer;\nmargin-right: unset;\n```\n\nThe `margin-right` property is specified as the keyword `auto`, or a ``, or a ``. Its value can be positive, zero, or negative.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the margin as a fixed value.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `auto`\n\n - : The right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. If the values of `margin-left` and `margin-right` are both `auto`, the calculated space is evenly distributed. This table summarizes the different cases:\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      Value of {{cssxref(\"display\")}}Value of {{cssxref(\"float\")}}Value of {{cssxref(\"position\")}}Computed value of autoComment
      \n inline, inline-block,\n inline-table\n anystatic or relative0Inline layout mode
      \n block, inline, inline-block,\n block, table, inline-table,\n list-item, table-caption\n anystatic or relative\n 0, except if both margin-left and\n margin-right are set to auto. In this case, it\n is set to the value centering the element inside its parent.\n Block layout mode
      \n block, inline, inline-block,\n block, table, inline-table,\n list-item, table-caption\n left or rightstatic or relative0Block layout mode (floating element)
      \n any table-*, except table-caption\n anyany0\n Internal table-* elements don't have margins, use\n {{ cssxref(\"border-spacing\") }} instead\n
      \n any, except flex, inline-flex, or table-*\n any\n fixed or absolute\n \n 0, except if both margin-left and\n margin-right are set to auto. In this case, it\n is set to the value centering the border area inside the available\n width, if fixed.\n Absolutely positioned layout mode
      flex, inline-flexanyany\n 0, except if there is any positive horizontal free space.\n In this case, it is evenly distributed to all horizontal\n auto margins.\n Flexbox layout mode
      \n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting right margin using pixels and percentages\n\n```css\n.content { margin-right: 5%; }\n.sidebox { margin-right: 10px; }\n.logo { margin-right: -5px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}} and the {{cssxref(\"margin\")}} shorthand\n- The mapped logical properties: {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}} and the shorthands {{cssxref(\"margin-block\")}} and {{cssxref(\"margin-inline\")}}\n" }, { "property": "margin-top", "document": "---\ntitle: margin-top\nslug: Web/CSS/margin-top\ntags:\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.margin-top\n---\n{{CSSRef}}\n\nThe **`margin-top`** [CSS](/en-US/docs/Web/CSS) property sets the [margin area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin_area) on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n\n{{EmbedInteractiveExample(\"pages/css/margin-top.html\")}}\n\nThis property has no effect on _non-[replaced](/en-US/docs/Web/CSS/Replaced_element)_ inline elements, such as {{HTMLElement(\"span\")}} or {{HTMLElement(\"code\")}}.\n\n## Syntax\n\n```css\n/* values */\nmargin-top: 10px; /* An absolute length */\nmargin-top: 1em; /* relative to the text size */\nmargin-top: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-top: auto;\n\n/* Global values */\nmargin-top: inherit;\nmargin-top: initial;\nmargin-top: revert;\nmargin-top: revert-layer;\nmargin-top: unset;\n```\n\nThe `margin-top` property is specified as the keyword `auto`, or a ``, or a ``. Its value can be positive, zero, or negative.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the margin as a fixed value.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `auto`\n - : The browser selects a suitable value to use. See {{cssxref(\"margin\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting positive and negative top margins\n\n```css\n.content { margin-top: 5%; }\n.sidebox { margin-top: 10px; }\n.logo { margin-top: -5px; }\n#footer { margin-top: 1em; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}} and the {{cssxref(\"margin\")}} shorthand\n- The mapped logical properties: {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}} and the shorthands {{cssxref(\"margin-block\")}} and {{cssxref(\"margin-inline\")}}\n" }, { "property": "margin-trim", "document": "---\ntitle: margin-trim\nslug: Web/CSS/margin-trim\ntags:\n - CSS\n - CSS Property\n - Draft\n - Experimental\n - NeedsContent\n - NeedsExample\n - NeedsLiveSample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.margin-trim\n---\n{{CSSRef}}\n\nThe `margin-trim` property allows the container to trim the margins of its children where they adjoin the container's edges.\n\n## Syntax\n\n```css\nmargin-trim: none;\nmargin-trim: in-flow;\nmargin-trim: all;\n\n/* Global values */\nmargin-trim: inherit;\nmargin-trim: initial;\nmargin-trim: revert;\nmargin-trim: revert-layer;\nmargin-trim: unset;\n```\n\n## Values\n\n- `none`\n - : Margins are not trimmed by the container.\n- `in-flow`\n\n - : For in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero.\n\n It also truncates any margins collapsed with such a margin.\n\n- `all`\n - : Trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nOnce support is implemented for this property, it will probably work like so:\n\nWhen you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:\n\n```css\narticle {\n background-color: red;\n margin: 20px;\n padding: 20px;\n display: inline-block;\n}\n\narticle > span {\n background-color: black;\n color: white;\n text-align: center;\n padding: 10px;\n margin-right: 20px;\n}\n```\n\nThe problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:\n\n```css\nspan:last-child {\n margin-right: 0;\n}\n```\n\nIt is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it:\n\n```css\n article {\n margin-trim: in-flow;\n ...\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"margin\")}}\n" }, { "property": "list-style-position", "document": "---\ntitle: list-style-position\nslug: Web/CSS/list-style-position\ntags:\n - CSS\n - CSS Lists\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.list-style-position\n---\n{{CSSRef}}\n\nThe **`list-style-position`** [CSS](/en-US/docs/Web/CSS) property sets the position of the {{cssxref(\"::marker\")}} relative to a list item.\n\n{{EmbedInteractiveExample(\"pages/css/list-style-position.html\")}}\n\nIt is often more convenient to use the shorthand {{cssxref(\"list-style\")}}.\n\n> **Note:** This property is applied to list items, i.e., elements with `{{cssxref(\"display\")}}: list-item;`. [By default](https://html.spec.whatwg.org/multipage/rendering.html#lists) this includes {{HTMLElement(\"li\")}} elements. Because this property is inherited, it can be set on the parent element (normally {{HTMLElement(\"ol\")}} or {{HTMLElement(\"ul\")}}) to let it apply to all list items.\n\nNote that there is variance among browsers regarding behavior when a block element is placed first within a list element declared as `list-style-position: inside`. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer, and Opera place it on the next line. For more information on this, see {{bug(36854)}}.\n\n## Syntax\n\n```css\n/* Keyword values */\nlist-style-position: inside;\nlist-style-position: outside;\n\n/* Global values */\nlist-style-position: inherit;\nlist-style-position: initial;\nlist-style-position: revert;\nlist-style-position: revert-layer;\nlist-style-position: unset;\n```\n\nThe `list-style-position` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `inside`\n - : The {{cssxref(\"::marker\")}} is the first element among the list item's contents.\n- `outside`\n - : The {{cssxref(\"::marker\")}} is outside the principal block box.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting list item position\n\n#### HTML\n\n```html\n
        List 1\n
      • List Item 1-1
        • \n
      • List Item 1-2
        • \n
      • List Item 1-3
        • \n
      • List Item 1-4
        • \n
      \n
        List 2\n
      • List Item 2-1
        • \n
      • List Item 2-2
        • \n
      • List Item 2-3
        • \n
      • List Item 2-4
        • \n
      \n
        List 3\n
      • List Item 3-1
        • \n
      • List Item 3-2
        • \n
      • List Item 3-3
        • \n
      • List Item 3-4
        • \n
      \n```\n\n#### CSS\n\n```css\n.inside {\n list-style-position: inside;\n list-style-type: square;\n}\n\n.outside {\n list-style-position: outside;\n list-style-type: circle;\n}\n\n.inside-img {\n list-style-position: inside;\n list-style-image: url(\"starsolid.gif\");\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_list_item_position\", 200, 420)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"list-style\")}}, {{Cssxref(\"list-style-type\")}}, {{Cssxref(\"list-style-image\")}}\n" }, { "property": "margin", "document": "---\ntitle: margin\nslug: Web/CSS/margin\ntags:\n - CSS\n - CSS Property\n - Property\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.margin\n---\n{{CSSRef}}\n\nThe **`margin`** [CSS](/en-US/docs/Web/CSS) shorthand property sets the [margin area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#margin_area) on all four sides of an element.\n\n{{EmbedInteractiveExample(\"pages/css/margin.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"margin-bottom\")}}\n- {{cssxref(\"margin-left\")}}\n- {{cssxref(\"margin-right\")}}\n- {{cssxref(\"margin-top\")}}\n\n## Syntax\n\n```css\n/* Apply to all four sides */\nmargin: 1em;\nmargin: -3px;\n\n/* vertical | horizontal */\nmargin: 5% auto;\n\n/* top | horizontal | bottom */\nmargin: 1em auto 2em;\n\n/* top | right | bottom | left */\nmargin: 2px 1em 0 auto;\n\n/* Global values */\nmargin: inherit;\nmargin: initial;\nmargin: revert;\nmargin: revert-layer;\nmargin: unset;\n```\n\nThe `margin` property may be specified using one, two, three, or four values. Each value is a {{cssxref(\"<length>\")}}, a {{cssxref(\"<percentage>\")}}, or the keyword `auto`. Negative values draw the element closer to its neighbors than it would be by default.\n\n- When **one** value is specified, it applies the same margin to **all four sides**.\n- When **two** values are specified, the first margin applies to the **top and bottom**, the second to the **left and right**.\n- When **three** values are specified, the first margin applies to the **top**, the second to the **right and left**, the third to the **bottom**.\n- When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\n### Values\n\n- {{cssxref(\"length\")}}\n - : The size of the margin as a fixed value.\n- {{cssxref(\"percentage\")}}\n - : The size of the margin as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n- `auto`\n - : The browser selects a suitable margin to use. For example, in certain cases this value can be used to center an element.\n\n## Description\n\nThis property can be used to set a margin on all four sides of an element. Margins create extra space _around_ an element, unlike {{cssxref(\"padding\")}}, which creates extra space _within_ an element.\n\nThe top and bottom margins have no effect on _non-[replaced](/en-US/docs/Web/CSS/Replaced_element)_ inline elements, such as {{HTMLElement(\"span\")}} or {{HTMLElement(\"code\")}}.\n\n### Horizontal centering\n\nTo center something horizontally in modern browsers, you can use {{cssxref(\"display\")}}`: flex;` {{cssxref(\"justify-content\")}}`: center;`.\n\nHowever, in older browsers like IE8-9 that do not support Flexible Box Layout, these are not available. In order to center an element inside its parent, use `margin: 0 auto;`.\n\n### Margin collapsing\n\nElements' top and bottom margins are sometimes collapsed into a single margin that is equal to the larger of the two margins. See [Mastering margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) for more information.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple example\n\n#### HTML\n\n```html\n
      This element is centered.
      \n\n
      This element is positioned outside of its container.
      \n```\n\n#### CSS\n\n```css\n.center {\n margin: auto;\n background: lime;\n width: 66%;\n}\n\n.outside {\n margin: 3rem 0 0 -3rem;\n background: cyan;\n width: 66%;\n}\n```\n\n{{ EmbedLiveSample('Simple_example','100%',120) }}\n\n### More examples\n\n```css\nmargin: 5%; /* All sides: 5% margin */\n\nmargin: 10px; /* All sides: 10px margin */\n\nmargin: 1.6em 20px; /* top and bottom: 1.6em margin */\n /* left and right: 20px margin */\n\nmargin: 10px 3% -1em; /* top: 10px margin */\n /* left and right: 3% margin */\n /* bottom: -1em margin */\n\nmargin: 10px 3px 30px 5px; /* top: 10px margin */\n /* right: 3px margin */\n /* bottom: 30px margin */\n /* left: 5px margin */\n\nmargin: 2em auto; /* top and bottom: 2em margin */\n /* Box is horizontally centered */\n\nmargin: auto; /* top and bottom: 0 margin */\n /* Box is horizontally centered */\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\n- {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}}\n- The mapped logical properties: {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}} and the shorthands {{cssxref(\"margin-block\")}} and {{cssxref(\"margin-inline\")}}\n" }, { "property": "mask-border-mode", "document": "---\ntitle: mask-border-mode\nslug: Web/CSS/mask-border-mode\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsContent\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-mode\n---\n{{CSSRef}}\n\nThe **`mask-border-mode`** [CSS](/en-US/docs/Web/CSS) property specifies the blending mode used in a [mask border](/en-US/docs/Web/CSS/mask-border).\n\n## Syntax\n\n```css\n/* Keyword values */\nmask-border-mode: luminance;\nmask-border-mode: alpha;\n\n/* Global values */\nmask-border-mode: inherit;\nmask-border-mode: initial;\nmask-border-mode: revert;\nmask-border-mode: revert-layer;\nmask-border-mode: unset;\n```\n\n### Values\n\n- `luminance`\n - : The luminance values of the mask border image are used as the mask values.\n- `alpha`\n - : The alpha values of the mask border image are used as the mask values.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't yet seem to have support anywhere. When browsers support it, it will specify the type of blending mode used for the mask border — luminance or alpha:\n\n```css\nmask-border-mode: luminance;\nmask-border-mode: alpha;\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-source\")}}\n- {{cssxref(\"mask-border-width\")}}\n" }, { "property": "mask-border-outset", "document": "---\ntitle: mask-border-outset\nslug: Web/CSS/mask-border-outset\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-outset\n---\n{{CSSRef}}\n\nThe **`mask-border-outset`** [CSS](/en-US/docs/Web/CSS) property specifies the distance by which an element's [mask border](/en-US/docs/Web/CSS/mask-border) is set out from its border box.\n\n## Syntax\n\n```css\n/* value */\nmask-border-outset: 1rem;\n\n/* value */\nmask-border-outset: 1.5;\n\n/* vertical | horizontal */\nmask-border-outset: 1 1.2;\n\n/* top | horizontal | bottom */\nmask-border-outset: 30px 2 45px;\n\n/* top | right | bottom | left */\nmask-border-outset: 7px 12px 14px 5px;\n\n/* Global values */\nmask-border-outset: inherit;\nmask-border-outset: initial;\nmask-border-outset: revert;\nmask-border-outset: revert-layer;\nmask-border-outset: unset;\n```\n\nThe `mask-border-outset` property may be specified as one, two, three, or four values. Each value is a {{cssxref(\"<length>\")}} or {{cssxref(\"<number>\")}}. Negative values are invalid.\n\n- When **one** value is specified, it applies the same outset to **all four sides**.\n- When **two** values are specified, the first outset applies to the **top and bottom**, the second to the **left and right**.\n- When **three** values are specified, the first outset applies to the **top**, the second to the **left and right**, the third to the **bottom**.\n- When **four** values are specified, the outsets apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the mask border outset as a dimension.\n- {{cssxref(\"<number>\")}}\n - : The size of the mask border outset as a multiple of the corresponding {{cssxref(\"border-width\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to move the mask away from the inner edge of the element's border box — you can use it to make the mask start from part way across the border, rather than the inside of it.\n\n```css\nmask-border-outset: 1rem;\n```\n\nChromium-based browsers support an outdated version of this property — `mask-box-image-outset` — with a prefix:\n\n```css\n-webkit-mask-box-image-outset: 1rem;\n```\n\n> **Note:** The [`mask-border`](/en-US/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-source\")}}\n- {{cssxref(\"mask-border-width\")}}\n" }, { "property": "margin-block-start", "document": "---\ntitle: margin-block-start\nslug: Web/CSS/margin-block-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - NeedsContent\n - Reference\n - margin-block\n - margin-block-start\n - recipe:css-property\nbrowser-compat: css.properties.margin-block-start\n---\n{{CSSRef}}\n\nThe **`margin-block-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/margin-block-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-block-start: 10px; /* An absolute length */\nmargin-block-start: 1em; /* relative to the text size */\nmargin-block-start: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-block-start: auto;\n\n/* Global values */\nmargin-block-start: inherit;\nmargin-block-start: initial;\nmargin-block-start: revert;\nmargin-block-start: revert-layer;\nmargin-block-start: unset;\n```\n\nIt corresponds to the {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, or {{cssxref(\"margin-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\nIt relates to {{cssxref(\"margin-block-end\")}}, {{cssxref(\"margin-inline-start\")}}, and {{cssxref(\"margin-inline-end\")}}, which define the other margins of the element.\n\n### Values\n\nThe `margin-block-start` property takes the same values as the {{cssxref(\"margin-left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block start margin\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n margin-block-start: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_start_margin\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "mask-border-slice", "document": "---\ntitle: mask-border-slice\nslug: Web/CSS/mask-border-slice\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-slice\n---\n{{CSSRef}}\n\nThe **`mask-border-slice`** [CSS](/en-US/docs/Web/CSS) property divides the image set by {{cssxref(\"mask-border-source\")}} into regions. These regions are used to form the components of an element's [mask border](/en-US/docs/Web/CSS/mask-border).\n\n## Syntax\n\n```css\n/* All sides */\nmask-border-slice: 30%;\n\n/* vertical | horizontal */\nmask-border-slice: 10% 30%;\n\n/* top | horizontal | bottom */\nmask-border-slice: 30 30% 45;\n\n/* top | right | bottom | left */\nmask-border-slice: 7 12 14 5;\n\n/* Using the `fill` keyword */\nmask-border-slice: 10% fill 7 12;\n\n/* Global values */\nmask-border-slice: inherit;\nmask-border-slice: initial;\nmask-border-slice: revert;\nmask-border-slice: revert-layer;\nmask-border-slice: unset;\n```\n\nThe `mask-border-slice` property may be specified using one to four `` values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to `100%`.\n\n- When **one** position is specified, it creates all four slices at the same distance from their respective sides.\n- When **two** positions are specified, the first value creates slices measured from the **top and bottom**, the second creates slices measured from the **left and right**.\n- When **three** positions are specified, the first value creates a slice measured from the **top**, the second creates slices measured from the **left and right**, the third creates a slice measured from the **bottom**.\n- When **four** positions are specified, they create slices measured from the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\nThe optional `fill` value, if used, can be placed anywhere in the declaration.\n\n### Values\n\n- {{cssxref(\"<number>\")}}\n - : Represents an edge offset in _pixels_ for raster images and _coordinates_ for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.\n- {{cssxref(\"<percentage>\")}}\n - : Represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets.\n- `fill`\n - : Preserves the middle image region. Its width and height are sized to match the top and left image regions, respectively.\n\n## Description\n\nThe slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.\n\n[![The nine regions defined by the border-image or border-image-slice properties](border-image-slice.png)](border-image-slice.png)\n\nThe above diagram illustrates the location of each region.\n\n- Zones 1-4 are corner regions. Each one is used a single time to form the corners of the final border image.\n- Zones 5-8 are edge regions. These are [repeated, scaled, or otherwise modified](/en-US/docs/Web/CSS/mask-border-repeat) in the final border image to match the dimensions of the element.\n- Zone 9 is the middle region. It is discarded by default, but is used like a background image if the keyword `fill` is set.\n\nThe {{cssxref(\"mask-border-repeat\")}}, {{cssxref(\"mask-border-width\")}}, and {{cssxref(\"mask-border-outset\")}} properties determine how these regions are used to form the final mask border.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the size of the slices taken from the source image, and used to create the border mask.\n\n```css\nmask-border-slice: 30 fill;\n```\n\nChromium-based browsers support an outdated version of this property — `mask-box-image-slice` — with a prefix:\n\n```css\n-webkit-mask-box-image-slice: 30 fill;\n```\n\n> **Note:** The [`mask-border`](/en-US/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.\n\n> **Note:** The fill keyword needs to be included if you want the element's content to be visible.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-source\")}}\n- {{cssxref(\"mask-border-width\")}}\n- [Illustrated description of the 1-to-4-value syntax](/en-US/docs/Web/CSS/Shorthand_properties#tricky_edge_cases)\n" }, { "property": "mask-border-repeat", "document": "---\ntitle: mask-border-repeat\nslug: Web/CSS/mask-border-repeat\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-repeat\n---\n{{CSSRef}}\n\nThe **`mask-border-repeat`** [CSS](/en-US/docs/Web/CSS) property sets how the [edge regions](/en-US/docs/Web/CSS/border-image-slice#edge-regions) of a source image are adjusted to fit the dimensions of an element's [mask border](/en-US/docs/Web/CSS/mask-border).\n\n## Syntax\n\n```css\n/* Keyword value */\nmask-border-repeat: stretch;\nmask-border-repeat: repeat;\nmask-border-repeat: round;\nmask-border-repeat: space;\n\n/* vertical | horizontal */\nmask-border-repeat: round stretch;\n\n/* Global values */\nmask-border-repeat: inherit;\nmask-border-repeat: initial;\nmask-border-repeat: revert;\nmask-border-repeat: revert-layer;\nmask-border-repeat: unset;\n```\n\nThe `mask-border-repeat` property may be specified using one or two values chosen from the list of values below.\n\n- When **one** value is specified, it applies the same behavior on **all four sides**.\n- When **two** values are specified, the first applies to the **top and bottom**, the second to the **left and right**.\n\n### Values\n\n- `stretch`\n - : The source image's edge regions are stretched to fill the gap between each border.\n- `repeat`\n - : The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be clipped to achieve the proper fit.\n- `round`\n - : The source image's edge regions are tiled (repeated) to fill the gap between each border. Tiles may be stretched to achieve the proper fit.\n- `space`\n - : The source image's edge regions are tiled (repeated) to fill the gap between each border. Extra space will be distributed in between tiles to achieve the proper fit.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define how the border mask slice will repeat around the border — i.e. will it just repeat, or be scaled slightly so a whole number of slices fits, or be stretched so one slice fits?\n\n```css\nmask-border-repeat: round;\n```\n\nChromium-based browsers support an outdated version of this property — `mask-box-image-repeat` — with a prefix:\n\n```css\n-webkit-mask-box-image-repeat: round;\n```\n\n> **Note:** The [`mask-border`](/en-US/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-source\")}}\n- {{cssxref(\"mask-border-width\")}}\n" }, { "property": "mask-border-width", "document": "---\ntitle: mask-border-width\nslug: Web/CSS/mask-border-width\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-width\n---\n{{CSSRef}}\n\nThe **`mask-border-width`** [CSS](/en-US/docs/Web/CSS) property sets the width of an element's [mask border](/en-US/docs/Web/CSS/mask-border).\n\n## Syntax\n\n```css\n/* Keyword value */\nmask-border-width: auto;\n\n/* value */\nmask-border-width: 1rem;\n\n/* value */\nmask-border-width: 25%;\n\n/* value */\nmask-border-width: 3;\n\n/* vertical | horizontal */\nmask-border-width: 2em 3em;\n\n/* top | horizontal | bottom */\nmask-border-width: 5% 15% 10%;\n\n/* top | right | bottom | left */\nmask-border-width: 5% 2em 10% auto;\n\n/* Global values */\nmask-border-width: inherit;\nmask-border-width: initial;\nmask-border-width: revert;\nmask-border-width: revert-layer;\nmask-border-width: unset;\n```\n\nThe `mask-border-width` property may be specified using one, two, three, or four values chosen from the list of values below.\n\n- When **one** value is specified, it applies the same width to **all four sides**.\n- When **two** values are specified, the first width applies to the **top and bottom**, the second to the **left and right**.\n- When **three** values are specified, the first width applies to the **top**, the second to the **left and right**, the third to the **bottom**.\n- When **four** values are specified, the widths apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\n### Values\n\n- ``\n - : The width of the mask border, specified as a {{cssxref(\"<length>\")}} or a {{cssxref(\"<percentage>\")}}. Percentages are relative to the _width_ of the border area for horizontal offsets and the _height_ of the border area for vertical offsets. Must not be negative.\n- ``\n - : The width of the mask border, specified as a multiple of the corresponding {{cssxref(\"border-width\")}}. Must not be negative.\n- `auto`\n - : The width of the mask border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref(\"mask-border-slice\")}}. If the image does not have the required intrinsic dimension, the corresponding `border-width` is used instead.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to [`mask-border-slice`](/en-US/docs/Web/CSS/mask-border-slice) will cause the slices to be scaled to fit the border mask.\n\n```css\nmask-border-width: 30 fill;\n```\n\nChromium-based browsers support an outdated version of this property — `mask-box-image-width` — with a prefix:\n\n```css\n-webkit-mask-box-image-width: 20px;\n```\n\n> **Note:** The [`mask-border`](/en-US/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-source\")}}\n" }, { "property": "mask-border", "document": "---\ntitle: mask-border\nslug: Web/CSS/mask-border\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.mask-border\n---\n{{CSSRef}}\n\nThe **`mask-border`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) lets you create a mask along the edge of an element's border.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`mask-border-mode`](/en-US/docs/Web/CSS/mask-border-mode)\n- [`mask-border-outset`](/en-US/docs/Web/CSS/mask-border-outset)\n- [`mask-border-repeat`](/en-US/docs/Web/CSS/mask-border-repeat)\n- [`mask-border-slice`](/en-US/docs/Web/CSS/mask-border-slice)\n- [`mask-border-source`](/en-US/docs/Web/CSS/mask-border-source)\n- [`mask-border-width`](/en-US/docs/Web/CSS/mask-border-width)\n\n## Syntax\n\n```css\n/* source | slice */\nmask-border: url('border-mask.png') 25;\n\n/* source | slice | repeat */\nmask-border: url('border-mask.png') 25 space;\n\n/* source | slice | width */\nmask-border: url('border-mask.png') 25 / 35px;\n\n/* source | slice | width | outset | repeat | mode */\nmask-border: url('border-mask.png') 25 / 35px / 12px space alpha;\n\n/* Global values */\nmask-border: inherit;\nmask-border: initial;\nmask-border: revert;\nmask-border: revert-layer;\nmask-border: unset;\n```\n\n### Values\n\n- `<'mask-border-source'>`\n - : The source image. See {{cssxref(\"mask-border-source\")}}.\n- `<'mask-border-slice'>`\n - : The dimensions for slicing the source image into regions. Up to four values may be specified. See {{cssxref(\"mask-border-slice\")}}.\n- `<'mask-border-width'>`\n - : The width of the border mask. Up to four values may be specified. See {{cssxref(\"mask-border-width\")}}.\n- `<'mask-border-outset'>`\n - : The distance of the border mask from the element's outside edge. Up to four values may be specified. See {{cssxref(\"mask-border-outset\")}}.\n- `<'mask-border-repeat'>`\n - : Defines how the edge regions of the source image are adjusted to fit the dimensions of the border mask. Up to two values may be specified. See {{cssxref(\"mask-border-repeat\")}}.\n- `<'mask-border-mode'>`\n - : Defines whether the source image is treated as a luminance mask or alpha mask. See {{cssxref(\"mask-border-mode\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a bitmap-based mask border\n\nIn this example, we will mask an element's border with a diamond pattern. The source for the mask is a \".png\" file of 90 by 90 pixels, with three diamonds going vertically and horizontally:\n\n![](mask-border-diamonds.png)\n\nTo match the size of a single diamond, we will use a value of 90 divided by 3, or `30`, for slicing the image into corner and edge regions. A repeat value of `round` will make the mask slices fit evenly, i.e., without clipping or gaps.\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-border.html\", '100%', 800)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-source\")}}\n- {{cssxref(\"mask-border-width\")}}\n" }, { "property": "mask-composite", "document": "---\ntitle: mask-composite\nslug: Web/CSS/mask-composite\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-composite\n---\n{{CSSRef}}\n\nThe **`mask-composite`** [CSS](/en-US/docs/Web/CSS) property represents a compositing operation used on the current mask layer with the mask layers below it.\n\n```css\n/* Keyword values */\nmask-composite: add;\nmask-composite: subtract;\nmask-composite: intersect;\nmask-composite: exclude;\n\n/* Global values */\nmask-composite: inherit;\nmask-composite: initial;\nmask-composite: revert;\nmask-composite: revert-layer;\nmask-composite: unset;\n```\n\n## Syntax\n\nOne or more of the keyword values listed below, separated by commas.\n\n### Values\n\nFor the composition the current mask layer is referred to as _source_, while all layers below it are referred to as _destination_.\n\n- `add`\n - : The source is placed over the destination.\n- `subtract`\n - : The source is placed, where it falls outside of the destination.\n- `intersect`\n - : The parts of source that overlap the destination, replace the destination.\n- `exclude`\n - : The non-overlapping regions of source and destination are combined.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Compositing mask layers with addition\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-composite.html\", '100%', 550)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "mask-image", "document": "---\ntitle: mask-image\nslug: Web/CSS/mask-image\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-image\n---\n{{CSSRef}}\n\nThe **`mask-image`** [CSS](/en-US/docs/Web/CSS) property sets the image that is used as mask layer for an element.\nBy default this means the alpha channel of the mask image will be multiplied with the alpha channel of the element. This can be controlled with the {{cssxref(\"mask-mode\")}} property.\n\n```css\n/* Keyword value */\nmask-image: none;\n\n/* value */\nmask-image: url(masks.svg#mask1);\n\n/* values */\nmask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);\nmask-image: image(url(mask.png), skyblue);\n\n/* Multiple values */\nmask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);\n\n/* Global values */\nmask-image: inherit;\nmask-image: initial;\nmask-image: revert;\nmask-image: revert-layer;\nmask-image: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : This keyword is interpreted as an opaque white image layer.\n- ``\n - : A {{cssxref(\"url\",\"url()\")}} reference to a {{SVGElement(\"mask\")}} or to a CSS image.\n- {{cssxref(\"<image>\")}}\n - : An image value used as mask image layer.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a mask image with a URL\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-image.html\", '100%', 560)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n- [Apply effects to images with CSS's mask-image property](https://web.dev/css-masking/)\n" }, { "property": "mask-mode", "document": "---\ntitle: mask-mode\nslug: Web/CSS/mask-mode\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-mode\n---\n{{CSSRef}}\n\nThe **`mask-mode`** [CSS](/en-US/docs/Web/CSS) property sets whether the mask reference defined by {{cssxref(\"mask-image\")}} is treated as a luminance or alpha mask.\n\n```css\n/* Keyword values */\nmask-mode: alpha;\nmask-mode: luminance;\nmask-mode: match-source;\n\n/* Multiple values */\nmask-mode: alpha, match-source;\n\n/* Global values */\nmask-mode: inherit;\nmask-mode: initial;\nmask-mode: revert;\nmask-mode: revert-layer;\nmask-mode: unset;\n```\n\n## Syntax\n\nThe `mask-mode` property is specified as one or more of the keyword values listed below, separated by commas.\n\n### Values\n\n- `alpha`\n - : This keyword indicates that the transparency (alpha channel) values of the mask layer image should be used as the mask values.\n- `luminance`\n - : This keyword indicates that the luminance values of the mask layer image should be used as the mask values.\n- `match-source`\n\n - : If the {{cssxref(\"mask-image\")}} property is of type ``, the luminance values of the mask layer image should be used as the mask values.\n\n If it is of type {{cssxref(\"<image>\")}}, the alpha values of the mask layer image should be used as the mask values.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using alpha mask mode\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-mode.html\", '100%', 760)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "mask-origin", "document": "---\ntitle: mask-origin\nslug: Web/CSS/mask-origin\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-origin\n---\n{{CSSRef}}\n\nThe **`mask-origin`** [CSS](/en-US/docs/Web/CSS) property sets the origin of a mask.\n\n```css\n/* Keyword values */\nmask-origin: content-box;\nmask-origin: padding-box;\nmask-origin: border-box;\nmask-origin: margin-box;\nmask-origin: fill-box;\nmask-origin: stroke-box;\nmask-origin: view-box;\n\n/* Multiple values */\nmask-origin: padding-box, content-box;\nmask-origin: view-box, fill-box, border-box;\n\n/* Non-standard keyword values */\n-webkit-mask-origin: content;\n-webkit-mask-origin: padding;\n-webkit-mask-origin: border;\n\n/* Global values */\nmask-origin: inherit;\nmask-origin: initial;\nmask-origin: revert;\nmask-origin: revert-layer;\nmask-origin: unset;\n```\n\nFor elements rendered as a single box, this property specifies the mask positioning area. In other words, this property specifies the origin position of an image specified by the {{cssxref(\"mask-image\")}} CSS property. For elements rendered as multiple boxes, such as inline boxes on several lines or boxes on several pages, it specifies which boxes {{cssxref(\"box-decoration-break\")}} operates upon to determine the mask positioning area.\n\n## Syntax\n\nOne or more of the keyword values listed below, separated by commas.\n\n### Values\n\n- `content-box`\n - : The position is relative to the content box.\n- `padding-box`\n - : 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.\n- `border-box`\n - : The position is relative to the border box.\n- `margin-box`\n - : The position is relative to the margin box.\n- `fill-box`\n - : The position is relative to the object bounding box.\n- `stroke-box`\n - : The position is relative to the stroke bounding box.\n- `view-box`\n - : Uses the nearest SVG viewport as reference box. If a {{svgattr(\"viewBox\")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.\n- `content` {{non-standard_inline}}\n - : Same as `content-box`.\n- `padding` {{non-standard_inline}}\n - : Same as `padding-box`.\n- `border` {{non-standard_inline}}\n - : Same as `border-box`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting mask origin to border-box\n\nTry some of the other possible values by updating the CSS in the box below.\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-origin.html\", '100%', 600)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "mask-position", "document": "---\ntitle: mask-position\nslug: Web/CSS/mask-position\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-position\n---\n{{CSSRef}}\n\nThe **`mask-position`** [CSS](/en-US/docs/Web/CSS) property sets the initial position, relative to the mask position layer set by {{cssxref(\"mask-origin\")}}, for each defined mask image.\n\n```css\n/* Keyword values */\nmask-position: top;\nmask-position: bottom;\nmask-position: left;\nmask-position: right;\nmask-position: center;\n\n/* values */\nmask-position: 25% 75%;\nmask-position: 0px 0px;\nmask-position: 10% 8em;\n\n/* Multiple values */\nmask-position: top right;\nmask-position: 1rem 1rem, center;\n\n/* Global values */\nmask-position: inherit;\nmask-position: initial;\nmask-position: revert;\nmask-position: revert-layer;\nmask-position: unset;\n```\n\n## Syntax\n\nOne or more `` values, separated by commas.\n\n### Values\n\n- {{cssxref(\"<position>\")}}\n - : One to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting mask position\n\nChange the `mask-position` value to any of the allowed values detailed above.\nIf viewing the example in a Chromium-based browser change the value of `-webkit-mask-position`.\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-position.html\", '100%', 760)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "mask-repeat", "document": "---\ntitle: mask-repeat\nslug: Web/CSS/mask-repeat\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-repeat\n---\n{{CSSRef}}\n\nThe **`mask-repeat`** [CSS](/en-US/docs/Web/CSS) property sets how mask images are repeated. A mask image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.\n\n```css\n/* One-value syntax */\nmask-repeat: repeat-x;\nmask-repeat: repeat-y;\nmask-repeat: repeat;\nmask-repeat: space;\nmask-repeat: round;\nmask-repeat: no-repeat;\n\n/* Two-value syntax: horizontal | vertical */\nmask-repeat: repeat space;\nmask-repeat: repeat repeat;\nmask-repeat: round space;\nmask-repeat: no-repeat round;\n\n/* Multiple values */\nmask-repeat: space round, no-repeat;\nmask-repeat: round repeat, space, repeat-x;\n\n/* Global values */\nmask-repeat: inherit;\nmask-repeat: initial;\nmask-repeat: revert;\nmask-repeat: revert-layer;\nmask-repeat: unset;\n```\n\nBy default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using `round`) or evenly distributed from end to end (using `space`).\n\n## Syntax\n\nOne or more `` values, separated by commas.\n\n### Values\n\n- ``\n\n - : The one-value syntax is a shorthand for the full two-value syntax:\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      Single valueTwo-value equivalent
      repeat-xrepeat no-repeat
      repeat-yno-repeat repeat
      repeatrepeat repeat
      spacespace space
      roundround round
      no-repeatno-repeat no-repeat
      \n\n In the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. Here is an explanation of how each option works for either direction:\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      repeat\n The image is repeated as much as needed to cover the whole mask painting\n area. The last image will be clipped if it doesn't fit.\n
      space\n The image is repeated as much as possible without clipping. The first\n and last images are pinned to either side of the element, and whitespace\n is distributed evenly between the images. The\n {{cssxref(\"mask-position\")}} property is ignored unless only one\n image can be displayed without clipping. The only case where clipping\n happens using space is when there isn't enough room to\n display one image.\n
      round\n As the allowed space increases in size, the repeated images will stretch\n (leaving no gaps) until there is room for another one to be added. When\n the next image is added, all of the current ones compress to allow room.\n Example: An image with an original width of 260px, repeated three times,\n might stretch until each repetition is 300px wide, and then another\n image will be added. They will then compress to 225px.\n
      no-repeat\n The image is not repeated (and hence the mask painting area will not\n necessarily be entirely covered). The position of the non-repeated mask\n image is defined by the {{cssxref(\"mask-position\")}} CSS\n property.\n
      \n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting repeat for a single mask\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-repeat.html\", '100%', 700)}}\n\n### Multiple mask image support\n\nYou can specify a different `` for each mask image, separated by commas:\n\n```css\n.examplethree {\n mask-image: url('mask1.png'), url('mask2.png');\n mask-repeat: repeat-x, repeat-y;\n}\n```\n\nEach image is matched with the corresponding repeat style, from first specified to last.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "mask-type", "document": "---\ntitle: mask-type\nslug: Web/CSS/mask-type\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - SVG\n - recipe:css-property\nbrowser-compat: css.properties.mask-type\n---\n{{CSSRef}}\n\nThe **`mask-type`** [CSS](/en-US/docs/Web/CSS) property sets whether an SVG {{svgElement(\"mask\")}} element is used as a _luminance_ or an _alpha_ mask. It applies to the `` element itself.\n\n```css\n/* Keyword values */\nmask-type: luminance;\nmask-type: alpha;\n\n/* Global values */\nmask-type: inherit;\nmask-type: initial;\nmask-type: revert;\nmask-type: revert-layer;\nmask-type: unset;\n```\n\nThis property may be overridden by the {{cssxref(\"mask-mode\")}} property, which has the same effect but applies to the element where the mask is used. Alpha masks will generally be faster to render.\n\n## Syntax\n\nThe `mask-type` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `luminance`\n - : Is a keyword indicating that the associated mask image is a luminance mask, i.e., that its [relative luminance](https://en.wikipedia.org/wiki/Luminance_%28relative%29) values must be used when applying it.\n- `alpha`\n - : Is a keyword indicating that the associated mask image is an alpha mask, i.e., that its [alpha channel](https://en.wikipedia.org/wiki/Alpha_compositing) values must be used when applying it.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting an alpha mask\n\n#### HTML\n\n```html\n
      \n\n \n \n \n \n \n\n```\n\n#### CSS\n\n```css\n.redsquare {\n height: 100px;\n width: 100px;\n background-color: rgb(128, 128, 128);\n border: solid 1px black;\n mask: url(\"#m\");\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_an_alpha_mask', '100%', '102')}}\n\n### Setting a luminance mask\n\n#### HTML\n\n```html\n
      \n\n \n \n \n \n \n\n```\n\n#### CSS\n\n```css\n.redsquare {\n height: 100px;\n width: 100px;\n background-color: rgb(128, 128, 128);\n border: solid 1px black;\n mask: url(\"#m\");\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_a_luminance_mask', '100%', '102')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other mask-related properties: {{cssxref(\"mask\")}}, {{cssxref(\"mask-mode\")}}\n" }, { "property": "mask", "document": "---\ntitle: mask\nslug: Web/CSS/mask\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Layout\n - Reference\n - SVG\n - Web\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.mask\n---\n{{CSSRef}}\n\nThe **`mask`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) hides an element (partially or fully) by masking or clipping the image at specific points.\n\n> **Note:** As well as the properties listed below, the `mask` shorthand also resets {{cssxref(\"mask-border\")}} to its initial value. It is therefore recommended to use the `mask` shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. This will ensure that `mask-border` has also been reset to allow the new styles to take effect.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`mask-clip`](/en-US/docs/Web/CSS/mask-clip)\n- [`mask-composite`](/en-US/docs/Web/CSS/mask-composite)\n- [`mask-image`](/en-US/docs/Web/CSS/mask-image)\n- [`mask-mode`](/en-US/docs/Web/CSS/mask-mode)\n- [`mask-origin`](/en-US/docs/Web/CSS/mask-origin)\n- [`mask-position`](/en-US/docs/Web/CSS/mask-position)\n- [`mask-repeat`](/en-US/docs/Web/CSS/mask-repeat)\n- [`mask-size`](/en-US/docs/Web/CSS/mask-size)\n\n## Syntax\n\n```css\n/* Keyword values */\nmask: none;\n\n/* Image values */\nmask: url(mask.png); /* Pixel image used as mask */\nmask: url(masks.svg#star); /* Element within SVG graphic used as mask */\n\n/* Combined values */\nmask: url(masks.svg#star) luminance; /* Element within SVG graphic used as luminance mask */\nmask: url(masks.svg#star) 40px 20px; /* Element within SVG graphic used as mask positioned 40px from the top and 20px from the left */\nmask: url(masks.svg#star) 0 0/50px 50px; /* Element within SVG graphic used as mask with a width and height of 50px */\nmask: url(masks.svg#star) repeat-x; /* Element within SVG graphic used as horizontally repeated mask */\nmask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */\nmask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */\n\n/* Global values */\nmask: inherit;\nmask: initial;\nmask: revert;\nmask: revert-layer;\nmask: unset;\n\n/* Multiple masks */\nmask: url(masks.svg#star) left / 16px repeat-y, /* Element within SVG graphic is used as a mask on the left-hand side with a width of 16px */\n url(masks.svg#circle) right / 16px repeat-y; /* Element within SVG graphic is used as a mask on the right-hand side with a width of 16px */\n```\n\n### Values\n\n- ``\n - : Sets the mask image source. See {{cssxref(\"mask-image\")}}.\n- ``\n - : Sets the masking mode of the mask image. See {{cssxref(\"mask-mode\")}}.\n- ``\n - : Sets the position of the mask image. See {{cssxref(\"mask-position\")}}.\n- ``\n - : Sets the size of the mask image. See {{cssxref(\"mask-size\")}}.\n- ``\n - : Sets the repetition of the mask image. See {{cssxref(\"mask-repeat\")}}.\n- ``\n - : If only one `` value is given, it sets both {{cssxref(\"mask-origin\")}} and {{cssxref(\"mask-clip\")}}. If two `` values are present, then the first sets {{cssxref(\"mask-origin\")}} and the second sets {{cssxref(\"mask-clip\")}}.\n- ` | no-clip`\n - : Sets the area that is affected by the mask image. See {{cssxref(\"mask-clip\")}}.\n- ``\n - : Sets the compositing operation used on the current mask layer. See {{cssxref(\"mask-composite\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Masking an image\n\n```css\n.target {\n mask: url(#c1) luminance;\n}\n\n.anothertarget {\n mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"clip-path\")}}, {{Cssxref(\"filter\")}}\n- [CSS Shapes, clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)\n- [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)\n- [SVG](/en-US/docs/Web/SVG)\n" }, { "property": "masonry-auto-flow", "document": "---\ntitle: masonry-auto-flow\nslug: Web/CSS/masonry-auto-flow\ntags:\n - CSS\n - Experimental\n - Property\n - Reference\n - grid\n - masonry\n - masonry-auto-flow\nbrowser-compat: css.properties.masonry-auto-flow\n---\n{{CSSRef}}\n\n{{SeeCompatTable}}\n\nThe **`masonry-auto-flow`** CSS property modifies how items are placed when using [masonry](/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) in [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout).\n\n## Syntax\n\n```css\n/* Keyword values */\nmasonry-auto-flow: pack;\nmasonry-auto-flow: next;\nmasonry-auto-flow: ordered;\nmasonry-auto-flow: definite-first;\nmasonry-auto-flow: next ordered;\n\n/* Global values */\nmasonry-auto-flow: inherit;\nmasonry-auto-flow: initial;\nmasonry-auto-flow: revert;\nmasonry-auto-flow: revert-layer;\nmasonry-auto-flow: unset;\n```\n\nThis property may take one of two forms:\n\n- A single keyword: one of `pack`, `next`, `definite-first`, or `ordered`\n- Two keywords, for example `next ordered`.\n\n### Values\n\n- `pack`\n - : As per the default masonry algorithm, items will be placed into the track with the most room.\n- `next`\n - : Items will be placed one after the other in the grid axis.\n- `definite-first`\n - : Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.\n- `ordered`\n - : Ignore any items with a definite placement, and place everything according to order-modified document order.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using the next keyword\n\n#### HTML\n\n```html\n
      \n
      \n
      \n
      \n
      \n
      \n
      \n\n```\n\n#### CSS\n\n```css\n#grid {\n height: 200px;\n width: 200px;\n display: grid;\n gap: 10px;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: masonry;\n masonry-auto-flow: pack;\n}\n\n#item1 {\n background-color: lime;\n height: 2em\n}\n\n#item2 {\n background-color: yellow;\n}\n\n#item3 {\n background-color: blue;\n height: 3em;\n}\n\n#item4 {\n background-color: red;\n height: 2.5em;\n}\n\n#item5 {\n background-color: aqua;\n height: 4em;\n}\n```\n\n```js\nconst selectElem = document.querySelector('select');\n\nfunction changeMasonryFlow() {\n var grid = document.getElementById(\"grid\");\n var direction = document.getElementById(\"flow\");\n var masonryAutoFlow = direction.value === \"pack\" ? \"pack\" : \"next\";\n\n grid.style.masonryAutoFlow = masonryAutoFlow;\n}\n\nselectElem.addEventListener('change', changeMasonryFlow);\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_the_next_keyword\", \"200px\", \"230px\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"align-tracks\")}}, {{cssxref(\"justify-tracks\")}}\n" }, { "property": "math-style", "document": "---\ntitle: math-style\nslug: Web/CSS/math-style\ntags:\n - CSS\n - MathML\n - Property\n - Reference\n - math-style\nbrowser-compat: css.properties.math-style\n---\n{{MDNSidebar}}\n\nThe `math-style` property indicates whether MathML equations should render with normal or compact height.\n\n## Syntax\n\n```css\n/* Keyword values */\nmath-style: normal;\nmath-style: compact;\n\n/* Global values */\nmath-style: inherit;\nmath-style: initial;\nmath-style: revert;\nmath-style: revert-layer;\nmath-style: unset;\n```\n\n### Values\n\n- `normal`\n - : The initial value, indicates normal rendering.\n- `compact`\n - : The math layout on descendants tries to minimize the logical height.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### CSS\n\n```css\nmath {\n math-style: compact;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n" }, { "property": "max-block-size", "document": "---\ntitle: max-block-size\nslug: Web/CSS/max-block-size\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Layout\n - Maximum Height\n - Maximum Width\n - Reference\n - height\n - max-block-size\n - recipe:css-property\n - size\n - width\nbrowser-compat: css.properties.max-block-size\n---\n{{CSSRef}}\n\nThe **`max-block-size`** [CSS](/en-US/docs/Web/CSS) property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by {{cssxref(\"writing-mode\")}}. That is, if the writing direction is horizontal, then `max-block-size` is equivalent to {{cssxref(\"max-height\")}}; if the writing direction is vertical, `max-block-size` is the same as {{cssxref(\"max-width\")}}.\n\nThe other dimension's maximum length is specified using the {{cssxref(\"max-inline-size\")}} property.\n\nThis is useful because the `max-width` is always used for horizontal sizes and `max-height` is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind.\n\nAny time you would normally use `max-height` or `max-width`, you should instead use `max-block-size` to set the maximum \"height\" of the content (even though this may not be a vertical value) and `max-inline-size` to set the maximum \"width\" of the content (although this may instead be vertical rather than horizontal). See the {{SectionOnPage(\"/en-US/docs/Web/CSS/writing-mode\", \"Example\")}}, which shows the different writing modes in action.\n\n{{EmbedInteractiveExample(\"pages/css/max-block-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmax-block-size: 300px;\nmax-block-size: 25em;\n\n/* values */\nmax-block-size: 75%;\n\n/* Keyword values */\nmax-block-size: none;\nmax-block-size: max-content;\nmax-block-size: min-content;\nmax-block-size: fit-content(20em);\n\n/* Global values */\nmax-block-size: inherit;\nmax-block-size: initial;\nmax-block-size: revert;\nmax-block-size: revert-layer;\nmax-block-size: unset;\n```\n\n### Values\n\nThe `max-block-size` property's value can be any value that's legal for the {{cssxref(\"max-width\")}} and {{cssxref(\"max-height\")}} properties:\n\n- {{cssxref(\"<length>\")}}\n - : Defines the `max-block-size` as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the `max-block-size` as a percentage of the containing block's size in block axis.\n- `none`\n - : No limit on the size of the box.\n- `max-content`\n - : The intrinsic preferred `max-block-size`.\n- `min-content`\n - : The intrinsic minimum `max-block-size`.\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.\n\n### How writing-mode affects directionality\n\nThe values of `writing-mode` affect the mapping of `max-block-size` to `max-width` or `max-height` as follows:\n\n| Values of `writing-mode` | `max-block-size` is equivalent to |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |\n| `horizontal-tb`, `lr` {{deprecated_inline}}, `lr-tb` {{deprecated_inline}}, `rl` {{deprecated_inline}}, `rb` {{deprecated_inline}}, `rb-rl` {{deprecated_inline}} | {{cssxref(\"max-height\")}} |\n| `vertical-rl`, `vertical-lr`, `sideways-rl` {{experimental_inline}}, `sideways-lr` {{experimental_inline}}, `tb` {{deprecated_inline}}, `tb-rl` {{deprecated_inline}} | {{cssxref(\"max-width\")}} |\n\n> **Note:** The `writing-mode` values `sideways-lr` and `sideways-rl` were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.\n\n> **Note:** The writing modes `lr`, `lr-tb`, `rl`, `rb`, and `rb-tl` are no longer allowed in {{Glossary(\"HTML\")}} contexts; they may only be used in {{Glossary(\"SVG\")}} 1.x contexts.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting max-block-size with horizontal and vertical text\n\nIn this example, the same text (the opening sentences from {{interwiki(\"wikipedia\", \"Herman Melville\", \"Herman Melville's\")}} novel _{{interwiki(\"wikipedia\", \"Moby-Dick\")}}_) is presented in both the `horizontal-tb` and `vertical-rl` writing modes.\n\nEverything else about the two boxes is identical, including the values used for {{cssxref(\"max-block-size\")}}.\n\n#### HTML\n\nThe HTML establishes the two {{HTMLElement(\"div\")}} blocks that will be presented with their {{cssxref(\"writing-mode\")}} set using the classes `horizontal` or `vertical`. Both boxes share the `standard-box` class, which establishes coloring, padding, and their respective values of `max-block-size`.\n\n```html\n

      Writing mode horizontal-tb (the default):

      \n
      \n Call me Ishmael. Some years ago—never mind how long precisely—having little or\n no money in my purse, and nothing particular to interest me on shore, I\n thought I would sail about a little and see the watery part of the world. It\n is a way I have of driving off the spleen and regulating the circulation.\n
      \n\n

      Writing mode vertical-rl:

      \n
      \n Call me Ishmael. Some years ago—never mind how long precisely—having little or\n no money in my purse, and nothing particular to interest me on shore, I\n thought I would sail about a little and see the watery part of the world. It\n is a way I have of driving off the spleen and regulating the circulation.\n
      \n```\n\n#### CSS\n\nThe CSS defines three classes. The first, `standard-box`, is applied to both boxes, as seen above. It provides standard styling including the minimum and maximum block sizes, font size, and so forth.\n\nAfter that come the classes `horizontal` and `vertical`, which add the {{cssxref(\"writing-mode\")}} property to the box, with the value set to `horizontal-tb` or `vertical-rl` depending on which class is used.\n\n```css\n.standard-box {\n padding: 4px;\n background-color: #abcdef;\n color: #000;\n font: 16px \"Open Sans\", \"Helvetica\", \"Arial\", sans-serif;\n max-block-size: 160px;\n min-block-size: 100px;\n}\n\n.horizontal {\n writing-mode: horizontal-tb;\n}\n\n.vertical {\n writing-mode: vertical-rl;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_max-block-size_with_horizontal_and_vertical_text\", 600, 850)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"max-width\")}} and {{cssxref(\"max-height\")}}\n- Setting the other direction's maximum size: {{cssxref(\"max-inline-size\")}}\n- {{cssxref(\"writing-mode\")}}\n" }, { "property": "max-content", "document": "---\ntitle: max-content\nslug: Web/CSS/max-content\ntags:\n - CSS\n - CSS Grid\n - Reference\n - max-content\n - sizing\nbrowser-compat: css.properties.width.max-content\n---\nThe `max-content` sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.\n\n## Syntax\n\n```css\n/* Used as a length */\nwidth: max-content;\ninline-size: max-content;\nheight: max-content;\nblock-size: max-content;\n\n/* used in grid tracks */\ngrid-template-columns: 200px 1fr max-content;\n\n/* Global values */\nmax-content: inherit;\nmax-content: initial;\nmax-content: revert;\nmax-content: revert-layer;\nmax-content: unset;\n```\n\n## Examples\n\n### Using max-content for box sizing\n\n#### HTML\n\n```html\n
      \n
      Item
      \n
      Item with more text in it which will overflow the fixed width box.
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n background-color: #8cffa0;\n padding: 10px;\n width: 200px;\n}\n\n.item {\n width: max-content;\n background-color: #8ca0ff;\n padding: 5px;\n margin-bottom: 1em;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_max-content_for_box_sizing\", \"100%\", 200)}}\n\n### Sizing grid columns with max-content\n\n#### HTML\n\n```html\n
      \n
      Item
      \n
      \n Item with more text in it.\n
      \n
      Flexible item
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n display: grid;\n grid-template-columns: max-content max-content 1fr;\n grid-gap: 5px;\n box-sizing: border-box;\n height: 200px;\n width: 100%;\n background-color: #8cffa0;\n padding: 10px;\n}\n\n#container > div {\n background-color: #8ca0ff;\n padding: 5px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Sizing_grid_columns_with_max-content\", \"100%\", 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n### Supported for width (and other sizing properties)\n\n{{Compat}}\n\n## See also\n\n- Related sizing keywords: {{cssxref(\"min-content\")}}, {{cssxref(\"fit-content\")}}\n" }, { "property": "mask-border-source", "document": "---\ntitle: mask-border-source\nslug: Web/CSS/mask-border-source\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - NeedsCompatTable\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-border-source\n---\n{{CSSRef}}\n\nThe **`mask-border-source`** [CSS](/en-US/docs/Web/CSS) property sets the source image used to create an element's [mask border](/en-US/docs/Web/CSS/mask-border).\n\nThe {{cssxref(\"mask-border-slice\")}} property is used to divide the source image into regions, which are then dynamically applied to the final mask border.\n\n## Syntax\n\n```css\n/* Keyword value */\nmask-border-source: none;\n\n/* values */\nmask-border-source: url(image.jpg);\nmask-border-source: linear-gradient(to top, red, yellow);\n\n/* Global values */\nmask-border-source: inherit;\nmask-border-source: initial;\nmask-border-source: revert;\nmask-border-source: revert-layer;\nmask-border-source: unset;\n```\n\n### Values\n\n- `none`\n - : No mask border is used.\n- {{cssxref(\"<image>\")}}\n - : Image reference to use for the mask border.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic usage\n\nThis property doesn't appear to be supported anywhere yet. When it eventually starts to be supported, it will serve to define the source of the border mask.\n\n```css\nmask-border-source: url(image.jpg);\n```\n\nChromium-based browsers support an outdated version of this property — `mask-box-image-source` — with a prefix:\n\n```css\n-webkit-mask-box-image-source: url(image.jpg);\n```\n\n> **Note:** The [`mask-border`](/en-US/docs/Web/CSS/mask-border) page features a working example (using the out-of-date prefixed border mask properties supported in Chromium), so you can get an idea of the effect.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"mask-border\")}}\n- {{cssxref(\"mask-border-mode\")}}\n- {{cssxref(\"mask-border-outset\")}}\n- {{cssxref(\"mask-border-repeat\")}}\n- {{cssxref(\"mask-border-width\")}}\n" }, { "property": "mask-clip", "document": "---\ntitle: mask-clip\nslug: Web/CSS/mask-clip\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-clip\n---\n{{CSSRef}}\n\nThe **`mask-clip`** [CSS](/en-US/docs/Web/CSS) property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.\n\n```css\n/* values */\nmask-clip: content-box;\nmask-clip: padding-box;\nmask-clip: border-box;\nmask-clip: margin-box;\nmask-clip: fill-box;\nmask-clip: stroke-box;\nmask-clip: view-box;\n\n/* Keyword values */\nmask-clip: no-clip;\n\n/* Non-standard keyword values */\n-webkit-mask-clip: border;\n-webkit-mask-clip: padding;\n-webkit-mask-clip: content;\n-webkit-mask-clip: text;\n\n/* Multiple values */\nmask-clip: padding-box, no-clip;\nmask-clip: view-box, fill-box, border-box;\n\n/* Global values */\nmask-clip: inherit;\nmask-clip: initial;\nmask-clip: revert;\nmask-clip: revert-layer;\nmask-clip: unset;\n```\n\n## Syntax\n\nOne or more of the keyword values listed below, separated by commas.\n\n### Values\n\n- `content-box`\n - : The painted content is clipped to the content box.\n- `padding-box`\n - : The painted content is clipped to the padding box.\n- `border-box`\n - : The painted content is clipped to the border box.\n- `margin-box`\n - : The painted content is clipped to the margin box.\n- `fill-box`\n - : The painted content is clipped to the object bounding box.\n- `stroke-box`\n - : The painted content is clipped to the stroke bounding box.\n- `view-box`\n - : Uses the nearest SVG viewport as reference box. If a [`viewBox`](/en-US/docs/Web/SVG/Attribute/viewBox) attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the `viewBox` attribute and the dimension of the reference box is set to the width and height values of the `viewBox` attribute.\n- `no-clip`\n - : The painted content is not clipped.\n- `border`{{non-standard_inline}}\n - : This keyword behaves the same as `border-box`.\n- `padding`{{non-standard_inline}}\n - : This keyword behaves the same as `padding-box`.\n- `content`{{non-standard_inline}}\n - : This keyword behaves the same as `content-box`.\n- `text`{{non-standard_inline}}\n - : This keyword clips the mask image to the text of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Clipping a mask to the border box\n\nChange the `mask-clip` value to any of the allowed values detailed above. If viewing the example in a Chromium-based browser change the value of `-webkit-mask-clip`.\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-clip.html\", '100%', 800)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "max-height", "document": "---\ntitle: max-height\nslug: Web/CSS/max-height\ntags:\n - CSS\n - CSS Property\n - Layout\n - Maximum\n - Reference\n - dimensions\n - height\n - limit\n - max-height\n - recipe:css-property\n - size\nbrowser-compat: css.properties.max-height\n---\n{{CSSRef}}\n\nThe **`max-height`** [CSS](/en-US/docs/Web/CSS) property sets the maximum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref(\"height\")}} property from becoming larger than the value specified for `max-height`.\n\n{{EmbedInteractiveExample(\"pages/css/max-height.html\")}}\n\n`max-height` overrides {{cssxref(\"height\")}}, but {{cssxref(\"min-height\")}} overrides `max-height`.\n\n## Syntax\n\n```css\n/* value */\nmax-height: 3.5em;\n\n/* value */\nmax-height: 75%;\n\n/* Keyword values */\nmax-height: none;\nmax-height: max-content;\nmax-height: min-content;\nmax-height: fit-content(20em);\n\n/* Global values */\nmax-height: inherit;\nmax-height: initial;\nmax-height: revert;\nmax-height: revert-layer;\nmax-height: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Defines the `max-height` as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the `max-height` as a percentage of the containing block's height.\n- `none`\n - : No limit on the size of the box.\n- `max-content`\n - : The intrinsic preferred `max-height`.\n- `min-content`\n - : The intrinsic minimum `max-height`.\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.\n\n## Accessibility concerns\n\nEnsure that elements set with a `max-height` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting max-height using percentage and keyword values\n\n```css\ntable { max-height: 75%; }\n\nform { max-height: none; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [The box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{cssxref(\"box-sizing\")}}\n- {{Cssxref(\"height\")}}, {{Cssxref(\"min-height\")}}\n- The mapped logical properties: {{cssxref(\"max-inline-size\")}}, {{cssxref(\"max-block-size\")}}\n" }, { "property": "max-inline-size", "document": "---\ntitle: max-inline-size\nslug: Web/CSS/max-inline-size\ntags:\n - CSS\n - CSS Logical Properties\n - CSS Logical Property\n - CSS Property\n - Element size\n - Reference\n - Text Direction\n - Writing Mode\n - max-inline-size\n - recipe:css-property\nbrowser-compat: css.properties.max-inline-size\n---\n{{CSSRef}}\n\nThe **`max-inline-size`** [CSS](/en-US/docs/Web/CSS) property defines the horizontal or vertical maximum size of an element's block, depending on its writing mode. It corresponds to either the {{cssxref(\"max-width\")}} or the {{cssxref(\"max-height\")}} property, depending on the value of {{cssxref(\"writing-mode\")}}.\n\nIf the writing mode is vertically oriented, the value of `max-inline-size` relates to the maximal height of the element; otherwise, it relates to the maximal width of the element. A related property is {{cssxref(\"max-block-size\")}}, which defines the other dimension of the element.\n\n{{EmbedInteractiveExample(\"pages/css/max-inline-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmax-inline-size: 300px;\nmax-inline-size: 25em;\n\n/* values */\nmax-inline-size: 75%;\n\n/* Keyword values */\nmax-inline-size: none;\nmax-inline-size: max-content;\nmax-inline-size: min-content;\nmax-inline-size: fit-content(20em);\n\n/* Global values */\nmax-inline-size: inherit;\nmax-inline-size: initial;\nmax-inline-size: revert;\nmax-inline-size: revert-layer;\nmax-inline-size: unset;\n```\n\n### Values\n\nThe `max-inline-size` property takes the same values as the {{cssxref(\"max-width\")}} and {{cssxref(\"max-height\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting maximum inline size in pixels\n\n#### HTML\n\n```html\n

      Example text

      \n```\n\n#### CSS\n\n```css\n.exampleText {\n writing-mode: vertical-rl;\n background-color: yellow;\n block-size: 100%;\n max-inline-size: 200px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_maximum_inline_size_in_pixels\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"max-width\")}} and {{cssxref(\"max-height\")}}\n- {{cssxref(\"writing-mode\")}}\n" }, { "property": "max-width", "document": "---\ntitle: max-width\nslug: Web/CSS/max-width\ntags:\n - CSS\n - CSS Property\n - Layout\n - Limits\n - Maximum\n - Reference\n - dimensions\n - max-width\n - recipe:css-property\n - size\n - width\nbrowser-compat: css.properties.max-width\n---\n{{CSSRef}}\n\nThe **`max-width`** [CSS](/en-US/docs/Web/CSS) property sets the maximum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref(\"width\")}} property from becoming larger than the value specified by `max-width`.\n\n{{EmbedInteractiveExample(\"pages/css/max-width.html\")}}\n\n`max-width` overrides {{cssxref(\"width\")}}, but {{cssxref(\"min-width\")}} overrides `max-width`.\n\n## Syntax\n\n```css\n/* value */\nmax-width: 3.5em;\n\n/* value */\nmax-width: 75%;\n\n/* Keyword values */\nmax-width: none;\nmax-width: max-content;\nmax-width: min-content;\nmax-width: fit-content(20em);\n\n/* Global values */\nmax-width: inherit;\nmax-width: initial;\nmax-width: revert;\nmax-width: revert-layer;\nmax-width: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Defines the `max-width` as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the `max-width` as a percentage of the containing block's width.\n- `none`\n - : No limit on the size of the box.\n- `max-content`\n - : The intrinsic preferred `max-width`.\n- `min-content`\n - : The intrinsic minimum `max-width`.\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.\n\n## Accessibility concerns\n\nEnsure that elements set with a `max-width` are not truncated and/or do not obscure other content when the page is zoomed to increase text size.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting max width in pixels\n\nIn this example, the \"child\" will be either 150 pixels wide or the width of the \"parent,\" whichever is smaller.\n\n#### HTML\n\n```html\n
      \n
      \n Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.\n
      \n
      \n```\n\n#### CSS\n\n```css\n#parent {\n background: lightblue;\n width: 300px;\n}\n\n#child {\n background: gold;\n width: 100%;\n max-width: 150px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_max_width_in_pixels\", 350, 100)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [The box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{cssxref(\"box-sizing\")}}\n- {{cssxref(\"width\")}}, {{cssxref(\"min-width\")}}\n- The mapped logical properties: {{cssxref(\"max-inline-size\")}}, {{cssxref(\"max-block-size\")}}\n" }, { "property": "max", "document": "---\ntitle: max()\nslug: Web/CSS/max\ntags:\n - CSS\n - CSS Function\n - Calculate\n - Compute\n - Function\n - Layout\n - Reference\n - Web\n - max\nbrowser-compat: css.types.max\n---\n{{CSSRef}}\n\nThe **`max()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The `max()` function can be used anywhere a {{CSSxRef(\"<length>\")}}, {{CSSxRef(\"<frequency>\")}}, {{CSSxRef(\"<angle>\")}}, {{CSSxRef(\"<time>\")}}, {{CSSxRef(\"<percentage>\")}}, {{CSSxRef(\"<number>\")}}, or {{CSSxRef(\"<integer>\")}} is allowed.\n\n{{EmbedInteractiveExample(\"pages/css/function-max.html\")}}\n\nIn the first above example, the width will be at least 400px, but will be wider if the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). Think of the `max()` value as providing the _minimum_ value a property can have.\n\n## Syntax\n\nThe `max()` function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.\n\nThe expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as {{CSSxRef(\"attr\", \"attr()\")}}, that evaluate to a valid argument type (like {{CSSxRef(\"<length>\")}}), or nested {{CSSxRef(\"min\", \"min()\")}} and `max()` functions.\n\nYou can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.\n\n### Notes\n\n- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables _may_ be treated as if `auto` had been specified.\n- It is permitted to nest `min()` and other `max()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.\n- The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \\* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any \\ syntax value.\n- You can (and often need to) combine `min()` and `max()` values, or use `max()` within a `clamp()` or `calc()` function.\n\n### Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Setting a minimum size for a font\n\nAnother use case for CSS functions is allow a font size to grow while ensuring it is at least a minimum size, enabling responsive font sizes while ensuring legibility.\n\nLet's look at some CSS:\n\n```css\nh1 {\n font-size: 2rem;\n}\nh1.responsive {\n font-size: max(4vw, 2em, 2rem);\n}\n```\n\nThe font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility\n\n```html\n

      This text is always legible, but doesn't change size

      \n

      This text is always legible, and is responsive, to a point

      \n```\n\n{{EmbedLiveSample(\"Setting_a_minimum_size_for_a_font\", \"100%\", \"300\")}}\n\nThink of the `max()` function as finding the minimum value allowed for a property.\n\n## Accessibility concerns\n\nWhen `max()` is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef(\"min\", \"min()\")}} function nested within a `max()` that has as its second value a [relative length unit](/en-US/docs/Web/CSS/length#relative_length_units) that is always large enough to read. For example:\n\n```css\nsmall {\n font-size: max(min(0.5vw, 0.5em), 1rem);\n}\n```\n\nThis ensures a minimum size of _1rem_, with a text size that scales if the page is zoomed.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"calc\", \"calc()\")}}\n- {{CSSxRef(\"clamp\", \"clamp()\")}}\n- {{CSSxRef(\"min\", \"min()\")}}\n- [CSS Values](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\n" }, { "property": "microsoft_extensions", "document": "---\ntitle: Microsoft CSS extensions\nslug: Web/CSS/Microsoft_Extensions\ntags:\n - CSS\n - CSS:Microsoft Extensions\n - Guide\n - Non-standard\n - Overview\n - Reference\n---\n{{CSSRef}}\n\nMicrosoft applications such as Edge and Internet Explorer support a number of special **Microsoft extensions to [CSS](/en-US/docs/Web/CSS)**. These extensions are prefixed with `-ms-`.\n\n## Microsoft-only properties (avoid using on websites)\n\n> **Note:** These properties will only work in Microsoft applications, and are not on a standards track.\n\n- {{CSSxRef(\"-ms-accelerator\")}}\n- {{CSSxRef(\"-ms-block-progression\")}}\n- {{CSSxRef(\"-ms-content-zoom-chaining\")}}\n- {{CSSxRef(\"-ms-content-zooming\")}}\n- {{CSSxRef(\"-ms-content-zoom-limit\")}}\n- {{CSSxRef(\"-ms-content-zoom-limit-max\")}}\n- {{CSSxRef(\"-ms-content-zoom-limit-min\")}}\n- {{CSSxRef(\"-ms-content-zoom-snap\")}}\n- {{CSSxRef(\"-ms-content-zoom-snap-points\")}}\n- {{CSSxRef(\"-ms-content-zoom-snap-type\")}}\n- {{CSSxRef(\"-ms-filter\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-flow-from\")}}\n- {{CSSxRef(\"-ms-flow-into\")}}\n- {{CSSxRef(\"-ms-high-contrast-adjust\")}}\n- {{CSSxRef(\"-ms-hyphenate-limit-chars\")}}\n- {{CSSxRef(\"-ms-hyphenate-limit-lines\")}}\n- {{CSSxRef(\"-ms-hyphenate-limit-zone\")}}\n- {{CSSxRef(\"-ms-ime-align\")}}\n- {{CSSxRef(\"-ms-overflow-style\")}}\n- {{CSSxRef(\"-ms-scrollbar-3dlight-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-arrow-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-base-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-darkshadow-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-face-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-highlight-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-shadow-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scrollbar-track-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-ms-scroll-chaining\")}}\n- {{CSSxRef(\"-ms-scroll-limit\")}}\n- {{CSSxRef(\"-ms-scroll-limit-x-max\")}}\n- {{CSSxRef(\"-ms-scroll-limit-x-min\")}}\n- {{CSSxRef(\"-ms-scroll-limit-y-max\")}}\n- {{CSSxRef(\"-ms-scroll-limit-y-min\")}}\n- {{CSSxRef(\"-ms-scroll-rails\")}}\n- {{CSSxRef(\"-ms-scroll-snap-points-x\")}}\n- {{CSSxRef(\"-ms-scroll-snap-points-y\")}}\n- {{CSSxRef(\"-ms-scroll-snap-x\")}}\n- {{CSSxRef(\"-ms-scroll-snap-y\")}}\n- {{CSSxRef(\"-ms-scroll-translation\")}}\n- {{CSSxRef(\"-ms-text-autospace\")}}\n- {{CSSxRef(\"-ms-touch-select\")}}\n- {{CSSxRef(\"-ms-wrap-flow\")}}\n- {{CSSxRef(\"-ms-wrap-margin\")}}\n- {{CSSxRef(\"-ms-wrap-through\")}}\n- {{CSSxRef(\"zoom\")}}\n\n## Pseudo-elements\n\n- {{CSSxRef(\"::file-selector-button\",\"::-ms-browse\")}}\\*\n- {{CSSxRef(\"::-ms-check\")}}\n- {{CSSxRef(\"::-ms-clear\")}}\n- {{CSSxRef(\"::-ms-expand\")}}\n- {{CSSxRef(\"::-ms-fill\")}}\n- {{CSSxRef(\"::-ms-fill-lower\")}}\n- {{CSSxRef(\"::-ms-fill-upper\")}}\n- {{CSSxRef(\"::-ms-reveal\")}}\n- {{CSSxRef(\"::-ms-thumb\")}}\n- {{CSSxRef(\"::-ms-ticks-after\")}}\n- {{CSSxRef(\"::-ms-ticks-before\")}}\n- {{CSSxRef(\"::-ms-tooltip\")}}\n- {{CSSxRef(\"::-ms-track\")}}\n- {{CSSxRef(\"::-ms-value\")}}\n\n\\* Now standard.\n\n## Media features\n\n- {{CSSxRef(\"@media/-ms-high-contrast\",\"-ms-high-contrast\")}}\n\n## CSS-related DOM APIs\n\n- {{DOMxRef(\"msContentZoomFactor\")}}\n- {{DOMxRef(\"msGetPropertyEnabled\")}}\n- {{DOMxRef(\"msGetRegionContent\")}}\n- {{DOMxRef(\"MSRangeCollection\")}}\n- {{DOMxRef(\"msRegionOverflow\")}}\n\n## See also\n\n- [Mozilla CSS Extensions](/en-US/docs/Web/CSS/Mozilla_Extensions)\n- [WebKit CSS Extensions](/en-US/docs/Web/CSS/WebKit_Extensions)\n- [Microsoft API Extensions](/en-US/docs/Web/API/Microsoft_API_extensions)\n- [Microsoft JavaScript Extensions](/en-US/docs/Web/JavaScript/Microsoft_JavaScript_extensions)\n" }, { "property": "min-block-size", "document": "---\ntitle: min-block-size\nslug: Web/CSS/min-block-size\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - min-block-size\n - recipe:css-property\nbrowser-compat: css.properties.min-block-size\n---\n{{CSSRef}}\n\nThe **`min-block-size`** [CSS](/en-US/docs/Web/CSS) property defines the minimum horizontal or vertical size of an element's block, depending on its writing mode. It corresponds to either the {{cssxref(\"min-width\")}} or the {{cssxref(\"min-height\")}} property, depending on the value of {{cssxref(\"writing-mode\")}}.\n\nIf the writing mode is vertically oriented, the value of `min-block-size` relates to the minimum width of the element; otherwise, it relates to the minimum height of the element. A related property is {{cssxref(\"min-inline-size\")}}, which defines the other dimension of the element.\n\n{{EmbedInteractiveExample(\"pages/css/min-block-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmin-block-size: 100px;\nmin-block-size: 5em;\n\n/* values */\nmin-block-size: 10%;\n\n/* Keyword values */\nmin-block-size: max-content;\nmin-block-size: min-content;\nmin-block-size: fit-content(20em);\n\n/* Global values */\nmin-block-size: inherit;\nmin-block-size: initial;\nmin-block-size: revert;\nmin-block-size: revert-layer;\nmin-block-size: unset;\n```\n\n### Values\n\nThe `min-block-size` property takes the same values as the {{cssxref(\"min-width\")}} and {{cssxref(\"min-height\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting minimum block size for vertical text\n\n#### HTML\n\n```html\n

      Example text

      \n```\n\n#### CSS\n\n```css\n.exampleText {\n writing-mode: vertical-rl;\n background-color: yellow;\n min-block-size: 200px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_minimum_block_size_for_vertical_text\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"min-width\")}} and {{cssxref(\"min-height\")}}\n- {{cssxref(\"writing-mode\")}}\n" }, { "property": "mask-size", "document": "---\ntitle: mask-size\nslug: Web/CSS/mask-size\ntags:\n - CSS\n - CSS Masking\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.mask-size\n---\n{{CSSRef}}\n\nThe **`mask-size`** [CSS](/en-US/docs/Web/CSS) property specifies the sizes of the mask images. The size of the image can be fully or partially constrained in order to preserve its intrinsic ratio.\n\n```css\n/* Keywords syntax */\nmask-size: cover;\nmask-size: contain;\n\n/* One-value syntax */\n/* the width of the image (height set to 'auto') */\nmask-size: 50%;\nmask-size: 3em;\nmask-size: 12px;\nmask-size: auto;\n\n/* Two-value syntax */\n/* first value: width of the image, second value: height */\nmask-size: 50% auto;\nmask-size: 3em 25%;\nmask-size: auto 6px;\nmask-size: auto auto;\n\n/* Multiple values */\n/* Do not confuse this with mask-size: auto auto */\nmask-size: auto, auto;\nmask-size: 50%, 25%, 25%;\nmask-size: 6px, auto, contain;\n\n/* Global values */\nmask-size: inherit;\nmask-size: initial;\nmask-size: revert;\nmask-size: revert-layer;\nmask-size: unset;\n```\n\n> **Note:** If the value of this property is not set in a {{cssxref(\"mask\")}} shorthand property that is applied to the element after the `mask-size` CSS property, the value of this property is then reset to its initial value by the shorthand property.\n\n## Syntax\n\nOne or more `` values, separated by commas.\n\nA `` can be specified in one of three ways:\n\n- using the keyword `contain`\n- using the keyword `cover`\n- using width and height values\n\nTo specify a size using width and height, you can supply one or two values:\n\n- If only one value is given it sets the width, with the height set to `auto`.\n- If two values are given, the first sets width and the second sets height.\n\nEach value can be a ``, a ``, or `auto`.\n\n### Values\n\n- ``\n - : A `{{cssxref(\"<length>\")}}` value scales the mask image to the specified length in the corresponding dimension. Negative lengths are not allowed.\n- ``\n - : A {{cssxref(\"<percentage>\")}} value scales the mask image in the corresponding dimension to the specified percentage of the mask positioning area, which is determined by the value of {{cssxref(\"mask-origin\")}}. The mask positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding and content. Negative percentages are not allowed.\n- `auto`\n - : A keyword that scales the mask image in the corresponding directions in order to maintain its intrinsic proportion.\n- `contain`\n - : A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image is _letterboxed_ within the container. The image is automatically centered unless over-ridden by another property such as {{cssxref(\"mask-position\")}}.\n- `cover`\n - : A keyword that is the inverse of `contain`. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image \"covers\" the entire width or height of the container. When the image and container have different dimensions, _the image is clipped_ either on left/right or at top/bottom.\n\nThe interpretation of possible values depends on the image's intrinsic dimensions (width and height) and intrinsic proportion (ratio of width and height). A bitmap image always has intrinsic dimensions and an intrinsic proportion. A vector image may have both intrinsic dimensions and thus it has an intrinsic proportion too. It also may have one or no intrinsic dimensions and in either case it might or might not have an intrinsic proportion. Gradients are treated as images with no intrinsic dimensions or intrinsic proportion.\n\nThe rendered size of the mask image is then computed as follows:\n\n- If both components of `mask-size` are specified and are not `auto`:\n - : The mask image renders at the specified size.\n- If the `mask-size` is `contain` or `cover`:\n - : The image is rendered by preserving its intrinsic proportion at the largest size contained within or covering the mask positioning area. If the image has no intrinsic proportion, then it is rendered at the size of the mask positioning area.\n- If the `mask-size` is `auto` or `auto auto`:\n - : If the image has both intrinsic dimensions, it is rendered at that size. If it has no intrinsic dimensions and no intrinsic proportion, it is rendered at the size of the mask positioning area. If it has no dimensions but has a proportion, it's rendered as if `contain` had been specified instead. If the image has one intrinsic dimension and a proportion, it's rendered at the size determined by that one dimension and the proportion. If the image has one intrinsic dimension but no proportion, it's rendered using the intrinsic dimension and the corresponding dimension of the mask positioning area.\n- If `mask-size` has one `auto` component and one non-`auto` component:\n - : If the image has an intrinsic proportion, then render it using the specified dimension and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image's corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the mask positioning area.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting mask size as a percentage\n\n{{EmbedGHLiveSample(\"css-examples/masking/mask-size.html\", '100%', 700)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)\n" }, { "property": "min-height", "document": "---\ntitle: min-height\nslug: Web/CSS/min-height\ntags:\n - CSS\n - CSS Property\n - Layout\n - Minimum\n - Reference\n - dimensions\n - height\n - min-height\n - recipe:css-property\n - size\nbrowser-compat: css.properties.min-height\n---\n{{CSSRef}}\n\nThe **`min-height`** [CSS](/en-US/docs/Web/CSS) property sets the minimum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref(\"height\")}} property from becoming smaller than the value specified for `min-height`.\n\n{{EmbedInteractiveExample(\"pages/css/min-height.html\")}}\n\nThe element's height is set to the value of `min-height` whenever `min-height` is larger than {{cssxref(\"max-height\")}} or {{cssxref(\"height\")}}.\n\n## Syntax\n\n```css\n/* value */\nmin-height: 3.5em;\n\n/* value */\nmin-height: 10%;\n\n/* Keyword values */\nmin-height: max-content;\nmin-height: min-content;\nmin-height: fit-content(20em);\n\n/* Global values */\nmin-height: inherit;\nmin-height: initial;\nmin-height: revert;\nmin-height: revert-layer;\nmin-height: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Defines the `min-height` as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the `min-height` as a percentage of the containing block's height.\n- `auto`\n - : The browser will calculate and select a `min-height` for the specified element.\n- `max-content`\n - : The intrinsic preferred `min-height`.\n- `min-content`\n - : The intrinsic minimum `min-height`.\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting min-height\n\n```css\ntable { min-height: 75%; }\n\nform { min-height: 0; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [The box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{cssxref(\"box-sizing\")}}\n- {{cssxref(\"height\")}}, {{cssxref(\"max-height\")}}\n" }, { "property": "min-width", "document": "---\ntitle: min-width\nslug: Web/CSS/min-width\ntags:\n - CSS\n - CSS Property\n - Horizontal\n - Layout\n - Minimum\n - Reference\n - dimensions\n - min-width\n - recipe:css-property\n - size\n - width\nbrowser-compat: css.properties.min-width\n---\n{{CSSRef}}\n\nThe **`min-width`** [CSS](/en-US/docs/Web/CSS) property sets the minimum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref(\"width\")}} property from becoming smaller than the value specified for `min-width`.\n\n{{EmbedInteractiveExample(\"pages/css/min-width.html\")}}\n\nThe element's width is set to the value of `min-width` whenever `min-width` is larger than {{Cssxref(\"max-width\")}} or {{Cssxref(\"width\")}}.\n\n## Syntax\n\n```css\n/* value */\nmin-width: 3.5em;\n\n/* value */\nmin-width: 10%;\n\n/* Keyword values */\nmin-width: max-content;\nmin-width: min-content;\nmin-width: fit-content(20em);\n\n/* Global values */\nmin-width: inherit;\nmin-width: initial;\nmin-width: revert;\nmin-width: revert-layer;\nmin-width: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Defines the `min-width` as an absolute value.\n- {{cssxref(\"<percentage>\")}}\n - : Defines the `min-width` as a percentage of the containing block's width.\n- `auto`\n - : The browser will calculate and select a `min-width` for the specified element.\n- `max-content`\n - : The intrinsic preferred `min-width`.\n- `min-content`\n - : The intrinsic minimum `min-width`.\n- `fit-content({{cssxref(\"<length-percentage>\")}})`\n - : Uses the `fit-content` formula with the available space replaced by the specified argument, i.e. `min(max-content, max(min-content, argument))`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting minimum element width\n\n```css\ntable { min-width: 75%; }\n\nform { min-width: 0; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"width\")}}, {{Cssxref(\"max-width\")}}\n- The [box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{Cssxref(\"box-sizing\")}}\n" }, { "property": "min", "document": "---\ntitle: min()\nslug: Web/CSS/min\ntags:\n - CSS\n - CSS Function\n - Calculate\n - Compute\n - Function\n - Layout\n - Reference\n - min\nbrowser-compat: css.types.min\n---\n{{CSSRef}}\n\nThe **`min()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The `min()` function can be used anywhere a {{CSSxRef(\"<length>\")}}, {{CSSxRef(\"<frequency>\")}}, {{CSSxRef(\"<angle>\")}}, {{CSSxRef(\"<time>\")}}, {{CSSxRef(\"<percentage>\")}}, {{CSSxRef(\"<number>\")}}, or {{CSSxRef(\"<integer>\")}} is allowed.\n\n{{EmbedInteractiveExample(\"pages/css/function-min.html\")}}\n\nIn the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). In other words, the maximum width is 200px. Think of the `min()` value as providing the _maximum_ value a property can have.\n\n## Syntax\n\nThe `min()` function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.\n\nThe expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as {{CSSxRef(\"attr\", \"attr()\")}}, that evaluate to a valid argument type (like {{CSSxRef(\"<length>\")}}).\n\nYou can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.\n\n### Notes\n\n- Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables _may_ be treated as if `auto` had been specified.\n- It is permitted to nest `max()` and other `min()` functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the `calc()` function itself.\n- The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( \\* ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any `` syntax value.\n- You can (and often need to) combine `min()` and `max()` values, or use `min()` within a `clamp()` or `calc()` function.\n- You can provide more than two arguments, if you have multiple constraints to apply.\n\n### Formal syntax\n\n{{CSSSyntax}}\n\n## Accessibility concerns\n\nWhen using `min()` to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)\n\n## Examples\n\n### Setting a maximum size for a label and input\n\nAnother use case for CSS functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.\n\nLet's look at some CSS:\n\n```css\ninput, label {\n padding: 2px;\n box-sizing: border-box;\n display: inline-block;\n width: min(40%, 400px);\n background-color: pink;\n}\n\nform {\n margin: 4px;\n border: 1px solid black;\n padding: 4px;\n}\n```\n\nHere, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. We declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. In other words, the widest that the label and input can be is 400px. The narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small.\n\n```html\n
      \n \n \n
      \n```\n\n{{EmbedLiveSample(\"Setting_a_maximum_size_for_a_label_and_input\", \"100%\", \"110\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"calc\", \"calc()\")}}\n- {{CSSxRef(\"clamp\", \"clamp()\")}}\n- {{CSSxRef(\"max\", \"max()\")}}\n- [CSS Values](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\n" }, { "property": "minmax", "document": "---\ntitle: minmax()\nslug: Web/CSS/minmax\ntags:\n - CSS\n - CSS Function\n - CSS Grid\n - Experimental\n - Function\n - Layout\n - Reference\n - Web\nbrowser-compat: css.properties.grid-template-columns.minmax\n---\n{{CSSRef}}\n\nThe **`minmax()`** [CSS function](/en-US/docs/Web/CSS/CSS_Functions) defines a size range greater than or equal to _min_ and less than or equal to _max_. It is used with [CSS Grids](/en-US/docs/Web/CSS/CSS_Grid_Layout).\n\n{{EmbedInteractiveExample(\"pages/css/function-minmax.html\")}}\n\n## Syntax\n\n```css\n/* , values */\nminmax(200px, 1fr)\nminmax(400px, 50%)\nminmax(30%, 300px)\nminmax(100px, max-content)\nminmax(min-content, 400px)\nminmax(max-content, auto)\nminmax(auto, 300px)\nminmax(min-content, auto)\n\n/* , values */\nminmax(200px, 1fr)\nminmax(30%, 300px)\nminmax(400px, 50%)\nminmax(50%, min-content)\nminmax(300px, max-content)\nminmax(200px, auto)\n\n/* , values */\nminmax(400px, 50%)\nminmax(30%, 300px)\nminmax(min-content, 200px)\nminmax(max-content, 200px)\nminmax(auto, 300px)\n```\n\nA function taking two parameters, _min_ and _max_.\n\nEach parameter can be a ``, a ``, a `` value, or one of the keyword values `max-content`, `min-content`, or `auto`.\n\nIf _max_ < _min_, then _max_ is ignored and `minmax(min,max)` is treated as _min_. As a maximum, a {{cssxref(\"flex_value\",\"<flex>\")}} value sets the flex factor of a grid track; it is invalid as a minimum.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : A non-negative length.\n- {{cssxref(\"<percentage>\")}}\n - : A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `` must be treated as `auto`. The {{glossary(\"user agent\")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.\n- {{cssxref(\"<flex>\")}}\n - : A non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor.\n- `max-content`\n - : Represents the largest max-content contribution of the grid items occupying the grid track.\n- `min-content`\n - : Represents the largest min-content contribution of the grid items occupying the grid track.\n- `auto`\n - : As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}}) of the grid items occupying the grid track.\n\n### Formal syntax\n\n{{csssyntax}}\n\n### CSS properties\n\n`minmax()` function can be used within:\n\n- {{CSSxRef(\"grid-template-columns\")}}\n- {{CSSxRef(\"grid-template-rows\")}}\n- {{CSSxRef(\"grid-auto-columns\")}}\n- {{CSSxRef(\"grid-auto-rows\")}}\n\n## Examples\n\n### CSS\n\n```css\n#container {\n display: grid;\n grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;\n grid-gap: 5px;\n box-sizing: border-box;\n height: 200px;\n width: 100%;\n background-color: #8cffa0;\n padding: 10px;\n}\n\n#container > div {\n background-color: #8ca0ff;\n padding: 5px;\n}\n```\n\n### HTML\n\n```html\n
      \n
      \n Item as wide as the content, but at most 300 pixels.\n
      \n
      \n Item with flexible width but a minimum of 200 pixels.\n
      \n
      \n Inflexible item of 150 pixels width.\n
      \n
      \n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Grid Layout Guide: _[Basic concepts of grid layout - track sizing with minmax()](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#track_sizing_and_minmax)_\n- [CSS grids, logical values and writing modes](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes)\n- Video tutorial: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_\n" }, { "property": "number", "document": "---\ntitle: \nslug: Web/CSS/number\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.number\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a number, being either an integer or a number with a fractional component.\n\n## Syntax\n\nThe syntax of `` extends the syntax of {{CSSxRef(\"<integer>\")}}. A fractional value is represented by a `.` followed by one or more decimal digits, and may be appended to an integer. There is no unit associated with numbers.\n\n## Interpolation\n\nWhen animated, values of the `` CSS data type are interpolated as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.\n\n## Examples\n\n### Valid numbers\n\n```css example-good\n12 A raw is also a .\n4.01 Positive fraction\n-456.8 Negative fraction\n0.0 Zero\n+0.0 Zero, with a leading +\n-0.0 Zero, with a leading -\n.60 Fractional number without a leading zero\n10e3 Scientific notation\n-3.4e-2 Complicated scientific notation\n```\n\n### Invalid numbers\n\n```css example-bad\n12. Decimal points must be followed by at least one digit.\n+-12.2 Only one leading +/- is allowed.\n12.1.1 Only one decimal point is allowed.\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"<integer>\")}}\n" }, { "property": "mix-blend-mode", "document": "---\ntitle: mix-blend-mode\nslug: Web/CSS/mix-blend-mode\ntags:\n - Blending\n - CSS\n - CSS Property\n - Compositing\n - Compositing and Blending\n - recipe:css-property\nbrowser-compat: css.properties.mix-blend-mode\n---\n{{CSSRef}}\n\nThe **`mix-blend-mode`** [CSS](/en-US/docs/Web/CSS) property sets how an element's content should blend with the content of the element's parent and the element's background.\n\n{{EmbedInteractiveExample(\"pages/css/mix-blend-mode.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nmix-blend-mode: normal;\nmix-blend-mode: multiply;\nmix-blend-mode: screen;\nmix-blend-mode: overlay;\nmix-blend-mode: darken;\nmix-blend-mode: lighten;\nmix-blend-mode: color-dodge;\nmix-blend-mode: color-burn;\nmix-blend-mode: hard-light;\nmix-blend-mode: soft-light;\nmix-blend-mode: difference;\nmix-blend-mode: exclusion;\nmix-blend-mode: hue;\nmix-blend-mode: saturation;\nmix-blend-mode: color;\nmix-blend-mode: luminosity;\n\n/* Global values */\nmix-blend-mode: inherit;\nmix-blend-mode: initial;\nmix-blend-mode: revert;\nmix-blend-mode: revert-layer;\nmix-blend-mode: unset;\n```\n\n### Values\n\n- {{cssxref(\"<blend-mode>\")}}\n - : The blending mode that should be applied.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Effect of different mix-blend-mode values\n\n```html hidden\n
      \n
      \n
      Blending in isolation (no blending with the background)
      \n
      \n
      normal\n
      \n
      \n
      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      \n
      \n
      \n
      multiply\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      darken\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      screen\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      lighten\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      overlay\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color-dodge\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color-burn\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      hard-light\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      soft-light\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      difference\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      exclusion\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      hue\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      saturation\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      luminosity\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      \n\n
      Blending globally (blend with the background)
      \n
      \n
      normal\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      multiply\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      darken\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      screen\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      lighten\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      overlay\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color-dodge\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color-burn\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      hard-light\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      soft-light\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      difference\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      exclusion\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      hue\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      saturation\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      color\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      luminosity\n
      \n
      \n
      \n \n \n \n \n \n
      \n
      \n
      \n
      \n
      \n
      \n```\n\n```css hidden\nhtml,body {\n height: 100%;\n box-sizing: border-box;\n background: #EEE;\n}\n\n.grid {\n width: 100%;\n display: flex;\n font: 1em monospace;\n}\n\n.row {\n display: flex;\n flex: 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n height: auto;\n}\n\n.col {\n display: flex;\n flex: 1 auto;\n flex-direction: column;\n height: auto;\n}\n\n.cell {\n margin: .5em;\n padding: .5em;\n background-color: #FFF;\n overflow: hidden;\n text-align: center;\n}\n\n.note {\n background: #fff3d4;\n padding: 1em;\n margin: .5em .5em 0;\n font: .8em sans-serif;\n text-align: left;\n white-space: nowrap;\n}\n\n.note + .row .cell {\n margin-top: 0;\n}\n\n.container {\n position: relative;\n background: linear-gradient(to right, #000 0%, transparent 50%, #FFF 100%),\n linear-gradient(to bottom, #FF0 0%, #F0F 50%, #0FF 100%);\n width: 150px;\n height: 150px;\n margin: 0 auto;\n}\n\n.R {\n transform-origin: center;\n transform: rotate(-30deg);\n fill: url(#red);\n}\n\n.G {\n transform-origin: center;\n transform: rotate(90deg);\n fill: url(#green);\n}\n\n.B {\n transform-origin: center;\n transform: rotate(210deg);\n fill: url(#blue);\n}\n\n.isolate .group { isolation: isolate; }\n\n.normal .item { mix-blend-mode: normal; }\n.multiply .item { mix-blend-mode: multiply; }\n.screen .item { mix-blend-mode: screen; }\n.overlay .item { mix-blend-mode: overlay; }\n.darken .item { mix-blend-mode: darken; }\n.lighten .item { mix-blend-mode: lighten; }\n.color-dodge .item { mix-blend-mode: color-dodge; }\n.color-burn .item { mix-blend-mode: color-burn; }\n.hard-light .item { mix-blend-mode: hard-light; }\n.soft-light .item { mix-blend-mode: soft-light; }\n.difference .item { mix-blend-mode: difference; }\n.exclusion .item { mix-blend-mode: exclusion; }\n.hue .item { mix-blend-mode: hue; }\n.saturation .item { mix-blend-mode: saturation; }\n.color .item { mix-blend-mode: color; }\n.luminosity .item { mix-blend-mode: luminosity; }\n```\n\n{{EmbedLiveSample(\"Effect_of_different_mix-blend-mode_values\", \"100%\", 1600, \"\", \"\", \"example-outcome-frame\")}}\n\n### Using mix-blend-mode with HTML\n\n#### HTML\n\n```html\n
      \n
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n.circle {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n mix-blend-mode: screen;\n position: absolute;\n}\n\n.circle-1 {\n background: red;\n}\n\n.circle-2 {\n background: lightgreen;\n left: 40px;\n}\n\n.circle-3 {\n background: blue;\n left: 20px;\n top: 40px;\n}\n\n.isolate {\n isolation: isolate; /* Without isolation, the background color will be taken into account */\n position: relative;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_mix-blend-mode_with_HTML\", \"100%\", \"180\")}}\n\n### Using mix-blend-mode with SVG\n\n#### SVG\n\n```html\n\n \n \n \n \n \n\n```\n\n#### CSS\n\n```css\ncircle { mix-blend-mode: screen; }\n.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_mix-blend-mode_with_SVG\", \"100%\", \"180\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<blend-mode>\")}}\n- {{cssxref(\"background-blend-mode\")}}\n" }, { "property": "object-fit", "document": "---\ntitle: object-fit\nslug: Web/CSS/object-fit\ntags:\n - CSS\n - CSS Images\n - CSS Property\n - Layout\n - Reference\n - css layout\n - object-fit\n - recipe:css-property\n - size\nbrowser-compat: css.properties.object-fit\n---\n{{CSSRef}}\n\nThe **`object-fit`** [CSS](/en-US/docs/Web/CSS) property sets how the content of a [replaced element](/en-US/docs/Web/CSS/Replaced_element), such as an {{HTMLElement(\"img\")}} or {{HTMLElement(\"video\")}}, should be resized to fit its container.\n\nYou can alter the alignment of the replaced element's content object within the element's box using the {{cssxref(\"object-position\")}} property.\n\n{{EmbedInteractiveExample(\"pages/css/object-fit.html\")}}\n\n## Syntax\n\n```css\nobject-fit: contain;\nobject-fit: cover;\nobject-fit: fill;\nobject-fit: none;\nobject-fit: scale-down;\n\n/* Global values */\nobject-fit: inherit;\nobject-fit: initial;\nobject-fit: revert;\nobject-fit: revert-layer;\nobject-fit: unset;\n```\n\nThe `object-fit` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `contain`\n - : The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be [\"letterboxed\"]() if its aspect ratio does not match the aspect ratio of the box.\n- `cover`\n - : The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.\n- `fill`\n - : The replaced content is sized to fill the element's content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.\n- `none`\n - : The replaced content is not resized.\n- `scale-down`\n - : The content is sized as if `none` or `contain` were specified, whichever would result in a smaller concrete object size.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting object-fit for an image\n\n#### HTML\n\n```html\n
      \n

      object-fit: fill

      \n \"MDN\n\n \"MDN\n\n

      object-fit: contain

      \n \"MDN\n\n \"MDN\n\n

      object-fit: cover

      \n \"MDN\n\n \"MDN\n\n

      object-fit: none

      \n \"MDN\n\n \"MDN\n\n

      object-fit: scale-down

      \n \"MDN\n\n \"MDN\n
      \n```\n\n#### CSS\n\n```css\nh2 {\n font-family: Courier New, monospace;\n font-size: 1em;\n margin: 1em 0 0.3em;\n}\n\nimg {\n width: 150px;\n height: 100px;\n border: 1px solid #000;\n margin: 10px 0;\n}\n\n.narrow {\n width: 100px;\n height: 150px;\n}\n\n.fill {\n object-fit: fill;\n}\n\n.contain {\n object-fit: contain;\n}\n\n.cover {\n object-fit: cover;\n}\n\n.none {\n object-fit: none;\n}\n\n.scale-down {\n object-fit: scale-down;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_object-fit_for_an_image', 500, 1100) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other image-related CSS properties: {{cssxref(\"object-position\")}}, {{cssxref(\"image-orientation\")}}, {{cssxref(\"image-rendering\")}}, {{cssxref(\"image-resolution\")}}.\n- {{cssxref(\"background-size\")}}\n" }, { "property": "mozilla_extensions", "document": "---\ntitle: Mozilla CSS extensions\nslug: Web/CSS/Mozilla_Extensions\ntags:\n - CSS\n - CSS:Mozilla Extensions\n - Guide\n - Non-standard\n - Overview\n - Reference\n---\n{{CSSRef}}\n\nMozilla applications such as Firefox support a number of special **Mozilla extensions to [CSS](/en-US/docs/Web/CSS)**, including properties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. These extensions are prefixed with `-moz-`.\n\n## Mozilla-only properties and pseudo-classes (avoid using on websites)\n\n> **Note:** These properties and pseudo-classes will only work in Mozilla applications such as Firefox, and are not on a standards track. Some of them apply only to [XUL](/en-US/docs/Mozilla/Tech/XUL) elements.\n\n### B\n\n- {{CSSxRef(\"-moz-binding\")}} {{Deprecated_Inline}}\n- {{CSSxRef(\"-moz-border-bottom-colors\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-border-left-colors\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-border-right-colors\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-border-top-colors\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-box-align\")}}\n- {{CSSxRef(\"-moz-box-direction\")}}\n- {{CSSxRef(\"-moz-box-flex\")}}\n- {{CSSxRef(\"-moz-box-ordinal-group\")}}\n- {{CSSxRef(\"-moz-box-orient\")}}\n- {{CSSxRef(\"-moz-box-pack\")}}\n\n### C–I\n\n- {{CSSxRef(\"-moz-float-edge\")}}\n- {{CSSxRef(\"-moz-force-broken-image-icon\")}}\n- {{CSSxRef(\"-moz-image-region\")}}\n\n### O\n\n- {{CSSxRef(\"-moz-orient\")}}\n- {{CSSxRef(\"-moz-osx-font-smoothing\")}}\n- {{CSSxRef(\"-moz-outline-radius\")}}\n- {{CSSxRef(\"-moz-outline-radius-bottomleft\")}}\n- {{CSSxRef(\"-moz-outline-radius-bottomright\")}}\n- {{CSSxRef(\"-moz-outline-radius-topleft\")}}\n- {{CSSxRef(\"-moz-outline-radius-topright\")}}\n- {{CSSxRef(\"overflow-clip-box\")}}\n- {{CSSxRef(\"overflow-clip-box-block\")}}\n- {{CSSxRef(\"overflow-clip-box-inline\")}}\n\n### S–Z\n\n- {{CSSxRef(\"-moz-stack-sizing\")}}\n- {{CSSxRef(\":-moz-system-metric(images-in-menus)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(mac-graphite-theme)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(scrollbar-end-backward)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(scrollbar-end-forward)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(scrollbar-start-backward)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(scrollbar-start-forward)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(scrollbar-thumb-proportional)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(touch-enabled)\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-system-metric(windows-default-theme)\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-user-focus\")}}\n- {{CSSxRef(\"-moz-user-input\")}}\n- {{CSSxRef(\"-moz-user-modify\")}}\n- {{CSSxRef(\"-moz-window-dragging\")}}\n- {{CSSxRef(\"-moz-window-shadow\")}}\n\n## Formerly proprietary properties that are now standard\n\n> **Note:** To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below. Once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while.\n\n### A\n\n- {{CSSxRef(\"animation\", \"-moz-animation\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-delay\", \"-moz-animation-delay\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-direction\", \"-moz-animation-direction\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-duration\", \"-moz-animation-duration\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-fill-mode\", \"-moz-animation-fill-mode\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-iteration-count\", \"-moz-animation-iteration-count\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-name\", \"-moz-animation-name\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-play-state\", \"-moz-animation-play-state\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"animation-timing-function\",\"-moz-animation-timing-function\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"appearance\",\"-moz-appearance\")}} {{Experimental_Inline}}\n\n### B\n\n- {{CSSxRef(\"backface-visibility\", \"-moz-backface-visibility\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"background-clip\", \"-moz-background-clip\")}}{{deprecated_inline}}\n- {{CSSxRef(\"background-origin\", \"-moz-background-origin\")}}{{deprecated_inline}}\n- {{CSSxRef(\"-moz-background-inline-policy\")}}{{deprecated_inline}} \\[Superseded by the standard version {{CSSxRef(\"box-decoration-break\")}}]\n- {{CSSxRef(\"background-size\", \"-moz-background-size\")}}{{deprecated_inline}}\n- {{CSSxRef(\"border-inline-end\",\"-moz-border-end\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-end\")}}]\n- {{CSSxRef(\"border-inline-color\",\"-moz-border-end-color\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-end-color\")}}]\n- {{CSSxRef(\"border-inline-style\",\"-moz-border-end-style\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-end-style\")}}]\n- {{CSSxRef(\"border-inline-width\",\"-moz-border-end-width\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-end-width\")}}]\n- {{CSSxRef(\"border-image\",\"-moz-border-image\")}} {{Deprecated_Inline}}\n- {{CSSxRef(\"border-inline-start\",\"-moz-border-start\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-start\")}}]\n- {{CSSxRef(\"border-inline-start-color\",\"-moz-border-start-color\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-start-color\")}}]\n- {{CSSxRef(\"border-inline-start-style\",\"-moz-border-start-style\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-start-style\")}}]\n- {{CSSxRef(\"border-inline-start-width\",\"-moz-border-start-width\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"border-inline-start-width\")}}]\n- {{CSSxRef(\"box-sizing\", \"-moz-box-sizing\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n\n### C\n\n- {{CSSxRef(\"clip-path\")}} {{Experimental_Inline}} \\[Applying to more than SVG]\n- {{CSSxRef(\"column-count\",\"-moz-column-count\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-fill\",\"-moz-column-fill\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-gap\",\"-moz-column-gap\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-width\",\"-moz-column-width\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-rule\",\"-moz-column-rule\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-rule-width\",\"-moz-column-rule-width\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-rule-style\",\"-moz-column-rule-style\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"column-rule-color\",\"-moz-column-rule-color\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"-moz-context-properties\")}} {{Experimental_Inline}}\n\n### F–M\n\n- {{CSSxRef(\"filter\")}} {{Experimental_Inline}} \\[Applying to more than SVG]\n- {{CSSxRef(\"font-feature-settings\",\"-moz-font-feature-settings\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"font-language-override\",\"-moz-font-language-override\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"hyphens\",\"-moz-hyphens\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"margin-inline-end\",\"-moz-margin-end\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"margin-inline-end\")}}]\n- {{CSSxRef(\"margin-inline-start\",\"-moz-margin-start\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"margin-inline-start\")}}]\n- {{CSSxRef(\"mask\")}} {{Experimental_Inline}} \\[Applying to more than SVG]\n\n### O\n\n- {{CSSxRef(\"opacity\",\"-moz-opacity\")}} {{deprecated_inline}}\n- {{CSSxRef(\"outline\",\"-moz-outline\")}} {{deprecated_inline}}\n- {{CSSxRef(\"outline-color\",\"-moz-outline-color\")}} {{deprecated_inline}}\n- {{CSSxRef(\"outline-offset\",\"-moz-outline-offset\")}} {{deprecated_inline}}\n- {{CSSxRef(\"outline-style\",\"-moz-outline-style\")}} {{deprecated_inline}}\n- {{CSSxRef(\"outline-width\",\"-moz-outline-width\")}} {{deprecated_inline}}\n\n### P\n\n- {{CSSxRef(\"padding-inline-end\",\"-moz-padding-end\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"padding-inline-end\")}}]\n- {{CSSxRef(\"padding-inline-start\",\"-moz-padding-start\")}} {{Deprecated_Inline}} \\[Superseded by the standard version {{CSSxRef(\"padding-inline-start\")}}]\n- {{CSSxRef(\"perspective\", \"-moz-perspective\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"perspective-origin\",\"-moz-perspective-origin\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"pointer-events\")}} {{Experimental_Inline}} \\[Applying to more than SVG]\n\n### T–U\n\n- {{CSSxRef(\"tab-size\",\"-moz-tab-size\")}} {{Experimental_Inline}}\n- {{CSSxRef(\"text-align-last\",\"-moz-text-align-last\")}}{{deprecated_inline}}\n- {{CSSxRef(\"text-decoration-color\",\"-moz-text-decoration-color\")}}{{deprecated_inline}}\n- {{CSSxRef(\"text-decoration-line\",\"-moz-text-decoration-line\")}}{{deprecated_inline}}\n- {{CSSxRef(\"text-decoration-style\",\"-moz-text-decoration-style\")}}{{deprecated_inline}}\n- {{CSSxRef(\"text-size-adjust\",\"-moz-text-size-adjust\")}} {{Experimental_Inline}}\n- {{CSSxRef(\"transform\", \"-moz-transform\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transform-origin\", \"-moz-transform-origin\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transform-style\", \"-moz-transform-style\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transition\", \"-moz-transition\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transition-delay\", \"-moz-transition-delay\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transition-duration\", \"-moz-transition-duration\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transition-property\", \"-moz-transition-property\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"transition-timing-function\", \"-moz-transition-timing-function\")}} {{Deprecated_Inline}} \\[Prefixed version still accepted]\n- {{CSSxRef(\"user-select\",\"-moz-user-select\")}} {{Experimental_Inline}}\n\n## Values\n\n### Global values\n\n- {{CSSxRef(\"initial\",\"-moz-initial\")}}\n\n### {{CSSxRef(\"-moz-appearance\")}}\n\n- `button`\n- `button-arrow-down`\n- `button-arrow-next`\n- `button-arrow-previous`\n- `button-arrow-up`\n- `button-bevel`\n- `checkbox`\n- `checkbox-container`\n- `checkbox-label`\n- `checkmenuitem`\n- `dialog`\n- `groupbox`\n- `listbox`\n- `menuarrow`\n- `menucheckbox`\n- `menuimage`\n- `menuitem`\n- `menuitemtext`\n- `menulist`\n- `menulist-button`\n- `menulist-text`\n- `menulist-textfield`\n- `menupopup`\n- `menuradio`\n- `menuseparator`\n- `-moz-mac-unified-toolbar`\n- `-moz-win-borderless-glass`\n- `-moz-win-browsertabbar-toolbox`\n- `-moz-win-communications-toolbox`\n- `-moz-win-glass`\n- `-moz-win-media-toolbox`\n- `-moz-window-button-box`\n- `-moz-window-button-box-maximized`\n- `-moz-window-button-close`\n- `-moz-window-button-maximize`\n- `-moz-window-button-minimize`\n- `-moz-window-button-restore`\n- `-moz-window-titlebar`\n- `-moz-window-titlebar-maximized`\n- `progressbar`\n- `progresschunk`\n- `radio`\n- `radio-container`\n- `radio-label`\n- `radiomenuitem`\n- `resizer`\n- `resizerpanel`\n- `scale-horizontal`\n- `scalethumb-horizontal`\n- `scalethumb-vertical`\n- `scale-vertical`\n- `scrollbarbutton-down`\n- `scrollbarbutton-left`\n- `scrollbarbutton-right`\n- `scrollbarbutton-up`\n- `scrollbar-small`\n- `scrollbarthumb-horizontal`\n- `scrollbarthumb-vertical`\n- `scrollbartrack-horizontal`\n- `scrollbartrack-vertical`\n- `separator`\n- `spinner`\n- `spinner-downbutton`\n- `spinner-textfield`\n- `spinner-upbutton`\n- `statusbar`\n- `statusbarpanel`\n- `tab`\n- `tabpanels`\n- `tab-scroll-arrow-back`\n- `tab-scroll-arrow-forward`\n- `textfield`\n- `textfield-multiline`\n- `toolbar`\n- `toolbarbutton-dropdown`\n- `toolbox`\n- `tooltip`\n- `treeheadercell`\n- `treeheadersortarrow`\n- `treeitem`\n- `treetwisty`\n- `treetwistyopen`\n- `treeview`\n- `window`\n\n### {{CSSxRef(\"background-image\")}}\n\n#### Gradients\n\n- {{CSSxRef(\"linear-gradient\",\"-moz-linear-gradient\")}} {{Deprecated_Inline}}\n- {{CSSxRef(\"radial-gradient\",\"-moz-radial-gradient\")}} {{Deprecated_Inline}}\n\n#### Elements\n\n- {{CSSxRef(\"element\",\"-moz-element\")}}\n\n#### Sub-images\n\n- {{CSSxRef(\"-moz-image-rect\")}}\n\n### {{CSSxRef(\"border-color\")}}\n\n- `-moz-use-text-color`{{deprecated_inline}} (removed in {{bug(1306214)}}); use {{CSSxRef(\"color_value#currentColor_keyword\",\"currentcolor\")}} instead.\n\n### {{CSSxRef(\"border-style\")}} and {{CSSxRef(\"outline-style\")}}\n\n- `-moz-bg-inset` {{deprecated_inline}}\n- `-moz-bg-outset` {{deprecated_inline}}\n- `-moz-bg-solid` {{deprecated_inline}}\n\n### {{CSSxRef(\"<color>\")}} keywords\n\n- `-moz-activehyperlinktext`\n- `-moz-hyperlinktext`\n- `-moz-visitedhyperlinktext`\n- `-moz-buttondefault`\n- `-moz-buttonhoverface`\n- `-moz-buttonhovertext`\n- `-moz-default-background-color`\n- `-moz-default-color`\n- `-moz-cellhighlight`\n- `-moz-cellhighlighttext`\n- `-moz-field`\n- `-moz-fieldtext`\n- `-moz-dialog`\n- `-moz-dialogtext`\n- `-moz-dragtargetzone`\n- `-moz-mac-accentdarkestshadow`\n- `-moz-mac-accentdarkshadow`\n- `-moz-mac-accentface`\n- `-moz-mac-accentlightesthighlight`\n- `-moz-mac-accentlightshadow`\n- `-moz-mac-accentregularhighlight`\n- `-moz-mac-accentregularshadow`\n- `-moz-mac-chrome-active`\n- `-moz-mac-chrome-inactive`\n- `-moz-mac-focusring`\n- `-moz-mac-menuselect`\n- `-moz-mac-menushadow`\n- `-moz-mac-menutextselect`\n- `-moz-menuhover`\n- `-moz-menuhovertext`\n- `-moz-win-communicationstext`\n- `-moz-win-mediatext`\n- `-moz-nativehyperlinktext`\n\n### {{CSSxRef(\"display\")}}\n\n- `-moz-box` {{deprecated_inline}}\n- `-moz-inline-block` {{deprecated_inline}}\n- `-moz-inline-box` {{Deprecated_Inline}}\n- `-moz-inline-grid` {{deprecated_inline}}\n- `-moz-inline-stack` {{deprecated_inline}}\n- `-moz-inline-table` {{deprecated_inline}}\n- `-moz-grid` {{deprecated_inline}}\n- `-moz-grid-group` {{deprecated_inline}}\n- `-moz-grid-line` {{deprecated_inline}}\n- `-moz-groupbox` {{deprecated_inline}}\n- `-moz-deck` {{deprecated_inline}}\n- `-moz-popup` {{deprecated_inline}}\n- `-moz-stack` {{deprecated_inline}}\n- `-moz-marker` {{deprecated_inline}}\n\n### {{CSSxRef(\"empty-cells\")}}\n\n- `-moz-show-background` (default value in quirks mode)\n\n### {{CSSxRef(\"font\")}}\n\n- `-moz-button`\n- `-moz-info`\n- `-moz-desktop`\n- `-moz-dialog` (also a color)\n- `-moz-document`\n- `-moz-workspace`\n- `-moz-window`\n- `-moz-list`\n- `-moz-pull-down-menu`\n- `-moz-field` (also a color)\n\n### {{CSSxRef(\"font-family\")}}\n\n- `-moz-fixed`\n\n### {{CSSxRef(\"image-rendering\")}}\n\n- {{CSSxRef(\"image-rendering\",\"-moz-crisp-edges\")}}\n\n### {{CSSxRef(\"<length>\")}}\n\n- {{CSSxRef(\"-moz-calc\")}}\n\n### {{CSSxRef(\"list-style-type\")}}\n\n- `-moz-arabic-indic`\n- `-moz-bengali`\n- `-moz-cjk-earthly-branch`\n- `-moz-cjk-heavenly-stem`\n- `-moz-devanagari`\n- `-moz-ethiopic-halehame`\n- `-moz-ethiopic-halehame-am`\n- `-moz-ethiopic-halehame-ti-er`\n- `-moz-ethiopic-halehame-ti-et`\n- `-moz-ethiopic-numeric`\n- `-moz-gujarati`\n- `-moz-gurmukhi`\n- `-moz-hangul`\n- `-moz-hangul-consonant`\n- `-moz-japanese-formal`\n- `-moz-japanese-informal`\n- `-moz-kannada`\n- `-moz-khmer`\n- `-moz-lao`\n- `-moz-malayalam`\n- `-moz-myanmar`\n- `-moz-oriya`\n- `-moz-persian`\n- `-moz-simp-chinese-formal`\n- `-moz-simp-chinese-informal`\n- `-moz-tamil`\n- `-moz-telugu`\n- `-moz-thai`\n- `-moz-trad-chinese-formal`\n- `-moz-trad-chinese-informal`\n- `-moz-urdu`\n\n### {{CSSxRef(\"overflow\")}}\n\n- {{CSSxRef(\"-moz-scrollbars-none\")}} {{deprecated_inline}}\n- {{CSSxRef(\"-moz-scrollbars-horizontal\")}} {{Deprecated_Inline}}\n- {{CSSxRef(\"-moz-scrollbars-vertical\")}} {{Deprecated_Inline}}\n- {{CSSxRef(\"-moz-hidden-unscrollable\")}}\n\n### {{CSSxRef(\"text-align\")}}\n\n- `-moz-center`\n- `-moz-left`\n- `-moz-right`\n\n### {{CSSxRef(\"text-decoration\")}}\n\n- `-moz-anchor-decoration`\n\n### {{CSSxRef(\"-moz-user-select\")}}\n\n- `-moz-all`\n- `-moz-none`\n\n### {{CSSxRef(\"width\")}}, {{CSSxRef(\"min-width\")}}, and {{CSSxRef(\"max-width\")}}\n\n- `-moz-min-content`\n- `-moz-fit-content`\n- `-moz-max-content`\n- `-moz-available`\n\n## Pseudo-elements and pseudo-classes\n\n### A – D\n\n- {{CSSxRef(\"::-moz-anonymous-block\")}}\n- {{CSSxRef(\"::-moz-anonymous-positioned-block\")}}\n- {{CSSxRef(\":-moz-any\")}}\n- {{CSSxRef(\":-moz-any-link\")}} \\[Matches `:link` and `:visited`]\n- {{CSSxRef(\":-moz-broken\")}}\n- {{CSSxRef(\"::-moz-canvas\")}}\n- {{CSSxRef(\"::-moz-color-swatch\")}}\n- {{CSSxRef(\"::-moz-cell-content\")}}\n- {{CSSxRef(\":-moz-drag-over\")}}\n\n### F – I\n\n- {{CSSxRef(\":-moz-first-node\")}}\n- {{CSSxRef(\"::-moz-focus-inner\")}}\n- {{CSSxRef(\"::-moz-focus-outer\")}}\n- {{CSSxRef(\":-moz-focusring\")}}\n- {{CSSxRef(\":-moz-full-screen\")}}\n- {{CSSxRef(\":-moz-full-screen-ancestor\")}}\n- {{CSSxRef(\":-moz-handler-blocked\")}}\n- {{CSSxRef(\":-moz-handler-crashed\")}}\n- {{CSSxRef(\":-moz-handler-disabled\")}}\n- {{CSSxRef(\"::-moz-inline-table\")}}\n\n### L\n\n- {{CSSxRef(\":-moz-last-node\")}}\n- {{CSSxRef(\":-moz-list-bullet\")}}\n- {{CSSxRef(\":-moz-list-number\")}}\n- {{CSSxRef(\":-moz-loading\")}}\n- {{CSSxRef(\":-moz-locale-dir(ltr)\")}}\n- {{CSSxRef(\":-moz-locale-dir(rtl)\")}}\n- {{CSSxRef(\":-moz-lwtheme\")}}\n- {{CSSxRef(\":-moz-lwtheme-brighttext\")}}\n- {{CSSxRef(\":-moz-lwtheme-darktext\")}}\n\n### N – R\n\n- {{CSSxRef(\":-moz-native-anonymous\")}}\n- {{CSSxRef(\":-moz-only-whitespace\")}}\n- {{CSSxRef(\"::-moz-page\")}}\n- {{CSSxRef(\"::-moz-page-sequence\")}}\n- {{CSSxRef(\"::-moz-pagebreak\")}}\n- {{CSSxRef(\"::-moz-pagecontent\")}}\n- {{CSSxRef(\":-moz-placeholder\")}} {{deprecated_inline}}\n- {{CSSxRef(\"::-moz-placeholder\")}} {{deprecated_inline}}\n- {{CSSxRef(\"::-moz-progress-bar\")}}\n- {{CSSxRef(\"::-moz-range-progress\")}}\n- {{CSSxRef(\"::-moz-range-thumb\")}}\n- {{CSSxRef(\"::-moz-range-track\")}}\n- {{CSSxRef(\":-moz-read-only\")}}\n- {{CSSxRef(\":-moz-read-write\")}}\n\n### S\n\n- {{CSSxRef(\"::-moz-scrolled-canvas\")}}\n- {{CSSxRef(\"::-moz-scrolled-content\")}}\n- {{CSSxRef(\"::-moz-scrolled-page-sequence\")}}\n- {{CSSxRef(\"::selection\",\"::-moz-selection\")}} {{deprecated_inline}}\n- {{CSSxRef(\":-moz-submit-invalid\")}}\n- {{CSSxRef(\":-moz-suppressed\")}}\n- {{CSSxRef(\"::-moz-svg-foreign-content\")}}\n\n### T\n\n- {{CSSxRef(\"::-moz-table\")}}\n- {{CSSxRef(\"::-moz-table-cell\")}}\n- {{CSSxRef(\"::-moz-table-column\")}}\n- {{CSSxRef(\"::-moz-table-column-group\")}}\n- {{CSSxRef(\"::-moz-table-outer\")}}\n- {{CSSxRef(\"::-moz-table-row\")}}\n- {{CSSxRef(\"::-moz-table-row-group\")}}\n- {{CSSxRef(\":-moz-tree-cell\")}}\n- {{CSSxRef(\":-moz-tree-cell-text\")}}\n- {{CSSxRef(\":-moz-tree-cell-text(hover)\")}}\n- {{CSSxRef(\":-moz-tree-checkbox\")}}\n- {{CSSxRef(\":-moz-tree-column\")}}\n- {{CSSxRef(\":-moz-tree-drop-feedback\")}}\n- {{CSSxRef(\":-moz-tree-image\")}}\n- {{CSSxRef(\":-moz-tree-indentation\")}}\n- {{CSSxRef(\":-moz-tree-line\")}}\n- {{CSSxRef(\":-moz-tree-progressmeter\")}}\n- {{CSSxRef(\":-moz-tree-row\")}}\n- {{CSSxRef(\":-moz-tree-row(hover)\")}}\n- {{CSSxRef(\":-moz-tree-separator\")}}\n- {{CSSxRef(\":-moz-tree-twisty\")}}\n\n### U – X\n\n- {{CSSxRef(\":-moz-ui-invalid\")}}\n- {{CSSxRef(\":-moz-ui-valid\")}}\n- {{CSSxRef(\":-moz-user-disabled\")}}\n- {{CSSxRef(\"::-moz-viewport\")}}\n- {{CSSxRef(\"::-moz-viewport-scroll\")}}\n- {{CSSxRef(\":-moz-window-inactive\")}}\n- {{CSSxRef(\"::-moz-xul-anonymous-block\")}}\n\n## At-rules\n\n- {{CSSxRef(\"@-moz-document\")}}\n\n## Media features\n\n- {{CSSxRef(\"@media/-moz-device-pixel-ratio\", \"-moz-device-pixel-ratio\")}}\n- {{CSSxRef(\"@media/-moz-os-version\", \"-moz-os-version\")}}\n- {{CSSxRef(\"@media/-moz-touch-enabled\", \"-moz-touch-enabled\")}}\n- {{CSSxRef(\"@media/-moz-windows-glass\", \"-moz-windows-glass\")}}\n\n## Other\n\n- {{CSSxRef(\"-moz-alt-content\")}} (see {{Bug(11011)}})\n\n## See also\n\n- [Chrome-only CSS reference](/en-US/docs/Mozilla/Gecko/Chrome/CSS)\n- [Microsoft CSS extensions](/en-US/docs/Web/CSS/Microsoft_Extensions)\n- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions)\n" }, { "property": "margin-inline-end", "document": "---\ntitle: margin-inline-end\nslug: Web/CSS/margin-inline-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - NeedsContent\n - Reference\n - margin-inline\n - margin-inline-end\n - recipe:css-property\nbrowser-compat: css.properties.margin-inline-end\n---\n{{CSSRef}}\n\nThe **`margin-inline-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline end margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. In other words, it corresponds to the {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}} or {{cssxref(\"margin-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/margin-inline-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmargin-inline-end: 10px; /* An absolute length */\nmargin-inline-end: 1em; /* relative to the text size */\nmargin-inline-end: 5%; /* relative to the nearest block container's width */\n\n/* Keyword values */\nmargin-inline-end: auto;\n\n/* Global values */\nmargin-inline-end: inherit;\nmargin-inline-end: initial;\nmargin-inline-end: revert;\nmargin-inline-end: revert-layer;\nmargin-inline-end: unset;\n```\n\nIt relates to {{cssxref(\"margin-block-start\")}}, {{cssxref(\"margin-block-end\")}}, and {{cssxref(\"margin-inline-start\")}}, which define the other margins of the element.\n\n### Values\n\nThe `margin-inline-end` property takes the same values as the {{cssxref(\"margin-left\")}} property.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline end margin\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n margin-inline-end: 20px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_end_margin\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"margin-inline-start\")}}\n- The mapped physical properties: {{cssxref(\"margin-top\")}}, {{cssxref(\"margin-right\")}}, {{cssxref(\"margin-bottom\")}}, and {{cssxref(\"margin-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "object-position", "document": "---\ntitle: object-position\nslug: Web/CSS/object-position\ntags:\n - CSS\n - CSS Images\n - CSS Property\n - Layout\n - Position\n - Reference\n - Replaced Elements\n - css layout\n - object-position\n - recipe:css-property\nbrowser-compat: css.properties.object-position\n---\n{{CSSRef}}\n\nThe **`object-position`** [CSS](/en-US/docs/Web/CSS) property specifies the alignment of the selected [replaced element](/en-US/docs/Web/CSS/Replaced_element)'s contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.\n\nYou can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the {{cssxref(\"object-fit\")}} property.\n\n{{EmbedInteractiveExample(\"pages/css/object-position.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nobject-position: top;\nobject-position: bottom;\nobject-position: left;\nobject-position: right;\nobject-position: center;\n\n/* values */\nobject-position: 25% 75%;\n\n/* values */\nobject-position: 0 0;\nobject-position: 1cm 2cm;\nobject-position: 10ch 8em;\n\n/* Edge offsets values */\nobject-position: bottom 10px right 20px;\nobject-position: right 3em bottom 10px;\nobject-position: bottom 10px right;\nobject-position: top right 10px;\n\n/* Global values */\nobject-position: inherit;\nobject-position: initial;\nobject-position: revert;\nobject-position: revert-layer;\nobject-position: unset;\n```\n\n### Values\n\n- {{cssxref(\"<position>\")}}\n - : From one to four values that define the 2D position of the element. Relative or absolute offsets can be used.\n\n> **Note:** The position can be set so that the replaced element is drawn outside its box.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Positioning image content\n\n#### HTML\n\nHere we see HTML that includes two {{HTMLElement(\"img\")}} elements, each displaying the MDN logo.\n\n```html\n\"MDN\n\"MDN\n```\n\n#### CSS\n\nThe CSS includes default styling for the `` element itself, as well as separate styles for each of the two images.\n\n```css\nimg {\n width: 300px;\n height: 250px;\n border: 1px solid black;\n background-color: silver;\n margin-right: 1em;\n object-fit: none;\n}\n\n#object-position-1 {\n object-position: 10px;\n}\n\n#object-position-2 {\n object-position: 100% 10%;\n}\n```\n\nThe first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.\n\n#### Result\n\n{{ EmbedLiveSample('Positioning_image_content', '100%','600px') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Other image-related CSS properties: {{cssxref(\"object-fit\")}}, {{cssxref(\"image-orientation\")}}, {{cssxref(\"image-rendering\")}}, {{cssxref(\"image-resolution\")}}.\n" }, { "property": "offset-anchor", "document": "---\ntitle: offset-anchor\nslug: Web/CSS/offset-anchor\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Motion Path\n - Reference\n - offset-anchor\n - recipe:css-property\nbrowser-compat: css.properties.offset-anchor\n---\n{{CSSRef}}\n\nThe **`offset-anchor`** [CSS](/en-US/docs/Web/CSS) property specifies the point inside the box of an element traveling along an {{cssxref(\"offset-path\")}} that is actually moving along the path.\n\n{{EmbedInteractiveExample(\"pages/css/offset-anchor.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\noffset-anchor: top;\noffset-anchor: bottom;\noffset-anchor: left;\noffset-anchor: right;\noffset-anchor: center;\noffset-anchor: auto;\n\n/* values */\noffset-anchor: 25% 75%;\n\n/* values */\noffset-anchor: 0 0;\noffset-anchor: 1cm 2cm;\noffset-anchor: 10ch 8em;\n\n/* Edge offsets values */\noffset-anchor: bottom 10px right 20px;\noffset-anchor: right 3em bottom 10px;\n\n/* Global values */\noffset-anchor: inherit;\noffset-anchor: initial;\noffset-anchor: revert;\noffset-anchor: unset;\n```\n\n### Values\n\n- `auto`\n - : `offset-anchor` is given the same value as the element's {{cssxref(\"transform-origin\")}}, unless {{cssxref(\"offset-path\")}} is `none`, in which case it takes its value from {{cssxref(\"offset-position\")}}.\n- ``\n - : A {{cssxref(\"<position>\")}} defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. For more specifics, see the {{cssxref(\"<position>\")}} and {{cssxref(\"background-position\")}} reference pages. Note that the 3-value position syntax does not work for any usage of ``, except for in `background(-position)`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting various offset-anchor values\n\nIn the following example, we have three {{htmlelement(\"div\")}} elements nested in {{htmlelement(\"section\")}} elements. Each `
      ` is given the same {{cssxref(\"offset-path\")}} (a horizontal line 200 pixels long) and animated to move along it. The three are then given different {{cssxref(\"background-color\")}} and `offset-anchor` values.\n\nEach `
      ` has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the `
      `'s offset paths are running.\n\nThis allows you to see what effect the different `offset-anchor` values have — the first one, `auto`, causes the `
      `'s center point to move along the path. The other two cause the `
      `'s top-right and bottom-left points to move along the path, respectively.\n\n#### HTML\n\n```html\n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n offset-path: path('M 0,20 L 200,20');\n animation: move 3000ms infinite alternate ease-in-out;\n width: 40px;\n height: 40px;\n}\n\nsection {\n background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%);\n border: 1px solid #ccc;\n margin-bottom: 10px;\n}\n\n.offset-anchor1 {\n offset-anchor: auto;\n background: cyan;\n}\n\n.offset-anchor2 {\n offset-anchor: right top;\n background: purple;\n}\n\n.offset-anchor3 {\n offset-anchor: left bottom;\n background: magenta;\n}\n\n@keyframes move {\n 0% {\n offset-distance: 0%;\n }\n 100% {\n offset-distance: 100%;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_various_offset-anchor_values', '100%', '300')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-rotate\")}}\n- [SVG ``](/en-US/docs/Web/SVG/Tutorial/Paths)\n" }, { "property": "media_queries", "document": "---\ntitle: Media queries\nslug: Web/CSS/Media_Queries\ntags:\n - CSS\n - Guide\n - Media Queries\n - Overview\n - Reference\n - Responsive Design\nspec-urls:\n - https://drafts.csswg.org/mediaqueries/\n - https://drafts.csswg.org/css-conditional/\n---\n{{CSSRef}}\n\n**Media queries** let you adapt your site or app depending on the presence or value of various device characteristics and parameters.\n\nThey are a key component of [responsive design](/en-US/docs/Web/Progressive_web_apps). For example, a media query can shrink the font size on small devices, increase the padding between paragraphs when a page is viewed in portrait mode, or bump up the size of buttons on touchscreens.\n\nIn [CSS](/en-US/docs/Web/CSS), use the {{cssxref(\"@media\")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. Use {{cssxref(\"@import\")}} to conditionally apply an entire style sheet.\n\n### Media queries in HTML\n\nIn [HTML](/en-US/docs/Web/HTML), media queries can be applied to various elements:\n\n- In the {{HTMLElement(\"link\")}} element's {{htmlattrxref(\"media\", \"link\")}} attribute, they define the media to which a linked resource (typically CSS) should be applied.\n- In the {{HTMLElement(\"source\")}} element's {{htmlattrxref(\"media\", \"source\")}} attribute, they define the media to which that source should be applied. (This is only valid inside {{HTMLElement(\"picture\")}} elements.)\n- In the {{HTMLElement(\"style\")}} element's {{htmlattrxref(\"media\", \"style\")}} attribute, they define the media to which the style should be applied.\n\n### Media queries in JavaScript\n\nIn [JavaScript](/en-US/docs/Web/JavaScript), you can use the {{domxref(\"Window.matchMedia()\")}} method to test the window against a media query. You can also use {{domxref(\"MediaQueryList.addListener()\")}} to be notified whenever the state of a query changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.\n\nYou can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries).\n\n## Reference\n\n### At-rules\n\n- {{cssxref(\"@import\")}}\n- {{cssxref(\"@media\")}}\n\n## Guides\n\n- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\n - : Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions.\n- [Testing media queries programmatically](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)\n - : Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser).\n- [Using Media Queries for Accessibility](/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility)\n - : Learn how Media Queries can help users understand your website better.\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- Use {{cssxref(\"@supports\")}} to apply styles that depend on browser support for various CSS technologies.\n" }, { "property": "offset-distance", "document": "---\ntitle: offset-distance\nslug: Web/CSS/offset-distance\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Motion Path\n - Reference\n - motion-offset\n - offset-distance\n - recipe:css-property\nbrowser-compat: css.properties.offset-distance\n---\n{{CSSRef}}\n\nThe **`offset-distance`** CSS property specifies a position along an {{CSSxRef(\"offset-path\")}} for an element to be placed.\n\n{{EmbedInteractiveExample(\"pages/css/offset-distance.html\")}}\n\n## Syntax\n\n```css\n/* Default value */\noffset-distance: 0;\n\n/* the middle of the offset-path */\noffset-distance: 50%;\n\n/* a fixed length positioned along the path */\noffset-distance: 40px;\n\n/* Global values */\noffset-distance: inherit;\noffset-distance: initial;\noffset-distance: revert;\noffset-distance: revert-layer;\noffset-distance: unset;\n```\n\n- `{{cssxref('<length-percentage>')}}`\n\n - : A length that specifies how far the element is along the path (defined with {{cssxref('offset-path')}}).\n\n 100% represents the total length of the path (when the `offset-path` is defined as a basic shape or `path()`).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using offset-distance in an animation\n\nThe motion aspect in CSS Motion Path typically comes from animating the `offset-distance` property. If you want to animate an element along its full path, you would define its {{cssxref('offset-path')}} and then set up an animation that takes the `offset-distance` from `0%` to `100%`.\n\n#### HTML\n\n```html\n
      \n```\n\n#### CSS\n\n```css\n#motion-demo {\n offset-path: path('M20,20 C20,100 200,0 200,100');\n animation: move 3000ms infinite alternate ease-in-out;\n width: 40px;\n height: 40px;\n background: cyan;\n}\n\n@keyframes move {\n 0% {\n offset-distance: 0%;\n }\n 100% {\n offset-distance: 100%;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Using_offset-distance_in_an_animation', '100%', 150)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset\")}}\n- {{cssxref(\"offset-anchor\")}}\n- {{cssxref(\"offset-path\")}}\n- {{cssxref(\"offset-position\")}}\n- {{cssxref(\"offset-rotate\")}}\n" }, { "property": "min-content", "document": "---\ntitle: min-content\nslug: Web/CSS/min-content\ntags:\n - CSS\n - Keyword\n - Reference\n - min-content\n - sizing\nbrowser-compat: css.properties.width.min-content\n---\nThe `min-content` sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.\n\n## Syntax\n\n```css\n/* Used as a length */\nwidth: min-content;\ninline-size: min-content;\nheight: min-content;\nblock-size: min-content;\n\n/* used in grid tracks */\ngrid-template-columns: 200px 1fr min-content;\n\n/* Global values */\nmin-content: inherit;\nmin-content: initial;\nmin-content: revert;\nmin-content: revert-layer;\nmin-content: unset;\n```\n\n## Examples\n\n### Using min-content for box sizing\n\n#### HTML\n\n```html\n
      Item
      \n
      Item with more text in it.
      \n```\n\n#### CSS\n\n```css\n.item {\n width: min-content;\n background-color: #8ca0ff;\n padding: 5px;\n margin-bottom: 1em;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_min-content_for_box_sizing\", \"100%\", 200)}}\n\n### Sizing grid columns with min-content\n\n#### HTML\n\n```html\n
      \n
      Item
      \n
      \n Item with more text in it.\n
      \n
      Flexible item
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n display: grid;\n grid-template-columns: min-content min-content 1fr;\n grid-gap: 5px;\n box-sizing: border-box;\n height: 200px;\n width: 100%;\n background-color: #8cffa0;\n padding: 10px;\n}\n\n#container > div {\n background-color: #8ca0ff;\n padding: 5px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Sizing_grid_columns_with_min-content\", \"100%\", 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n### Supported for width (and other sizing properties)\n\n{{Compat}}\n" }, { "property": "offset-rotate", "document": "---\ntitle: offset-rotate\nslug: Web/CSS/offset-rotate\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Reference\n - offset-rotate\n - recipe:css-property\nbrowser-compat: css.properties.offset-rotate\n---\n{{CSSRef}}\n\nThe **`offset-rotate`** CSS property defines the orientation/direction of the element as it is positioned along the {{cssxref(\"offset-path\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/offset-rotate.html\")}}\n\n> **Note:** Early versions of the spec called this property `motion-rotation`.\n\n## Syntax\n\n```css\n/* Follow the path direction, with optional additional angle */\noffset-rotate: auto;\noffset-rotate: auto 45deg;\n\n/* Follow the path direction but facing the opposite direction of `auto` */\noffset-rotate: reverse;\n\n/* Keep a constant rotation regardless the position on the path */\noffset-rotate: 90deg;\noffset-rotate: .5turn;\n\n/* Global values */\noffset-rotate: inherit;\noffset-rotate: initial;\noffset-rotate: revert;\noffset-rotate: revert-layer;\noffset-rotate: unset;\n```\n\n- `auto`\n - : The element is rotated by the angle of the direction of the {{cssxref(\"offset-path\")}}, relative to the positive x-axis. This is the default value.\n- `{{cssxref(\"<angle>\")}}`\n - : The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.\n- `auto `\n - : If `auto` is followed by an {{cssxref(\"<angle>\")}}, the computed value of the angle is added to the computed value of `auto`.\n- `reverse`\n - : The element is rotated similar to `auto`, except it faces the opposite direction. It is the same as specifying a value of `auto 180deg`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting element orientation along its offset path\n\n#### HTML\n\n```html\n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n width: 40px;\n height: 40px;\n background: #2BC4A2;\n margin: 20px;\n clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);\n animation: move 5000ms infinite alternate ease-in-out;\n\n offset-path: path('M20,20 C20,50 180,-10 180,20');\n}\ndiv:nth-child(1) {\n offset-rotate: auto;\n}\ndiv:nth-child(2) {\n offset-rotate: auto 90deg;\n}\ndiv:nth-child(3) {\n offset-rotate: 30deg;\n}\n\n@keyframes move {\n 100% {\n offset-distance: 100%;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_element_orientation_along_its_offset_path', '100%', '200')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset\")}}\n- {{cssxref(\"offset-anchor\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-path\")}}\n- {{cssxref(\"offset-position\")}}\n" }, { "property": "offset-path", "document": "---\ntitle: offset-path\nslug: Web/CSS/offset-path\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Motion Path\n - Reference\n - motion-path\n - offset-path\n - recipe:css-property\nbrowser-compat: css.properties.offset-path\n---\n{{CSSRef}}\n\nThe **`offset-path`** [CSS](/en-US/docs/Web/CSS) property specifies a motion path for an element to follow and defines the element's positioning within the parent container or SVG coordinate system.\n\n{{EmbedInteractiveExample(\"pages/css/offset-path.html\")}}\n\n## Syntax\n\n```css\n/* Default */\noffset-path: none;\n\n/* Function values */\noffset-path: ray(45deg closest-side contain);\n\n/* URL */\noffset-path: url(#path);\n\n/* Shapes */\noffset-path: circle(50% at 25% 25%);\noffset-path: inset(50% 50% 50% 50%);\noffset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);\noffset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');\n\n/* Geometry Boxes */\noffset-path: margin-box;\noffset-path: stroke-box;\n\n/* Global values */\noffset-path: inherit;\noffset-path: initial;\noffset-path: revert;\noffset-path: unset;\n```\n\n### Values\n\n- `ray()`\n - : Taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the CSS gradient angle where `0deg` is up, with positive angles increasing in the clockwise direction, with the size value being similar to the CSS radial gradient size values from `closest-side` to `farthest-corner`, and the keyterm `contain`.\n- `url()`\n - : References the ID of an SVG shape -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect` -- using the shape's geometry as the path.\n- ``\n\n - : Specifies a [CSS shape](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes) including `circle()`, `ellipse()`, `inset()`, `polygon()`, or `path()`.\n\n - {{cssxref(\"path\",\"path()\")}}\n - : A path string defined with SVG coordinate syntax.\n\n- `none`\n - : Specifies no motion path at all.\n\n## Description\n\nThis property defines a path an animated element can follow. An offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. The element's exact position on the offset path is determined by the {{cssxref(\"offset-distance\")}} property. Each shape or path must define an initial position for the computed value of `0` for {{cssxref(\"offset-distance\")}} and an initial direction which specifies the rotation of the object to the initial position.\n\nEarly versions of the spec called this property `motion-path`. It was changed to `offset-path` because the property describes static positions, not motion.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Animating an element with offset-path\n\nThe `offset-path` properties in the CSS code sample defines a motion path that is identical to the `` element in the SVG. The path, as can be seen in the rendering of the SVG code, is a line drawing of a house with a chimney.\n\n#### SVG\n\nThe top and bottom halves of the scissors would appear in the top left of the canvas were they not positioned along the starting point of the motion path defined by `offset-path`.\n\n```html\n\n House and Scissors\n \n \n \n \n \n \n\n```\n\n#### CSS\n\n```css\n.scissorHalf {\n offset-path: path('M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190');\n animation: followpath 4s linear infinite;\n}\n\n@keyframes followpath {\n to {\n motion-offset: 100%;\n offset-distance: 100%;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Animating_an_element_with_offset-path', '100%', '450')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-rotate\")}}\n- [SVG \\](/en-US/docs/Web/SVG/Tutorial/Paths)\n- {{cssxref(\"path\",\"path()\")}}\n\nOther demos:\n\n- [Examples of the various values](https://codepen.io/team/css-tricks/pen/WZdKMq)\n- [Triangle](https://codepen.io/ericwilligers/pen/jrbJPp)\n- [Scissors](https://codepen.io/ericwilligers/pen/bwVkNa)\n- [Eyes](https://jsfiddle.net/ericwilligers/r1snqdan/)\n" }, { "property": "opacity", "document": "---\ntitle: opacity\nslug: Web/CSS/opacity\ntags:\n - CSS\n - CSS Property\n - Opacity\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.opacity\n---\n{{CSSRef}}\n\nThe **`opacity`** CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.\n\n{{EmbedInteractiveExample(\"pages/css/opacity.html\")}}\n\n## Syntax\n\n```css\nopacity: 0.9\nopacity: 90%\n\n/* Global values */\nopacity: inherit;\nopacity: initial;\nopacity: revert;\nopacity: revert-layer;\nopacity: unset;\n```\n\n### Values\n\n- ``\n\n - : A {{cssxref(\"number\")}} in the range `0.0` to `1.0`, inclusive, or a {{cssxref(\"percentage\")}} in the range `0%` to `100%`, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range.\n\n | Value | Meaning |\n | ------------------------------------------------------------- | ----------------------------------------------------------------------------- |\n | `0` | The element is fully transparent (that is, invisible). |\n | Any {{cssxref(\"number\")}} strictly between `0` and `1` | The element is translucent (that is, content behind the element can be seen). |\n | `1` (default value) | The element is fully opaque (visually solid). |\n\n## Description\n\n`opacity` applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, the element and its children all have the same opacity relative to the element's background, even if they have different opacities relative to one another.\n\nUsing `opacity` with a value other than `1` places the element in a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).\n\nTo change the opacity of a background only, use the {{cssxref(\"background\")}} property with a {{cssxref(\"color_value\", \"color value\")}} that allows for an alpha channel. For example:\n\n```css\nbackground: rgba(0, 0, 0, 0.4);\n```\n\n## Accessibility concerns\n\nIf text opacity is adjusted, it is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.\n\nColor contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](/en-US/docs/Web/CSS/font-weight) or larger, or 24px or larger.\n\n- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting opacity\n\nThe following example demonstrates how the `opacity` property changes the opacity of the entire element and content, thus making the text very hard to read.\n\n#### HTML\n\n```html\n
      You can barely see this.
      \n
      This is easier to see.
      \n
      This is very easy to see.
      \n```\n\n#### CSS\n\n```css\ndiv { background-color: yellow; font-weight: bold; font-size: 130%; }\n.light {\n opacity: 0.2; /* Barely see the text over the background */\n}\n.medium {\n opacity: 0.5; /* See the text more clearly over the background */\n}\n.heavy {\n opacity: 0.9; /* See the text very clearly over the background */\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_opacity', '640', '105')}}\n\n### Setting opacity on hover\n\nIn the following example opacity is changed on hover, so the striped background image on the parent element shows through the image.\n\n#### HTML\n\n```html\n
      \n \"MDN\n
      \n```\n\n#### CSS\n\n```css\nimg.opacity {\n opacity: 1;\n}\n\nimg.opacity:hover {\n opacity: 0.5;\n}\n\n.wrapper {\n width: 200px;\n height: 160px;\n background-color: #f03cc3;\n background-image: linear-gradient(90deg, transparent 50%,\n rgba(255,255,255,.5) 50%);\n background-size: 20px 20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_opacity_on_hover', '150', '200')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n" }, { "property": "order", "document": "---\ntitle: order\nslug: Web/CSS/order\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.order\n---\n{{CSSRef}}\n\nThe **`order`** [CSS](/en-US/docs/Web/CSS) property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order.\n\n{{EmbedInteractiveExample(\"pages/css/order.html\")}}\n\n## Syntax\n\n```css\n/* values */\norder: 5;\norder: -5;\n\n/* Global values */\norder: inherit;\norder: initial;\norder: revert;\norder: revert-layer;\norder: unset;\n```\n\nSince `order` is only meant to affect the _visual order_ of elements and not their logical or tab order. `order` must not be used on non-visual media such as [speech](/en-US/docs/Web/CSS/@media#speech).\n\n### Values\n\n- {{cssxref(\"<integer>\")}}\n - : Represents the ordinal group to be used by the item.\n\n## Accessibility concerns\n\nUsing the `order` property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.\n\n- [Flexbox & the keyboard navigation disconnect — Tink](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)\n- [Source Order Matters | Adrian Roselli](https://adrianroselli.com/2015/09/source-order-matters.html)\n- [MDN Understanding WCAG, Guideline 1.3 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_%e2%80%94_create_content_that_can_be_presented_in_different_ways)\n- [Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-sequence.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Ordering items in a flex container\n\nThis example uses CSS to create a classic two-sidebar layout surrounding a content block. The Flexible Box Layout Module automatically creates blocks of equal vertical size and uses as much horizontal space as available.\n\n#### HTML\n\n```html\n
      ...
      \n
      \n
      Article
      \n \n \n
      \n
      ...
      \n```\n\n#### CSS\n\n```css\nmain { display: flex; text-align:center; }\nmain > article { flex:1; order: 2; }\nmain > nav { width: 200px; order: 1; }\nmain > aside { width: 200px; order: 3; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Ordering_items_in_a_flex_container') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Ordering flex items](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items)_\n- CSS Grid Guide: _[CSS Grid Layout and accessibility](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)_\n" }, { "property": "outline-color", "document": "---\ntitle: outline-color\nslug: Web/CSS/outline-color\ntags:\n - CSS\n - CSS Outline\n - CSS Property\n - CSS User Interface\n - HTML Colors\n - HTML Styles\n - Outline\n - Reference\n - Styles\n - Styling HTML\n - outline-color\n - recipe:css-property\nbrowser-compat: css.properties.outline-color\n---\n{{CSSRef}}\n\nThe **`outline-color`** CSS property sets the color of an element's outline.\n\n{{EmbedInteractiveExample(\"pages/css/outline-color.html\")}}\n\n## Syntax\n\n```css\n/* values */\noutline-color: #f92525;\noutline-color: rgb(30,222,121);\noutline-color: blue;\n\n/* Keyword value */\noutline-color: invert;\n\n/* Global values */\noutline-color: inherit;\noutline-color: initial;\noutline-color: revert;\noutline-color: revert-layer;\noutline-color: unset;\n```\n\nThe `outline-color` property is specified as any one of the values listed below.\n\n### Values\n\n- {{cssxref(\"<color>\")}}\n - : The color of the outline, specified as a ``.\n- `invert`\n - : To ensure the outline is visible, performs a color inversion of the background. Note that browsers are not required to support this value; if they don't, this keyword is considered invalid.\n\n## Description\n\nAn outline is a line that is drawn around an element, outside the {{cssxref(\"border\")}}. Unlike the element's border, the outline is drawn outside the element's frame, and may overlap other content. The border, on the other hand, will actually alter the page's layout to ensure that it fits without overlapping anything else (unless you explicitly set it to overlap).\n\nIt is often more convenient to use the shorthand property {{cssxref(\"outline\")}} when defining the appearance of an outline.\n\n## Accessibility concerns\n\nCustom [focus styles](/en-US/docs/Web/CSS/:focus) commonly involve making adjustments to the {{cssxref(\"outline\")}} property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.\n\nColor contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and [bold](/en-US/docs/Web/CSS/font-weight) or larger, or 24px or larger.\n\n- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a solid blue outline\n\n#### HTML\n\n```html\n

      My outline is blue, as you can see.

      \n```\n\n#### CSS\n\n```css\np {\n outline: 2px solid; /* Set the outline width and style */\n outline-color: #0000FF; /* Make the outline blue */\n margin: 5px;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"outline\")}}\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-style\")}}\n- {{cssxref(\"outline-width\")}}\n- The {{cssxref(\"<color>\")}} data type\n- Other color-related properties: {{cssxref(\"color\")}}, {{cssxref(\"background-color\")}}, {{cssxref(\"border-color\")}}, {{cssxref(\"text-decoration-color\")}}, {{cssxref(\"text-emphasis-color\")}}, {{cssxref(\"text-shadow\")}}, {{cssxref(\"caret-color\")}}, and {{cssxref(\"column-rule-color\")}}\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n" }, { "property": "outline-offset", "document": "---\ntitle: outline-offset\nslug: Web/CSS/outline-offset\ntags:\n - CSS\n - CSS Outline\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.outline-offset\n---\n{{CSSRef}}\n\nThe **`outline-offset`** CSS property sets the amount of space between an [outline](/en-US/docs/Web/CSS/outline) and the edge or border of an element.\n\n{{EmbedInteractiveExample(\"pages/css/outline-offset.html\")}}\n\n## Syntax\n\n```css\n/* values */\noutline-offset: 3px;\noutline-offset: 0.2em;\n\n/* Global values */\noutline-offset: inherit;\noutline-offset: initial;\noutline-offset: revert;\noutline-offset: revert-layer;\noutline-offset: unset;\n```\n\n### Values\n\n- `{{cssxref(\"<length>\")}}`\n - : The width of the space between the element and its outline. A negative value places the outline inside the element. A value of `0` places the outline so that there is no space between it and the element.\n\n## Description\n\nAn outline is a line that is drawn around an element, outside the border edge. The space between an element and its outline is transparent. In other words, it is the same as the parent element's background.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting outline offset in pixels\n\n#### HTML\n\n```html\n

      Gallia est omnis divisa in partes tres.

      \n```\n\n#### CSS\n\n```css\np {\n outline: 1px dashed red;\n outline-offset: 10px;\n background: yellow;\n border: 1px solid blue;\n margin: 15px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_outline_offset_in_pixels')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"outline\")}}\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-style\")}}\n- {{cssxref(\"outline-width\")}}\n" }, { "property": "outline-style", "document": "---\ntitle: outline-style\nslug: Web/CSS/outline-style\ntags:\n - CSS\n - CSS Outline\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.outline-style\n---\n{{CSSRef}}\n\nThe **`outline-style`** [CSS](/en-US/docs/Web/CSS) property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the {{cssxref(\"border\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/outline-style.html\")}}\n\nIt is often more convenient to use the shorthand property {{cssxref(\"outline\")}} when defining the appearance of an outline.\n\n## Syntax\n\n```css\n/* Keyword values */\noutline-style: auto;\noutline-style: none;\noutline-style: dotted;\noutline-style: dashed;\noutline-style: solid;\noutline-style: double;\noutline-style: groove;\noutline-style: ridge;\noutline-style: inset;\noutline-style: outset;\n\n/* Global values */\noutline-style: inherit;\noutline-style: initial;\noutline-style: revert;\noutline-style: revert-layer;\noutline-style: unset;\n```\n\nThe `outline-style` property is specified as any one of the values listed below.\n\n### Values\n\n- `auto`\n - : Permits the user agent to render a custom outline style.\n- `none`\n - : No outline is used. The {{cssxref(\"outline-width\")}} is `0`.\n- `dotted`\n - : The outline is a series of dots.\n- `dashed`\n - : The outline is a series of short line segments.\n- `solid`\n - : The outline is a single line.\n- `double`\n - : The outline is two single lines. The {{cssxref(\"outline-width\")}} is the sum of the two lines and the space between them.\n- `groove`\n - : The outline looks as though it were carved into the page.\n- `ridge`\n - : The opposite of `groove`: the outline looks as though it were extruded from the page.\n- `inset`\n - : The outline makes the box look as though it were embedded in the page.\n- `outset`\n - : The opposite of `inset`: the outline makes the box look as though it were coming out of the page.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting outline style to auto\n\nThe `auto` value indicates a custom outline style, described in [the specification](https://www.w3.org/TR/css-ui-3/#outline-style) as \"typically a style \\[that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in CSS, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow\".\n\n#### HTML\n\n```html\n
      \n

      Outline Demo

      \n
      \n```\n\n#### CSS\n\n```css\n.auto {\n outline-style: auto; /* same result as \"outline: auto\" */\n}\n\n/* To make the Demo clearer */\n* { outline-width: 10px; padding: 15px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_outline_style_to_auto') }}\n\n### Setting outline style to dashed and dotted\n\n#### HTML\n\n```html\n
      \n
      \n

      Outline Demo

      \n
      \n
      \n```\n\n#### CSS\n\n```css\n.dotted {\n outline-style: dotted; /* same result as \"outline: dotted\" */\n}\n.dashed {\n outline-style: dashed;\n}\n\n/* To make the Demo clearer */\n* { outline-width: 10px; padding: 15px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_outline_style_to_dashed_and_dotted') }}\n\n### Setting outline style to solid and double\n\n#### HTML\n\n```html\n
      \n
      \n

      Outline Demo

      \n
      \n
      \n```\n\n#### CSS\n\n```css\n.solid {\n outline-style: solid;\n}\n.double {\n outline-style: double;\n}\n\n/* To make the Demo clearer */\n* { outline-width: 10px; padding: 15px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_outline_style_to_solid_and_double') }}\n\n### Setting outline style to groove and ridge\n\n#### HTML\n\n```html\n
      \n
      \n

      Outline Demo

      \n
      \n
      \n```\n\n#### CSS\n\n```css\n.groove {\n outline-style: groove;\n}\n.ridge {\n outline-style: ridge;\n}\n\n/* To make the Demo clearer */\n* { outline-width: 10px; padding: 15px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_outline_style_to_groove_and_ridge') }}\n\n### Setting outline style to inset and outset\n\n#### HTML\n\n```html\n
      \n
      \n

      Outline Demo

      \n
      \n
      \n```\n\n#### CSS\n\n```css\n.inset {\n outline-style: inset;\n}\n.outset {\n outline-style: outset;\n}\n\n/* To make the Demo clearer */\n* { outline-width: 10px; padding: 15px; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Setting_outline_style_to_inset_and_outset') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"outline\")}}\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-width\")}}\n" }, { "property": "outline-width", "document": "---\ntitle: outline-width\nslug: Web/CSS/outline-width\ntags:\n - CSS\n - CSS Outline\n - CSS Property\n - Layout\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.outline-width\n---\n{{CSSRef}}\n\nThe [CSS](/en-US/docs/Web/CSS) **`outline-width`** property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the {{cssxref(\"border\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/outline-width.html\")}}\n\nIt is often more convenient to use the shorthand property {{cssxref(\"outline\")}} when defining the appearance of an outline.\n\n## Syntax\n\n```css\n/* Keyword values */\noutline-width: thin;\noutline-width: medium;\noutline-width: thick;\n\n/* values */\noutline-width: 1px;\noutline-width: 0.1em;\n\n/* Global values */\noutline-width: inherit;\noutline-width: initial;\noutline-width: revert;\noutline-width: revert-layer;\noutline-width: unset;\n```\n\nThe `outline-width` property is specified as any one of the values listed below.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The width of the outline specified as a ``.\n- `thin`\n - : Depends on the user agent. Typically equivalent to `1px` in desktop browsers (including Firefox).\n- `medium`\n - : Depends on the user agent. Typically equivalent to `3px` in desktop browsers (including Firefox).\n- `thick`\n - : Depends on the user agent. Typically equivalent to `5px` in desktop browsers (including Firefox).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting an element's outline width\n\n#### HTML\n\n```html\nthin\nmedium\nthick\n2px\n1ex\n1.2em\n```\n\n#### CSS\n\n```css\nspan {\n outline-style: solid;\n display: inline-block;\n margin: 20px;\n}\n\n#thin {\n outline-width: thin;\n}\n\n#medium {\n outline-width: medium;\n}\n\n#thick {\n outline-width: thick;\n}\n\n#twopixels {\n outline-width: 2px;\n}\n\n#oneex {\n outline-width: 1ex;\n}\n\n#em {\n outline-width: 1.2em;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"outline\")}}\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-style\")}}\n" }, { "property": "outline", "document": "---\ntitle: outline\nslug: Web/CSS/outline\ntags:\n - CSS\n - CSS Outline\n - CSS Property\n - Layout\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.outline\n---\n{{CSSRef}}\n\nThe **`outline`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets most of the outline properties in a single declaration.\n\n{{EmbedInteractiveExample(\"pages/css/outline.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-style\")}}\n- {{cssxref(\"outline-width\")}}\n\n## Syntax\n\n```css\n/* style */\noutline: solid;\n\n/* color | style */\noutline: #f66 dashed;\n\n/* style | width */\noutline: inset thick;\n\n/* color | style | width */\noutline: green solid 3px;\n\n/* Global values */\noutline: inherit;\noutline: initial;\noutline: revert;\noutline: revert-layer;\noutline: unset;\n```\n\nThe `outline` property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/initial_value).\n\n> **Note:** The outline will be invisible for many elements if its style is not defined. This is because the style defaults to `none`. A notable exception is `input` elements, which are given default styling by browsers.\n\n### Values\n\n- `<'outline-color'>`\n - : Sets the color of the outline. Defaults to `invert` for browsers supporting it, `currentcolor` for the others. See {{cssxref(\"outline-color\")}}.\n- `<'outline-style'>`\n - : Sets the style of the outline. Defaults to `none` if absent. See {{cssxref(\"outline-style\")}}.\n- `<'outline-width'>`\n - : Sets the thickness of the outline. Defaults to `medium` if absent. See {{cssxref(\"outline-width\")}}.\n\n## Description\n\nOutline is a line outside of the element's [border](/en-US/docs/Web/CSS/border). Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.\n\nThere are a few properties that affect an outline's appearance. It is possible to change the style, color, and width using the `outline` property, the distance from the border using the {{cssxref(\"outline-offset\")}} property, and corner angles using the {{cssxref(\"border-radius\")}} property.\n\nAn outline is not required to be rectangular: While dealing with multiline text, some browsers will draw an outline for each line box separately, while others will wrap the whole text with a single outline.\n\n## Accessibility concerns\n\nAssigning `outline` a value of `0` or `none` will remove the browser's default focus style. If an element can be interacted with it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed.\n\n- [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)\n- WCAG 2.1: [Understanding Success Criterion 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Using outline to set a focus style\n\n#### HTML\n\n```html\nThis link has a special focus style.\n```\n\n#### CSS\n\n```css\na {\n border: 1px solid;\n border-radius: 3px;\n display: inline-block;\n margin: 10px;\n padding: 5px;\n}\n\na:focus {\n outline: 4px dotted #e73;\n outline-offset: 4px;\n background: #ffa;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_outline_to_set_a_focus_style\", \"100%\", 85)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"outline-color\")}}\n- {{cssxref(\"outline-style\")}}\n- {{cssxref(\"outline-width\")}}\n" }, { "property": "overflow-anchor", "document": "---\ntitle: overflow-anchor\nslug: Web/CSS/overflow-anchor\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Anchoring\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-anchor\n---\n{{CSSRef}}\n\nThe **`overflow-anchor`** [CSS](/en-US/docs/Web/CSS) property provides a way to opt out of the browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.\n\nScroll anchoring behavior is enabled by default in any browser that supports it. Therefore, changing the value of this property is typically only required if you are experiencing problems with scroll anchoring in a document or part of a document and need to turn the behavior off.\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-anchor: auto;\noverflow-anchor: none;\n\n/* Global values */\noverflow-anchor: inherit;\noverflow-anchor: initial;\noverflow-anchor: revert;\noverflow-anchor: revert-layer;\noverflow-anchor: unset;\n```\n\n### Values\n\n- `auto`\n - : The element becomes a potential anchor when adjusting scroll position.\n- `none`\n - : The element won't be selected as a potential anchor.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Prevent scroll anchoring\n\nTo prevent scroll anchoring in a document, use the `overflow-anchor` property.\n\n```css\n* {\n overflow-anchor: none;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Guide to scroll anchoring](/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring)\n" }, { "property": "overflow-block", "document": "---\ntitle: overflow-block\nslug: Web/CSS/overflow-block\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-block\n---\n{{CSSRef}}\n\nThe **`overflow-block`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.\n\n> **Note:** The `overflow-block` property maps to {{Cssxref(\"overflow-y\")}} or {{Cssxref(\"overflow-x\")}} depending on the writing mode of the document.\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-block: visible;\noverflow-block: hidden;\noverflow-block: scroll;\noverflow-block: auto;\n\n/* Global values */\noverflow-block: inherit;\noverflow-block: initial;\noverflow-block: revert;\noverflow-block: revert-layer;\noverflow-block: unset;\n```\n\nThe `overflow-block` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `visible`\n - : Content is not clipped and may be rendered outside the padding box's block start and block end edges.\n- `hidden`\n - : Content is clipped if necessary to fit the block dimension in the padding box. No scrollbars are provided.\n- `scroll`\n - : Content is clipped if necessary to fit in the block dimension in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.\n- `auto`\n - : Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
        \n
      • overflow-block:hidden — hides the text outside the box\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-block:scroll — always adds a scrollbar\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-block:visible — displays the text outside the box if needed\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-block:auto — on most browser, equivalent to scroll\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n
      \n```\n\n### CSS\n\n```css\n#div1,\n#div2,\n#div3,\n#div4 {\n border: 1px solid black;\n width: 250px;\n height: 100px;\n}\n\n#div1 { overflow-block: hidden; margin-bottom: 120px;}\n#div2 { overflow-block: scroll; margin-bottom: 120px;}\n#div3 { overflow-block: visible; margin-bottom: 120px;}\n#div4 { overflow-block: auto; margin-bottom: 120px;}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", \"780\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow\")}}, {{Cssxref(\"overflow-inline\")}}, {{Cssxref(\"overflow-x\")}}, {{Cssxref(\"overflow-y\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n- [CSS Logical Properties](/en-US/docs/Web/CSS/CSS_Logical_Properties)\n- [Writing Modes](/en-US/docs/Web/CSS/CSS_Writing_Modes)\n" }, { "property": "overflow-clip-margin", "document": "---\ntitle: overflow-clip-margin\nslug: Web/CSS/overflow-clip-margin\ntags:\n - CSS\n - CSS Overflow\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-clip-margin\n---\n{{CSSRef}}\n\nThe **`overflow-clip-margin`** [CSS](/en-US/docs/Web/CSS) property determines how far outside its bounds an element with [`overflow: clip`](/en-US/docs/Web/CSS/overflow) may be painted before being clipped.\n\n## Syntax\n\n```css\noverflow-clip-margin: 20px;\noverflow-clip-margin: 1em;\n\n/* Global values */\noverflow-clip-margin: inherit;\noverflow-clip-margin: initial;\noverflow-clip-margin: revert;\noverflow-clip-margin: revert-layer;\noverflow-clip-margin: unset;\n```\n\nThe `overflow-clip-margin` property is specified as a length, negative values are not allowed.\n\n> **Note:** If the element does not have `overflow: clip` then this property will be ignored.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
      \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
      \n```\n\n### CSS\n\n```css\n.box {\n border: 3px solid black;\n width: 250px;\n height: 100px;\n overflow: clip;\n overflow-clip-margin: 20px;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", \"280\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow\")}}, {{Cssxref(\"overflow-inline\")}}, {{Cssxref(\"overflow-x\")}}, {{Cssxref(\"overflow-y\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n" }, { "property": "overflow-inline", "document": "---\ntitle: overflow-inline\nslug: Web/CSS/overflow-inline\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-inline\n---\n{{CSSRef}}\n\nThe **`overflow-inline`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows the inline start and end edges of a box. This may be nothing, a scroll bar, or the overflow content.\n\n> **Note:** The `overflow-inline` property maps to {{Cssxref(\"overflow-y\")}} or {{Cssxref(\"overflow-x\")}} depending on the writing mode of the document.\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-inline: visible;\noverflow-inline: hidden;\noverflow-inline: scroll;\noverflow-inline: auto;\n\n/* Global values */\noverflow-inline: inherit;\noverflow-inline: initial;\noverflow-inline: revert;\noverflow-inline: revert-layer;\noverflow-inline: unset;\n```\n\nThe `overflow-inline` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `visible`\n - : Content is not clipped and may be rendered outside the padding box's inline start and end edges.\n- `hidden`\n - : Content is clipped if necessary to fit the inline dimension in the padding box. No scrollbars are provided.\n- `scroll`\n - : Content is clipped if necessary to fit in the padding box in the inline dimension. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.\n- `auto`\n - : Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline overflow behavior\n\n#### HTML\n\n```html\n
        \n
      • overflow-inline:hidden — hides the text outside the box\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-inline:scroll — always adds a scrollbar\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-inline:visible — displays the text outside the box if needed\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-inline:auto — on most browsers, equivalent to scroll\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n
      \n```\n\n#### CSS\n\n```css\n#div1, #div2, #div3, #div4 {\n border: 1px solid black;\n width: 250px;\n margin-bottom: 12px;\n}\n\n#div1 { overflow-inline: hidden;}\n#div2 { overflow-inline: scroll;}\n#div3 { overflow-inline: visible;}\n#div4 { overflow-inline: auto;}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_overflow_behavior\", \"100%\", \"270\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow\")}}, {{Cssxref(\"overflow-block\")}}, {{Cssxref(\"overflow-x\")}}, {{Cssxref(\"overflow-y\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n- [CSS Logical Properties](/en-US/docs/Web/CSS/CSS_Logical_Properties)\n- [Writing Modes](/en-US/docs/Web/CSS/CSS_Writing_Modes)\n" }, { "property": "overflow-wrap", "document": "---\ntitle: overflow-wrap\nslug: Web/CSS/overflow-wrap\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-wrap\n---\n{{CSSRef}}\n\nThe **`overflow-wrap`** [CSS](/en-US/docs/Web/CSS) property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.\n\n{{EmbedInteractiveExample(\"pages/css/overflow-wrap.html\")}}\n\n> **Note:** In contrast to {{cssxref(\"word-break\")}}, `overflow-wrap` will only create a break if an entire word cannot be placed on its own line without overflowing.\n\nThe property was originally a nonstandard and unprefixed Microsoft extension called `word-wrap`, and was implemented by most browsers with the same name. It has since been renamed to `overflow-wrap`, with `word-wrap` being an alias.\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-wrap: normal;\noverflow-wrap: break-word;\noverflow-wrap: anywhere;\n\n/* Global values */\noverflow-wrap: inherit;\noverflow-wrap: initial;\noverflow-wrap: revert;\noverflow-wrap: revert-layer;\noverflow-wrap: unset;\n```\n\nThe `overflow-wrap` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `normal`\n - : Lines may only break at normal word break points (such as a space between two words).\n- `anywhere`\n - : To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.\n- `break-word`\n - : The same as the `anywhere` value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Comparing overflow-wrap, word-break, and hyphens\n\nThis example compares the results of `overflow-wrap`, `word-break`, and `hyphens` when breaking up a long word.\n\n#### HTML\n\n```html\n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (normal)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (overflow-wrap: anywhere)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (overflow-wrap: break-word)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (word-break)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (hyphens, without lang attribute)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (hyphens, English rules)

      \n

      They say the fishing is excellent at\n Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,\n though I've never been there myself. (hyphens, German rules)

      \n```\n\n#### CSS\n\n```css\np {\n width: 13em;\n margin: 2px;\n background: gold;\n}\n\n.ow-anywhere {\n overflow-wrap: anywhere;\n}\n\n.ow-break-word {\n overflow-wrap: break-word;\n}\n\n.word-break {\n word-break: break-all;\n}\n\n.hyphens {\n hyphens: auto;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"word-break\")}}\n- {{cssxref(\"hyphens\")}}\n- {{cssxref(\"text-overflow\")}}\n- [Guide to wrapping and breaking text](/en-US/docs/Web/CSS/CSS_Text/Wrapping_text)\n" }, { "property": "overflow-x", "document": "---\ntitle: overflow-x\nslug: Web/CSS/overflow-x\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-x\n---\n{{CSSRef}}\n\nThe **`overflow-x`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n{{EmbedInteractiveExample(\"pages/css/overflow-x.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-x: visible;\noverflow-x: hidden;\noverflow-x: clip;\noverflow-x: scroll;\noverflow-x: auto;\n\n/* Global values */\noverflow-x: inherit;\noverflow-x: initial;\noverflow-x: revert;\noverflow-x: revert-layer;\noverflow-x: unset;\n```\n\nThe `overflow-x` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `visible`\n - : Content is not clipped and may be rendered outside the padding box's left and right edges. If {{cssxref(\"overflow-y\")}} is `hidden`, `scroll` or `auto` and this property is `visible`, it will implicitly compute to `auto`.\n- `hidden`\n - : Content is clipped if necessary to fit horizontally in the padding box. No scrollbars are provided.\n- `clip` {{experimental_inline}}\n - : Like for `hidden`, the content is clipped to the element's padding box. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use {{cssxref(\"display\", \"display: flow-root\", \"#flow-root\")}} to do so.\n- `scroll`\n - : Content is clipped if necessary to fit horizontally in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.\n- `auto`\n - : Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n
        \n
      • overflow-x:hidden — hides the text outside the box\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-x:scroll — always adds a scrollbar\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-x:visible — displays the text outside the box if needed\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n\n
      • overflow-x:auto — on most browsers, equivalent to scroll\n
        \n ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ\n
        \n
        • \n
      \n```\n\n### CSS\n\n```css\n#div1, #div2, #div3, #div4 {\n border: 1px solid black;\n width: 250px;\n margin-bottom: 12px;\n}\n\n#div1 { overflow-x: hidden;}\n#div2 { overflow-x: scroll;}\n#div3 { overflow-x: visible;}\n#div4 { overflow-x: auto;}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", \"270\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow\")}}, {{Cssxref(\"overflow-y\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n" }, { "property": "offset-position", "document": "---\ntitle: offset-position\nslug: Web/CSS/offset-position\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Experimental\n - Property\n - offset-position\n - recipe:css-property\nbrowser-compat: css.properties.offset-position\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`offset-position`** CSS property defines the [initial position](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) of the {{cssxref(\"offset-path\")}}.\n\n## Syntax\n\n```css\n/* Keyword values */\noffset-position: auto;\noffset-position: top;\noffset-position: bottom;\noffset-position: left;\noffset-position: right;\noffset-position: center;\n\n/* values */\noffset-position: 25% 75%;\n\n/* values */\noffset-position: 0 0;\noffset-position: 1cm 2cm;\noffset-position: 10ch 8em;\n\n/* Edge offsets values */\noffset-position: bottom 10px right 20px;\noffset-position: right 3em bottom 10px;\noffset-position: bottom 10px right;\noffset-position: top right 10px;\n\n/* Global values */\noffset-position: inherit;\noffset-position: initial;\noffset-position: revert;\noffset-position: revert-layer;\noffset-position: unset;\n```\n\n### Values\n\n- `auto`\n - : The initial position is the position of the box specified by the {{cssxref(\"position\")}} property.\n- ``\n - : A {{cssxref(\"<position>\")}}. A position defines an x/y coordinate, to place an item relative to the edges of an element's box. It can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be `center`. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). For more explanation of these value types, see {{cssxref(\"background-position\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting initial offset position\n\n```html\n
      \n```\n\n```css\n#motion-demo {\n offset-path: path('M20,20 C20,100 200,0 200,100');\n offset-position: left top;\n animation: move 3000ms infinite alternate ease-in-out;\n width: 40px;\n height: 40px;\n background: cyan;\n}\n\n@keyframes move {\n 0% {\n offset-distance: 0%;\n }\n 100% {\n offset-distance: 100%;\n }\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset\")}}\n- {{cssxref(\"offset-anchor\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-path\")}}\n- {{cssxref(\"offset-rotate\")}}\n" }, { "property": "offset", "document": "---\ntitle: offset\nslug: Web/CSS/offset\ntags:\n - CSS\n - CSS Motion Path\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.offset\n---\n{{CSSRef}}\n\nThe **`offset`** CSS [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all the properties required for animating an element along a defined path.\n\n> **Note:** Early versions of the spec called this property `motion`.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"offset-anchor\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-path\")}}\n- {{cssxref(\"offset-position\")}}\n- {{cssxref(\"offset-rotate\")}}\n\n## Syntax\n\n```css\n/* Offset position */\noffset: auto;\noffset: 10px 30px;\noffset: none;\n\n/* Offset path */\noffset: ray(45deg closest-side);\noffset: path('M 100 100 L 300 100 L 200 300 z');\noffset: url(arc.svg);\n\n/* Offset path with distance and/or rotation */\noffset: url(circle.svg) 100px;\noffset: url(circle.svg) 40%;\noffset: url(circle.svg) 30deg;\noffset: url(circle.svg) 50px 20deg;\n\n/* Including offset anchor */\noffset: ray(45deg closest-side) / 40px 20px;\noffset: url(arc.svg) 2cm / 0.5cm 3cm;\noffset: url(arc.svg) 30deg / 50px 100px;\n\n/* Global values */\noffset: inherit;\noffset: initial;\noffset: revert;\noffset: revert-layer;\noffset: unset;\n```\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Animating an element along a path\n\n#### HTML\n\n```html\n
      \n```\n\n#### CSS\n\n```css\n@keyframes move {\n from {\n offset-distance: 0%;\n }\n\n to {\n offset-distance: 100%;\n }\n}\n\n#offsetElement {\n width: 50px;\n height: 50px;\n background-color: blue;\n offset: path(\"M 100 100 L 300 100 L 200 300 z\") auto;\n animation: move 3s linear infinite;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Animating_an_element_along_a_path\", 350, 350)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"offset-anchor\")}}\n- {{cssxref(\"offset-distance\")}}\n- {{cssxref(\"offset-path\")}}\n- {{cssxref(\"offset-position\")}}\n- {{cssxref(\"offset-rotate\")}}\n" }, { "property": "orphans", "document": "---\ntitle: orphans\nslug: Web/CSS/orphans\ntags:\n - CSS\n - CSS Fragmentation\n - CSS Multi-column Layout\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.orphans\n---\n{{CSSRef}}\n\nThe **`orphans`** [CSS](/en-US/docs/Web/CSS) property sets the minimum number of lines in a block container that must be shown at the _bottom_ of a [page](/en-US/docs/Web/CSS/Paged_Media), region, or [column](/en-US/docs/Web/CSS/CSS_Columns).\n\n```css\n/* values */\norphans: 2;\norphans: 3;\n\n/* Global values */\norphans: inherit;\norphans: initial;\norphans: revert;\norphans: revert-layer;\norphans: unset;\n```\n\nIn typography, an _orphan_ is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)\n\n## Syntax\n\n### Values\n\n- {{cssxref(\"<integer>\")}}\n - : The minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. The value must be positive.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a minimum orphan size of three lines\n\n#### HTML\n\n```html\n
      \n

      This is the first paragraph containing some text.

      \n

      This is the second paragraph containing some more text than the first one. It is used to demonstrate how orphans work.

      \n

      This is the third paragraph. It has a little bit more text than the first one.

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: #8cffa0;\n height: 150px;\n columns: 3;\n orphans: 3;\n}\n\np {\n background-color: #8ca0ff;\n}\n\np:first-child {\n margin-top: 0;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_a_minimum_orphan_size_of_three_lines\", 380, 150)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"widows\")}}\n- [Paged media](/en-US/docs/Web/CSS/Paged_Media)\n" }, { "property": "overflow-y", "document": "---\ntitle: overflow-y\nslug: Web/CSS/overflow-y\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.overflow-y\n---\n{{CSSRef}}\n\nThe **`overflow-y`** [CSS](/en-US/docs/Web/CSS) property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n{{EmbedInteractiveExample(\"pages/css/overflow-y.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow-y: visible;\noverflow-y: hidden;\noverflow-y: clip;\noverflow-y: scroll;\noverflow-y: auto;\n\n/* Global values */\noverflow-y: inherit;\noverflow-y: initial;\noverflow-y: revert;\noverflow-y: revert-layer;\noverflow-y: unset;\n```\n\nThe `overflow-y` property is specified as a single keyword chosen from the list of values below.\n\nIf {{cssxref(\"overflow-x\")}} is `hidden`, `scroll` or `auto` and this property is `visible` (default) it will implicitly compute to `auto`.\n\n### Values\n\n- `visible`\n - : Content is not clipped and may be rendered outside the padding box's top and bottom edges.\n- `hidden`\n - : Content is clipped if necessary to fit vertically in the padding box. No scrollbars are provided.\n- `clip` {{experimental_inline}}\n - : Like for `hidden`, the content is clipped to the element's padding box. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use {{cssxref(\"display\", \"display: flow-root\", \"#flow-root\")}} to do so.\n- `scroll`\n - : Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.\n- `auto`\n - : Depends on the user agent. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting overflow-y behavior\n\n#### HTML\n\n```html\n
        \n
      • overflow-y:hidden — hides the text outside the box\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-y:scroll — always adds a scrollbar\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-y:visible — displays the text outside the box if needed\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n\n
      • overflow-y:auto — on most browser, equivalent to scroll\n
        \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n
        \n
        • \n
      \n```\n\n#### CSS\n\n```css\n#div1,\n#div2,\n#div3,\n#div4 {\n border: 1px solid black;\n width: 250px;\n height: 100px;\n}\n\n#div1 { overflow-y: hidden; margin-bottom: 12px;}\n#div2 { overflow-y: scroll; margin-bottom: 12px;}\n#div3 { overflow-y: visible; margin-bottom: 120px;}\n#div4 { overflow-y: auto; margin-bottom: 120px;}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_overflow-y_behavior\", \"100%\", \"780\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow\")}}, {{Cssxref(\"overflow-x\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n" }, { "property": "overflow", "document": "---\ntitle: overflow\nslug: Web/CSS/overflow\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Clipping\n - Layout\n - Reference\n - overflow\n - recipe:css-shorthand-property\n - scrolling\nbrowser-compat: css.properties.overflow\n---\n{{CSSRef}}\n\nThe **`overflow`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) — in both directions.\n\n{{EmbedInteractiveExample(\"pages/css/overflow.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`overflow-x`](/en-US/docs/Web/CSS/overflow-x)\n- [`overflow-y`](/en-US/docs/Web/CSS/overflow-y)\n\n## Syntax\n\n```css\n/* Keyword values */\noverflow: visible;\noverflow: hidden;\noverflow: clip;\noverflow: scroll;\noverflow: auto;\noverflow: hidden visible;\n\n/* Global values */\noverflow: inherit;\noverflow: initial;\noverflow: revert;\noverflow: revert-layer;\noverflow: unset;\n```\n\nThe `overflow` property is specified as one or two keywords chosen from the list of values below. If two keywords are specified, the first applies to `overflow-x` and the second to `overflow-y`. Otherwise, both `overflow-x` and `overflow-y` are set to the same value.\n\n### Values\n\n- `visible`\n - : Content is not clipped and may be rendered outside the padding box.\n- `hidden`\n - : Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content _can_ be scrolled programmatically (for example, by setting the value of a property such as {{domxref(\"Element.scrollLeft\", \"scrollLeft\")}} or the {{domxref(\"Element.scrollTo\", \"scrollTo()\")}} method), so the element is still a scroll container.\n- `clip`\n - : Similar to `hidden`, the content is clipped to the element's padding box. The difference between `clip` and `hidden` is that the `clip` keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use {{cssxref(\"display\", \"display: flow-root\", \"#flow-root\")}} to do so.\n- `scroll`\n - : Content is clipped if necessary to fit the padding box. Browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes. Printers may still print overflowing content.\n- `auto`\n - : Depends on the {{Glossary(\"user agent\")}}. If content fits inside the padding box, it looks the same as `visible`, but still establishes a new block formatting context. Desktop browsers provide scrollbars if content overflows.\n- `overlay` {{deprecated_inline}}\n - : Behaves the same as `auto`, but with the scrollbars drawn on top of content instead of taking up space.\n\n#### Mozilla extensions\n\n- `-moz-scrollbars-none` {{deprecated_inline}}\n - : Use `overflow: hidden` instead.\n- `-moz-scrollbars-horizontal` {{deprecated_inline}}\n - : Use `{{Cssxref(\"overflow-x\")}}: scroll` and `{{Cssxref(\"overflow-y\")}}: hidden`, or `overflow: scroll hidden` instead.\n- `-moz-scrollbars-vertical` {{deprecated_inline}}\n - : Use `{{Cssxref(\"overflow-x\")}}: hidden` and `{{Cssxref(\"overflow-y\")}}: scroll`, or `overflow: hidden scroll` instead.\n- `-moz-hidden-unscrollable` {{deprecated_inline}}\n - : Use `overflow: clip` instead.\n\nAs of Firefox 63, `-moz-scrollbars-none`, `-moz-scrollbars-horizontal`, and `-moz-scrollbars-vertical` are behind a feature preference setting. In about:config, set `layout.css.overflow.moz-scrollbars.enabled` to `true`.\n\n## Description\n\nOverflow options include clipping, showing scrollbars, or displaying the content flowing out of its container into the surrounding area.\n\nSpecifying a value other than `visible` (the default) or `clip` creates a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context). This is necessary for technical reasons — if a float intersected with the scrolling element it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.\n\nIn order for `overflow` to have an effect, the block-level container must have either a set height (`height` or `max-height`) or `white-space` set to `nowrap`.\n\nSetting one axis to `visible` (the default) while setting the other to a _different_ value results in `visible` behaving as `auto`.\n\nThe JavaScript {{domxref(\"Element.scrollTop\")}} property may be used to scroll an HTML element even when `overflow` is set to `hidden`.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting different overflow values for text\n\n#### HTML\n\n```html\n
      \n visible\n

      \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.\n

      \n
      \n\n
      \n hidden\n

      \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.\n

      \n
      \n\n
      \n scroll\n

      \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.\n

      \n
      \n\n
      \n auto\n

      \n Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.\n

      \n
      \n```\n\n#### CSS\n\n```css\nbody {\n display: flex;\n justify-content: space-around;\n}\n\ndiv {\n margin: 1em;\n font-size: 1.2em;\n}\n\np {\n width: 8em;\n height: 5em;\n border: dotted;\n}\n\np.visible {\n overflow: visible;\n}\n\np.hidden {\n overflow: hidden;\n}\n\np.scroll {\n overflow: scroll;\n}\n\np.auto {\n overflow: auto;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_different_overflow_values_for_text\", \"600\", \"250\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"text-overflow\")}}, {{cssxref(\"white-space\")}}, {{Cssxref(\"overflow-x\")}}, {{Cssxref(\"overflow-y\")}}, {{Cssxref(\"overflow-inline\")}}, {{Cssxref(\"overflow-block\")}}, {{Cssxref(\"clip\")}}, {{Cssxref(\"display\")}}\n- [CSS Overflow](/en-US/docs/Web/CSS/CSS_Overflow) and [Debug scrollable overflow](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/debug_scrollable_overflow/index.html)\n" }, { "property": "overscroll-behavior-inline", "document": "---\ntitle: overscroll-behavior-inline\nslug: Web/CSS/overscroll-behavior-inline\ntags:\n - CSS\n - CSS Box Model\n - CSS Logical Properties\n - CSS Property\n - Reference\n - overscroll-behavior-inline\n - recipe:css-property\nbrowser-compat: css.properties.overscroll-behavior-inline\n---\n{{CSSRef}}\n\nThe **`overscroll-behavior-inline`** CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.\n\nSee {{cssxref(\"overscroll-behavior\")}} for a full explanation.\n\n```css\n/* Keyword values */\noverscroll-behavior-inline: auto; /* default */\noverscroll-behavior-inline: contain;\noverscroll-behavior-inline: none;\n\n/* Global values */\noverscroll-behavior-inline: inherit;\noverscroll-behavior-inline: initial;\noverscroll-behavior-inline: revert;\noverscroll-behavior-inline: revert-layer;\noverscroll-behavior-inline: unset;\n```\n\n## Syntax\n\nThe `overscroll-behavior-inline` property is specified as a keyword chosen from the list of values below.\n\n### Values\n\n- `auto`\n - : The default scroll overflow behavior occurs as normal.\n- `contain`\n - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. \"bounce\" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.\n- `none`\n - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preventing inline overscrolling\n\nIn this demo we have two block-level boxes, one inside the other. The outer box has a large {{cssxref(\"width\")}} set on it so the page will scroll horizontally. The inner box has a small width (and {{cssxref(\"height\")}}) set on it so it sits comfortably inside the viewport, but its content is given a large width so it will also scroll horizontally.\n\nBy default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the inline direction, we've set `overscroll-behavior-inline: contain` on the inner box.\n\n#### HTML\n\n```html\n
      \n
      \n
      \n

      overscroll-behavior-inline has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.

      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\nmain {\n height: 400px;\n width: 3000px;\n background-color: white;\n background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);\n}\n\nmain > div {\n height: 300px;\n width: 400px;\n overflow: auto;\n position: relative;\n top: 50px;\n left: 50px;\n overscroll-behavior-inline: contain;\n}\n\ndiv > div {\n height: 100%;\n width: 1500px;\n background-color: yellow;\n background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);\n}\n\np {\n padding: 10px;\n background-color: rgba(255,0,0,0.5);\n margin: 0;\n width: 360px;\n position: relative;\n top: 10px;\n left: 10px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)\n" }, { "property": "overscroll-behavior-x", "document": "---\ntitle: overscroll-behavior-x\nslug: Web/CSS/overscroll-behavior-x\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - overscroll-behavior-x\n - recipe:css-property\nbrowser-compat: css.properties.overscroll-behavior-x\n---\n{{CSSRef}}\n\nThe **`overscroll-behavior-x`** CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.\n\nSee {{cssxref(\"overscroll-behavior\")}} for a full explanation.\n\n```css\n/* Keyword values */\noverscroll-behavior-x: auto; /* default */\noverscroll-behavior-x: contain;\noverscroll-behavior-x: none;\n\n/* Global values */\noverscroll-behavior-x: inherit;\noverscroll-behavior-x: initial;\noverscroll-behavior-x: revert;\noverscroll-behavior-x: revert-layer;\noverscroll-behavior-x: unset;\n```\n\n## Syntax\n\nThe `overscroll-behavior-x` property is specified as a keyword chosen from the list of values below.\n\n### Values\n\n- `auto`\n - : The default scroll overflow behavior occurs as normal.\n- `contain`\n - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. \"bounce\" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.\n- `none`\n - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preventing an underlying element from scrolling horizontally\n\nIn our simple [overscroll-behavior-x example](https://mdn.github.io/css-examples/overscroll-behavior/overscroll-behavior-x) (see [source code](https://github.com/mdn/css-examples/blob/main/overscroll-behavior/overscroll-behavior-x.html) also), we have two block-level boxes, one inside the other. The outer box has a large {{cssxref(\"width\")}} set on it so the page will scroll horizontally. The inner box has a small width (and {{cssxref(\"height\")}}) set on it so it sits comfortably inside the viewport, but its content is given a large `width` so it will scroll horizontally.\n\nBy default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this, you can set `overscroll-behavior-x: contain` on the inner box:\n\n```css\nmain > div {\n height: 300px;\n width: 500px;\n overflow: auto;\n position: relative;\n top: 100px;\n left: 100px;\n overscroll-behavior-x: contain;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#full-demo)\n- The mapped logical properties: {{cssxref(\"overscroll-behavior-inline\")}}, {{cssxref(\"overscroll-behavior-block\")}}\n" }, { "property": "overscroll-behavior", "document": "---\ntitle: overscroll-behavior\nslug: Web/CSS/overscroll-behavior\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - overscroll-behavior\n - recipe:css-property\nbrowser-compat: css.properties.overscroll-behavior\n---\n{{CSSRef}}\n\nThe **`overscroll-behavior`** CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref(\"overscroll-behavior-x\")}} and {{cssxref(\"overscroll-behavior-y\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/overscroll-behavior.html\")}}\n\nBy default, mobile browsers tend to provide a \"bounce\" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called **scroll chaining**.\n\nIn some cases these behaviors are not desirable. You can use `overscroll-behavior` to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired \"pull to refresh\"-type behavior.\n\n## Syntax\n\n```css\n/* Keyword values */\noverscroll-behavior: auto; /* default */\noverscroll-behavior: contain;\noverscroll-behavior: none;\n\n/* Two values */\noverscroll-behavior: auto contain;\n\n/* Global values */\noverscroll-behavior: inherit;\noverscroll-behavior: initial;\noverscroll-behavior: revert;\noverscroll-behavior: revert-layer;\noverscroll-behavior: unset;\n```\n\nThe `overscroll-behavior` property is specified as one or two keywords chosen from the list of values below.\n\nTwo keywords specifies the `overscroll-behavior` value on the `x` and `y` axes respectively. If only one value is specified, both x and y are assumed to have the same value.\n\n### Values\n\n- `auto`\n - : The default scroll overflow behavior occurs as normal.\n- `contain`\n - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. \"bounce\" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.\n- `none`\n - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preventing an underlying element from scrolling\n\nIn our [overscroll-behavior example](https://mdn.github.io/css-examples/overscroll-behavior/) (see the [source code](https://github.com/mdn/css-examples/tree/main/overscroll-behavior) also), we present a full-page list of fake contacts, and a dialog box containing a chat window.\n\n![A popup chat window titled 'Active chat', showing a conversation between Chris and Bob. Behind the chat window is a contact list titled 'overscroll-behavior demo'.](example.png)\n\nBoth of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using `overscroll-behavior-y` (`overscroll-behavior` would also work) on the chat window, like this:\n\n```css\n.messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n```\n\nWe also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting `overscroll-behavior: none` on the {{htmlelement(\"html\")}} element:\n\n```css\nhtml {\n margin: 0;\n overscroll-behavior: none;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)\n" }, { "property": "padding-block", "document": "---\ntitle: padding-block\nslug: Web/CSS/padding-block\ntags:\n - CSS\n - padding-block\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.padding-block\n---\n{{CSSRef}}\n\nThe **`padding-block`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"padding-block-end\")}}\n- {{cssxref(\"padding-block-start\")}}\n\n## Syntax\n\n```css\n/* values */\npadding-block: 10px 20px; /* An absolute length */\npadding-block: 1em 2em; /* relative to the text size */\npadding-block: 10px; /* sets both start and end values */\n\n/* values */\npadding-block: 5% 2%; /* relative to the nearest block container's width */\n\n/* Global values */\npadding-block: inherit;\npadding-block: initial;\npadding-block: revert;\npadding-block: unset;\n```\n\nThe `padding-block` property may be specified with one or two values. If one value is given, it is used as the value for both {{cssxref(\"padding-block-start\")}} and {{cssxref(\"padding-block-end\")}}. If two values are given, the first is used for {{cssxref(\"padding-block-start\")}} and the second for {{cssxref(\"padding-block-end\")}}.\n\n### Values\n\nThe `padding-block` property takes the same values as the {{cssxref(\"padding-left\")}} property.\n\n## Description\n\nThese values corresponds to the {{cssxref(\"padding-top\")}} and {{cssxref(\"padding-bottom\")}}, or {{cssxref(\"padding-right\")}}, and {{cssxref(\"padding-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block padding for vertical text\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n padding-block: 20px 40px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "padding-block-start", "document": "---\ntitle: padding-block-start\nslug: Web/CSS/padding-block-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - padding-block\n - padding-block-start\n - recipe:css-property\nbrowser-compat: css.properties.padding-block-start\n---\n{{CSSRef}}\n\nThe **`padding-block-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical block start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/padding-block-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\npadding-block-start: 10px; /* An absolute length */\npadding-block-start: 1em; /* A length relative to the text size */\n\n/* value */\npadding-block-start: 5%; /* A padding relative to the block container's width */\n\n/* Global values */\npadding-block-start: inherit;\npadding-block-start: initial;\npadding-block-start: revert;\npadding-block-start: revert-layer;\npadding-block-start: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the [inline-size](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) (_width_ in a horizontal language) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Description\n\nThe `padding-block-start` property is defined in the specification as taking the same values as the {{cssxref(\"padding-top\")}} property. However, the physical property it maps to depends on the values set for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}. Therefore, it could map to {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, or {{cssxref(\"padding-left\")}}\n\nIt relates to {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}}, which define the other paddings of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block start padding for vertical text\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n padding-block-start: 20px;\n background-color: #C8C800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_start_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "padding-bottom", "document": "---\ntitle: padding-bottom\nslug: Web/CSS/padding-bottom\ntags:\n - CSS\n - CSS Padding\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.padding-bottom\n---\n{{CSSRef}}\n\nThe **`padding-bottom`** [CSS](/en-US/docs/Web/CSS) property sets the height of the [padding area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding_area) on the bottom of an element.\n\n{{EmbedInteractiveExample(\"pages/css/padding-bottom.html\")}}\n\nAn element's padding area is the space between its content and its border.\n\n![The effect of the CSS padding-bottom property on the element box](padding-bottom.svg)\n\n> **Note:** The {{cssxref(\"padding\")}} property can be used to set paddings on all four sides of an element with a single declaration.\n\n## Syntax\n\n```css\n/* values */\npadding-bottom: 0.5em;\npadding-bottom: 0;\npadding-bottom: 2cm;\n\n/* value */\npadding-bottom: 10%;\n\n/* Global values */\npadding-bottom: inherit;\npadding-bottom: initial;\npadding-bottom: revert;\npadding-bottom: revert-layer;\npadding-bottom: unset;\n```\n\nThe `padding-bottom` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting padding bottom with pixels and percentages\n\n```css\n.content { padding-bottom: 5%; }\n.sidebox { padding-bottom: 10px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-left\")}} and the {{cssxref(\"padding\")}} shorthand\n- The mapped logical properties: {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}} and the shorthands {{cssxref(\"padding-block\")}} and {{cssxref(\"padding-inline\")}}\n" }, { "property": "padding-inline-start", "document": "---\ntitle: padding-inline-start\nslug: Web/CSS/padding-inline-start\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - padding-inline\n - padding-inline-start\n - recipe:css-property\nbrowser-compat: css.properties.padding-inline-start\n---\n{{CSSRef}}\n\nThe **`padding-inline-start`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/padding-inline-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\npadding-inline-start: 10px; /* An absolute length */\npadding-inline-start: 1em; /* A length relative to the text size */\n\n/* value */\npadding-inline-start: 5%; /* A padding relative to the block container's width */\n\n/* Global values */\npadding-inline-start: inherit;\npadding-inline-start: initial;\npadding-inline-start: revert;\npadding-inline-start: revert-layer;\npadding-inline-start: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Description\n\nThe `padding-inline-start` property is defined in the specification as taking the same values as the {{cssxref(\"padding-top\")}} property. However, the physical property it maps to depends on the values set for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}. Therefore, it could map to {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, or {{cssxref(\"padding-left\")}}\n\nIt relates to {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, and {{cssxref(\"padding-inline-end\")}}, which define the other paddings of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline start padding for vertical text\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n padding-inline-start: 20px;\n background-color: #C8C800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_start_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "padding-inline-end", "document": "---\ntitle: padding-inline-end\nslug: Web/CSS/padding-inline-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - padding-inline\n - padding-inline-end\n - recipe:css-property\nbrowser-compat: css.properties.padding-inline-end\n---\n{{CSSRef}}\n\nThe **`padding-inline-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/padding-inline-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\npadding-inline-end: 10px; /* An absolute length */\npadding-inline-end: 1em; /* A length relative to the text size */\n\n/* value */\npadding-inline-end: 5%; /* A padding relative to the block container's width */\n\n/* Global values */\npadding-inline-end: inherit;\npadding-inline-end: initial;\npadding-inline-end: revert;\npadding-inline-end: revert-layer;\npadding-inline-end: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the [inline-size](/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) (_width_ in a horizontal language) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Description\n\nThe `padding-inline-end` property is defined in the specification as taking the same values as the {{cssxref(\"padding-top\")}} property. However, the physical property it maps to depends on the values set for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}. Therefore, it could map to {{cssxref(\"padding-bottom\")}}, {{cssxref(\"padding-right\")}}, or {{cssxref(\"padding-left\")}}\n\nIt relates to {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, and {{cssxref(\"padding-inline-start\")}}, which define the other paddings of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline end padding for vertical text\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n padding-inline-end: 20px;\n background-color: #C8C800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_end_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "padding-inline", "document": "---\ntitle: padding-inline\nslug: Web/CSS/padding-inline\ntags:\n - CSS\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.padding-inline\n---\n{{CSSRef}}\n\nThe **`padding-inline`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`padding-inline-end`](/en-US/docs/Web/CSS/padding-inline-end)\n- [`padding-inline-start`](/en-US/docs/Web/CSS/padding-inline-start)\n\n## Syntax\n\n```css\n/* values */\npadding-inline: 10px 20px; /* An absolute length */\npadding-inline: 1em 2em; /* relative to the text size */\npadding-inline: 10px; /* sets both start and end values */\n\n/* values */\npadding-inline: 5% 2%; /* relative to the nearest block container's width */\n\n/* Global values */\npadding-inline: inherit;\npadding-inline: initial;\npadding-inline: revert;\npadding-inline: unset;\n```\n\nThe `padding-inline` property may be specified with one or two values. If one value is given, it is used as the value for both {{cssxref(\"padding-inline-start\")}} and {{cssxref(\"padding-inline-end\")}}. If two values are given, the first is used for {{cssxref(\"padding-inline-start\")}} and the second for {{cssxref(\"padding-inline-end\")}}.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Description\n\nValues for this property correspond to the {{cssxref(\"padding-top\")}} and {{cssxref(\"padding-bottom\")}}, or {{cssxref(\"padding-right\")}}, and {{cssxref(\"padding-left\")}} property depending on the values defined for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting inline padding for vertical text\n\n#### HTML\n\n```html\n
      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-rl;\n padding-inline: 20px 40px;\n background-color: #c8c800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_inline_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "min-inline-size", "document": "---\ntitle: min-inline-size\nslug: Web/CSS/min-inline-size\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - min-inline-size\n - recipe:css-property\nbrowser-compat: css.properties.min-inline-size\n---\n{{CSSRef}}\n\nThe **`min-inline-size`** [CSS](/en-US/docs/Web/CSS) property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the {{cssxref(\"min-width\")}} or the {{cssxref(\"min-height\")}} property, depending on the value of {{cssxref(\"writing-mode\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/min-inline-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\nmin-inline-size: 100px;\nmin-inline-size: 5em;\n\n/* values */\nmin-inline-size: 10%;\n\n/* Keyword values */\nmin-inline-size: max-content;\nmin-inline-size: min-content;\nmin-inline-size: fit-content(20em);\n\n/* Global values */\nmin-inline-size: inherit;\nmin-inline-size: initial;\nmin-inline-size: revert;\nmin-inline-size: revert-layer;\nmin-inline-size: unset;\n```\n\nIf the writing mode is vertically oriented, the value of `min-inline-size` relates to the minimum height of the element; otherwise, it relates to the minimum width of the element. A related property is {{cssxref(\"min-block-size\")}}, which defines the other dimension of the element.\n\n### Values\n\nThe `min-inline-size` property takes the same values as the {{cssxref(\"min-width\")}} and {{cssxref(\"min-height\")}} properties.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting minimum inline size for vertical text\n\n#### HTML\n\n```html\n

      Example text

      \n```\n\n#### CSS\n\n```css\n.exampleText {\n writing-mode: vertical-rl;\n background-color: yellow;\n block-size: 5%;\n min-inline-size: 200px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_minimum_inline_size_for_vertical_text\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"min-width\")}} and {{cssxref(\"min-height\")}}\n- {{cssxref(\"writing-mode\")}}\n" }, { "property": "padding-left", "document": "---\ntitle: padding-left\nslug: Web/CSS/padding-left\ntags:\n - CSS\n - CSS Padding\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.padding-left\n---\n{{CSSRef}}\n\nThe **`padding-left`** [CSS](/en-US/docs/Web/CSS) property sets the width of the [padding area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding_area) to the left of an element.\n\n{{EmbedInteractiveExample(\"pages/css/padding-left.html\")}}\n\nAn element's padding area is the space between its content and its border.\n\n> **Note:** The {{cssxref(\"padding\")}} property can be used to set paddings on all four sides of an element with a single declaration.\n\n## Syntax\n\n```css\n/* values */\npadding-left: 0.5em;\npadding-left: 0;\npadding-left: 2cm;\n\n/* value */\npadding-left: 10%;\n\n/* Global values */\npadding-left: inherit;\npadding-left: initial;\npadding-left: revert;\npadding-left: revert-layer;\npadding-left: unset;\n```\n\nThe `padding-left` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting left padding using pixels and percentages\n\n```css\n.content { padding-left: 5%; }\n.sidebox { padding-left: 10px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}} and the {{cssxref(\"padding\")}} shorthand\n- The mapped logical properties: {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}} and the shorthands {{cssxref(\"padding-block\")}} and {{cssxref(\"padding-inline\")}}\n" }, { "property": "padding-right", "document": "---\ntitle: padding-right\nslug: Web/CSS/padding-right\ntags:\n - CSS\n - CSS Padding\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.padding-right\n---\n{{CSSRef}}\n\nThe **`padding-right`** [CSS](/en-US/docs/Web/CSS) property sets the width of the [padding area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding_area) on the right of an element.\n\n{{EmbedInteractiveExample(\"pages/css/padding-right.html\")}}\n\nAn element's padding area is the space between its content and its border.\n\n> **Note:** The {{cssxref(\"padding\")}} property can be used to set paddings on all four sides of an element with a single declaration.\n\n## Syntax\n\n```css\n/* values */\npadding-right: 0.5em;\npadding-right: 0;\npadding-right: 2cm;\n\n/* value */\npadding-right: 10%;\n\n/* Global values */\npadding-right: inherit;\npadding-right: initial;\npadding-right: revert;\npadding-right: revert-layer;\npadding-right: unset;\n```\n\nThe `padding-right` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting right padding using pixels and percentages\n\n```css\n.content { padding-right: 5%; }\n.sidebox { padding-right: 10px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-bottom\")}}, {{cssxref(\"padding-left\")}} and the {{cssxref(\"padding\")}} shorthand\n- The mapped logical properties: {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}} and the shorthands {{cssxref(\"padding-block\")}} and {{cssxref(\"padding-inline\")}}\n" }, { "property": "padding-top", "document": "---\ntitle: padding-top\nslug: Web/CSS/padding-top\ntags:\n - CSS\n - CSS Padding\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.padding-top\n---\n{{CSSRef}}\n\nThe **`padding-top`** [CSS](/en-US/docs/Web/CSS) property sets the height of the [padding area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding_area) on the top of an element.\n\n{{EmbedInteractiveExample(\"pages/css/padding-top.html\")}}\n\nAn element's padding area is the space between its content and its border.\n\n![The effect of the CSS padding-top property on the element box](padding-top.svg)\n\n> **Note:** The {{cssxref(\"padding\")}} property can be used to set paddings on all four sides of an element with a single declaration.\n\n## Syntax\n\n```css\n/* values */\npadding-top: 0.5em;\npadding-top: 0;\npadding-top: 2cm;\n\n/* value */\npadding-top: 10%;\n\n/* Global values */\npadding-top: inherit;\npadding-top: initial;\npadding-top: revert;\npadding-top: revert-layer;\npadding-top: unset;\n```\n\nThe `padding-top` property is specified as a single value chosen from the list below. Unlike margins, negative values are not allowed for padding.\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting top padding using pixels and percentages\n\n```css\n.content { padding-top: 5%; }\n.sidebox { padding-top: 10px; }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, {{cssxref(\"padding-left\")}} and the {{cssxref(\"padding\")}} shorthand\n- The mapped logical properties: {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}} and the shorthands {{cssxref(\"padding-block\")}} and {{cssxref(\"padding-inline\")}}\n" }, { "property": "padding", "document": "---\ntitle: padding\nslug: Web/CSS/padding\ntags:\n - CSS\n - CSS Padding\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.padding\n---\n{{CSSRef}}\n\nThe **`padding`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the [padding area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding_area) on all four sides of an element at once.\n\n{{EmbedInteractiveExample(\"pages/css/padding.html\")}}\n\nAn element's padding area is the space between its content and its border.\n\n> **Note:** Padding creates extra space within an element. In contrast, {{cssxref(\"margin\")}} creates extra space _around_ an element.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{cssxref(\"padding-bottom\")}}\n- {{cssxref(\"padding-left\")}}\n- {{cssxref(\"padding-right\")}}\n- {{cssxref(\"padding-top\")}}\n\n## Syntax\n\n```css\n/* Apply to all four sides */\npadding: 1em;\n\n/* vertical | horizontal */\npadding: 5% 10%;\n\n/* top | horizontal | bottom */\npadding: 1em 2em 2em;\n\n/* top | right | bottom | left */\npadding: 5px 1em 0 2em;\n\n/* Global values */\npadding: inherit;\npadding: initial;\npadding: revert;\npadding: revert-layer;\npadding: unset;\n```\n\nThe `padding` property may be specified using one, two, three, or four values. Each value is a {{cssxref(\"<length>\")}} or a {{cssxref(\"<percentage>\")}}. Negative values are invalid.\n\n- When **one** value is specified, it applies the same padding to **all four sides**.\n- When **two** values are specified, the first padding applies to the **top and bottom**, the second to the **left and right**.\n- When **three** values are specified, the first padding applies to the **top**, the second to the **right and left**, the third to the **bottom**.\n- When **four** values are specified, the paddings apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting padding with pixels\n\n#### HTML\n\n```html\n

      This element has moderate padding.

      \n

      The padding is huge in this element!

      \n```\n\n#### CSS\n\n```css\nh4 {\n background-color: lime;\n padding: 20px 50px;\n}\n\nh3 {\n background-color: cyan;\n padding: 110px 50px 50px 110px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}\n\n### Setting padding with pixels and percentages\n\n```css\npadding: 5%; /* All sides: 5% padding */\n\npadding: 10px; /* All sides: 10px padding */\n\npadding: 10px 20px; /* top and bottom: 10px padding */\n /* left and right: 20px padding */\n\npadding: 10px 3% 20px; /* top: 10px padding */\n /* left and right: 3% padding */\n /* bottom: 20px padding */\n\npadding: 1em 3px 30px 5px; /* top: 1em padding */\n /* right: 3px padding */\n /* bottom: 30px padding */\n /* left: 5px padding */\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Introduction to the CSS basic box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}.\n- The mapped logical properties: {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-block-end\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}} and the shorthands {{cssxref(\"padding-block\")}} and {{cssxref(\"padding-inline\")}}\n" }, { "property": "page-break-after", "document": "---\ntitle: page-break-after\nslug: Web/CSS/page-break-after\ntags:\n - CSS\n - CSS Property\n - Page Breaks\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.page-break-after\n---\n{{CSSRef}}\n\n> **Warning:** This property has been replaced by the {{cssxref(\"break-after\")}} property.\n\nThe **`page-break-after`** CSS property adjusts page breaks _after_ the current element.\n\n```css\n/* Keyword values */\npage-break-after: auto;\npage-break-after: always;\npage-break-after: avoid;\npage-break-after: left;\npage-break-after: right;\npage-break-after: recto;\npage-break-after: verso;\n\n/* Global values */\npage-break-after: inherit;\npage-break-after: initial;\npage-break-after: revert;\npage-break-after: revert-layer;\npage-break-after: unset;\n```\n\nThis property applies to block elements that generate a box. It won't apply on an empty {{HTMLElement(\"div\")}} that won't generate a box.\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Initial value. Automatic page breaks (neither forced nor forbidden).\n- `always`\n - : Always force page breaks after the element.\n- `avoid`\n - : Avoid page breaks after the element.\n- `left`\n - : Force page breaks after the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.\n- `right`\n - : Force page breaks after the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.\n- `recto` {{experimental_inline}}\n - : If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.\n- `verso` {{experimental_inline}}\n - : If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.\n\n## Page break aliases\n\nThe `page-break-after` property is now a legacy property, replaced by {{cssxref(\"break-after\")}}.\n\nFor compatibility reasons, `page-break-after` should be treated by browsers as an alias of `break-after`. This ensures that sites using `page-break-after` continue to work as designed. A subset of values should be aliased as follows:\n\n| page-break-after | break-after |\n| ---------------- | ----------- |\n| `auto` | `auto` |\n| `left` | `left` |\n| `right` | `right` |\n| `avoid` | `avoid` |\n| `always` | `page` |\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a page break after footnotes\n\n```css\n/* move to a new page after footnotes */\ndiv.footnotes {\n page-break-after: always;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"break-before\")}}, {{cssxref(\"break-after\")}}, {{cssxref(\"break-inside\")}}\n- {{cssxref(\"page-break-before\")}}, {{cssxref(\"page-break-inside\")}}\n- {{cssxref(\"orphans\")}}, {{cssxref(\"widows\")}}\n" }, { "property": "page-break-before", "document": "---\ntitle: page-break-before\nslug: Web/CSS/page-break-before\ntags:\n - CSS\n - CSS Property\n - Page Breaks\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.page-break-before\n---\n{{CSSRef}}\n\n> **Warning:** This property has been replaced by the {{cssxref(\"break-before\")}} property.\n\nThe **`page-break-before`** CSS property adjusts page breaks _before_ the current element.\n\nThis property applies to block elements that generate a box. It won't apply on an empty {{ HTMLElement(\"div\") }} that won't generate a box.\n\n```css\n/* Keyword values */\npage-break-before: auto;\npage-break-before: always;\npage-break-before: avoid;\npage-break-before: left;\npage-break-before: right;\npage-break-before: recto;\npage-break-before: verso;\n\n/* Global values */\npage-break-before: inherit;\npage-break-before: initial;\npage-break-before: revert;\npage-break-before: revert-layer;\npage-break-before: unset;\n```\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Initial value. Automatic page breaks (neither forced nor forbidden).\n- `always`\n - : Always force page breaks before the element.\n- `avoid`\n - : Avoid page breaks before the element.\n- `left`\n - : Force page breaks before the element so that the next page is formatted as a left page. It's the page placed on the left side of the spine of the book or the back side of the page in duplex printing.\n- `right`\n - : Force page breaks before the element so that the next page is formatted as a right page. It's the page placed on the right side of the spine of the book or the front side of the page in duplex printing.\n- `recto` {{experimental_inline}}\n - : If pages progress left-to-right, then this acts like `right`. If pages progress right-to-left, then this acts like `left`.\n- `verso` {{experimental_inline}}\n - : If pages progress left-to-right, then this acts like `left`. If pages progress right-to-left, then this acts like `right`.\n\n## Page break aliases\n\nThe `page-break-before` property is now a legacy property, replaced by {{cssxref(\"break-before\")}}.\n\nFor compatibility reasons, `page-break-before` should be treated by browsers as an alias of `break-before`. This ensures that sites using `page-break-before` continue to work as designed. A subset of values should be aliased as follows:\n\n| page-break-before | break-before |\n| ----------------- | ------------ |\n| `auto` | `auto` |\n| `left` | `left` |\n| `right` | `right` |\n| `avoid` | `avoid` |\n| `always` | `page` |\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Avoid a page break before an element\n\n```css\n/* avoid page break before div elements of class note */\ndiv.note {\n page-break-before: avoid;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"break-before\")}}, {{cssxref(\"break-after\")}}, {{cssxref(\"break-inside\")}}\n- {{cssxref(\"page-break-after\")}}, {{cssxref(\"page-break-inside\")}}\n- {{cssxref(\"orphans\")}}, {{cssxref(\"widows\")}}\n" }, { "property": "overscroll-behavior-y", "document": "---\ntitle: overscroll-behavior-y\nslug: Web/CSS/overscroll-behavior-y\ntags:\n - CSS\n - CSS Box Model\n - CSS Property\n - Reference\n - overscroll-behavior-y\n - recipe:css-property\nbrowser-compat: css.properties.overscroll-behavior-y\n---\n{{CSSRef}}\n\nThe **`overscroll-behavior-y`** CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.\n\nSee {{cssxref(\"overscroll-behavior\")}} for a full explanation.\n\n```css\n/* Keyword values */\noverscroll-behavior-y: auto; /* default */\noverscroll-behavior-y: contain;\noverscroll-behavior-y: none;\n\n/* Global values */\noverscroll-behavior-y: inherit;\noverscroll-behavior-y: initial;\noverscroll-behavior-y: revert;\noverscroll-behavior-y: revert-layer;\noverscroll-behavior-y: unset;\n```\n\n## Syntax\n\nThe `overscroll-behavior-y` property is specified as a keyword chosen from the list of values below.\n\n### Values\n\n- `auto`\n - : The default scroll overflow behavior occurs as normal.\n- `contain`\n - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. \"bounce\" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.\n- `none`\n - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preventing an underlying element from scrolling vertically\n\n```css\n.messages {\n height: 220px;\n overflow: auto;\n overscroll-behavior-y: contain;\n}\n```\n\nSee {{cssxref(\"overscroll-behavior\")}} for a full example and explanation.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#demo)\n- The mapped logical properties: {{cssxref(\"overscroll-behavior-inline\")}}, {{cssxref(\"overscroll-behavior-block\")}}\n" }, { "property": "overscroll-behavior-block", "document": "---\ntitle: overscroll-behavior-block\nslug: Web/CSS/overscroll-behavior-block\ntags:\n - CSS\n - CSS Box Model\n - CSS Logical Properties\n - CSS Property\n - Reference\n - overscroll-behavior-block\n - recipe:css-property\nbrowser-compat: css.properties.overscroll-behavior-block\n---\n{{CSSRef}}\n\nThe **`overscroll-behavior-block`** CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached.\n\nSee {{cssxref(\"overscroll-behavior\")}} for a full explanation.\n\n```css\n/* Keyword values */\noverscroll-behavior-block: auto; /* default */\noverscroll-behavior-block: contain;\noverscroll-behavior-block: none;\n\n/* Global values */\noverscroll-behavior-block: inherit;\noverscroll-behavior-block: initial;\noverscroll-behavior-block: revert;\noverscroll-behavior-block: revert-layer;\noverscroll-behavior-block: unset;\n```\n\n## Syntax\n\nThe `overscroll-behavior-block` property is specified as a keyword chosen from the list of values below.\n\n### Values\n\n- `auto`\n - : The default scroll overflow behavior occurs as normal.\n- `contain`\n - : Default scroll overflow behavior is observed inside the element this value is set on (e.g. \"bounce\" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.\n- `none`\n - : No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preventing block overscrolling\n\nIn this demo we have two block-level boxes, one inside the other. The outer box has a large {{cssxref(\"height\")}} set on it so the page will scroll vertically. The inner box has a small {{cssxref(\"width\")}} (and `height`) set on it so it sits comfortably inside the viewport, but its content is given a large `height` so it will also scroll vertically.\n\nBy default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. To avoid this happening in the block direction, we've set `overscroll-behavior-block: contain` on the inner box.\n\n#### HTML\n\n```html\n
      \n
      \n
      \n

      overscroll-behavior-block has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.

      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\nmain {\n height: 3000px;\n width: 500px;\n background-color: white;\n background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);\n}\n\nmain > div {\n height: 300px;\n width: 400px;\n overflow: auto;\n position: relative;\n top: 50px;\n left: 50px;\n overscroll-behavior-block: contain;\n}\n\ndiv > div {\n height: 1500px;\n width: 100%;\n background-color: yellow;\n background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);\n}\n\np {\n padding: 10px;\n background-color: rgba(255,0,0,0.5);\n margin: 0;\n width: 340px;\n position: relative;\n top: 10px;\n left: 10px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Take control of your scroll: customizing pull-to-refresh and overflow effects](https://developer.chrome.com/blog/overscroll-behavior/#full-demo)\n" }, { "property": "page-break-inside", "document": "---\ntitle: page-break-inside\nslug: Web/CSS/page-break-inside\ntags:\n - CSS\n - CSS Property\n - Page Breaks\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.page-break-inside\n---\n{{CSSRef}}\n\n> **Warning:** This property has been replaced by the {{cssxref(\"break-inside\")}} property.\n\nThe **`page-break-inside`** CSS property adjusts page breaks _inside_ the current element.\n\n```css\n/* Keyword values */\npage-break-inside: auto;\npage-break-inside: avoid;\n\n/* Global values */\npage-break-inside: inherit;\npage-break-inside: initial;\npage-break-inside: revert;\npage-break-inside: revert-layer;\npage-break-inside: unset;\n```\n\n## Syntax\n\n### Values\n\n- `auto`\n - : Initial value. Automatic page breaks (neither forced nor forbidden).\n- `avoid`\n - : Avoid page breaks inside the element.\n\n## Page break aliases\n\nThe `page-break-inside` property is now a legacy property, replaced by {{cssxref(\"break-inside\")}}.\n\nFor compatibility reasons, `page-break-inside` should be treated by browsers as an alias of `break-inside`. This ensures that sites using `page-break-inside` continue to work as designed. A subset of values should be aliased as follows:\n\n| page-break-inside | break-inside |\n| ----------------- | ------------ |\n| `auto` | `auto` |\n| `avoid` | `avoid` |\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Avoiding page breaks inside elements\n\n#### HTML\n\n```html\n
      \n

      This is the first paragraph.

      \n
      \n A list\n
        \n
      1. one
        2. \n\n
      \n
      \n
        \n
      • one
        • \n\n
      \n

      This is the second paragraph.

      \n

      This is the third paragraph, it contains more text.

      \n

      This is the fourth paragraph. It has a little bit more text than the third one.

      \n
      \n```\n\n#### CSS\n\n```css\n.page {\n background-color: #8cffa0;\n height: 90px;\n width: 200px;\n columns: 1;\n column-width: 100px;\n}\n\n.list, ol, ul, p {\n break-inside: avoid;\n}\n\np {\n background-color: #8ca0ff;\n}\n\nol, ul, .list {\n margin: 0.5em 0;\n display: block;\n background-color: orange;\n}\n\np:first-child {\n margin-top: 0;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Avoiding_page_breaks_inside_elements\", 400, 160)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"break-before\")}}, {{cssxref(\"break-after\")}}, {{cssxref(\"break-inside\")}}\n- {{cssxref(\"page-break-after\")}}, {{cssxref(\"page-break-before\")}}\n- {{cssxref(\"orphans\")}}, {{cssxref(\"widows\")}}\n" }, { "property": "paged_media", "document": "---\ntitle: Paged media\nslug: Web/CSS/Paged_Media\ntags:\n - CSS\n - Guide\n - Page Breaks\n - Reference\n---\n{{CSSRef}}\n\n**Paged media** properties control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable area, style left and right pages differently, and control breaks inside elements. Widely supported properties include:\n\n- {{ cssxref(\"page-break-before\") }}\n- {{ cssxref(\"page-break-after\") }}\n- {{ cssxref(\"page-break-inside\") }}\n- {{ cssxref(\"orphans\") }}\n- {{ cssxref(\"widows\") }}\n- {{ cssxref(\"@page\") }}\n" }, { "property": "path", "document": "---\ntitle: path()\nslug: Web/CSS/path\ntags:\n - CSS\n - CSS Function\n - Function\n - Reference\nbrowser-compat: css.types.basic-shape.path\n---\n{{CSSRef}}\n\nThe **`path()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) accepts an SVG path string, and is used in [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes) and CSS Motion Path to enable a shape to be drawn.\n\n## Syntax\n\nWhen used in {{cssxref(\"offset-path\")}} or {{SVGAttr(\"d\")}}:\n\n```css\npath()\n```\n\nWhen used in {{cssxref(\"clip-path\")}}:\n\n```css\npath([<'fill-rule'>,]?)\n```\n\n### Parameters\n\n- `<'fill-rule'>`\n - : The filling rule for the interior of the path.\n Possible values are `nonzero` or `evenodd`.\n The default value is `nonzero`.\n See [fill-rule](/en-US/docs/Web/SVG/Attribute/fill-rule) for more details.\n- ``\n - : The string is a [data string](/en-US/docs/Web/SVG/Attribute/d) for defining an [SVG path](/en-US/docs/Web/SVG/Element/path).\n\n## Examples\n\n### Examples of correct values for path()\n\n```css\npath(\"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\");\npath(evenodd,\"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\");\n```\n\n### Use as the value of offset-path\n\nThe `path()` function is used to create a path for the item to travel round. Changing any of the values will cause the path to not neatly run round the circle.\n\n{{EmbedGHLiveSample(\"css-examples/path/offset-path.html\", '100%', 960)}}\n\n### Modify the value of the SVG path d attribute\n\nThe `path()` can be used to modify the value of the SVG [`d` attribute](/en-US/docs/Web/SVG/Attribute/d), which can also be set to `none` in your CSS.\n\nThe \"V\" symbol will flip vertically when you hover over it, if `d` is supported as a CSS property.\n\n#### CSS\n\n```css\nhtml,body,svg { height:100% }\n\n/* This path is displayed on hover*/\n#svg_css_ex1:hover path {\n d: path(\"M20,80 L50,20 L80,80\")\n}\n```\n\n#### HTML\n\n```html\n\n \n\n```\n\n#### Result\n\n{{EmbedLiveSample('Modify the value of the SVG path d attribute', '100%', 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<shape-outside>\")}}\n- [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes)\n- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)\n- [SVG Path Syntax Illustrated Guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/)\n" }, { "property": "percentage", "document": "---\ntitle: \nslug: Web/CSS/percentage\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.percentage\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as {{CSSxRef(\"width\")}}, {{CSSxRef(\"height\")}}, {{CSSxRef(\"margin\")}}, {{CSSxRef(\"padding\")}}, and {{CSSxRef(\"font-size\")}}.\n\n> **Note:** Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a {{CSSxRef(\"<length>\")}} value) will be accessible on the inherited property, not the percentage value.\n\n## Syntax\n\nThe `` data type consists of a {{CSSxRef(\"<number>\")}} followed by the percentage sign (`%`). Optionally, it may be preceded by a single `+` or `-` sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.\n\n## Interpolation\n\nWhen animated, values of the `` data type are {{Glossary(\"interpolation\", \"interpolated\")}} as real, floating-point numbers. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.\n\n## Examples\n\n### Width and margin-left\n\n```html\n
      \n
      \n Width: 50%, Left margin: 20%\n
      \n
      \n Width: 30%, Left margin: 60%\n
      \n
      \n```\n\nThe above HTML will output:\n\n{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}\n\n### Font-size\n\n```html\n
      \n

      Full-size text (18px)

      \n

      50% (9px)

      \n

      200% (36px)

      \n
      \n```\n\nThe above HTML will output:\n\n{{EmbedLiveSample('Font-size', 'auto', 160)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"<length-percentage>\")}}\n- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n" }, { "property": "perspective-origin", "document": "---\ntitle: perspective-origin\nslug: Web/CSS/perspective-origin\ntags:\n - 3D\n - CSS\n - CSS Property\n - CSS Transforms\n - Graphics\n - Property\n - Reference\n - Transforms\n - perspective\n - perspective-origin\n - recipe:css-property\nbrowser-compat: css.properties.perspective-origin\n---\n{{CSSRef}}\n\nThe **`perspective-origin`** [CSS](/en-US/docs/Web/CSS) property determines the position at which the viewer is looking. It is used as the _vanishing point_ by the {{cssxref(\"perspective\")}} property.\n\n{{EmbedInteractiveExample(\"pages/css/perspective-origin.html\")}}\n\nThe **`perspective-origin`** and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the [`perspective()`](/en-US/docs/Web/CSS/transform-function/perspective()) transform function which is placed on the element being transformed.\n\n## Syntax\n\n```css\n/* One-value syntax */\nperspective-origin: x-position;\n\n/* Two-value syntax */\nperspective-origin: x-position y-position;\n\n/* When both x-position and y-position are keywords,\n the following is also valid */\nperspective-origin: y-position x-position;\n\n/* Global values */\nperspective-origin: inherit;\nperspective-origin: initial;\nperspective-origin: revert;\nperspective-origin: revert-layer;\nperspective-origin: unset;\n```\n\n### Values\n\n- _x-position_\n\n - : Indicates the position of the abscissa of the _vanishing point_. It can have one of the following values:\n\n - {{cssxref(\"<length-percentage>\")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.\n - `left`, a keyword being a shortcut for the `0` length value.\n - `center`, a keyword being a shortcut for the `50%` percentage value.\n - `right`, a keyword being a shortcut for the `100%` percentage value.\n\n- _y-position_\n\n - : Indicates the position of the ordinate of the _vanishing point_. It can have one of the following values:\n\n - {{cssxref(\"<length-percentage>\")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.\n - `top`, a keyword being a shortcut for the `0` length value.\n - `center`, a keyword being a shortcut for the `50%` percentage value.\n - `bottom`, a keyword being a shortcut for the `100%` percentage value.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Changing the perspective origin\n\nAn example showing how to change `perspective-origin` is given in [Using CSS transforms > Changing the perspective origin](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#changing_the_perspective_origin).\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using CSS Transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)\n- {{cssxref('transform-style')}}\n- {{cssxref('transform-function')}}\n- {{cssxref('perspective')}}\n- [`transform: perspective()`](/en-US/docs/Web/CSS/transform-function/perspective()) function\n" }, { "property": "perspective", "document": "---\ntitle: perspective\nslug: Web/CSS/perspective\ntags:\n - 3D\n - CSS\n - CSS Property\n - CSS Transforms\n - Distance\n - Graphics\n - Property\n - Reference\n - perspective\n - recipe:css-property\nbrowser-compat: css.properties.perspective\n---\n{{CSSRef}}\n\nThe **`perspective`** [CSS](/en-US/docs/Web/CSS) property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.\n\n{{EmbedInteractiveExample(\"pages/css/perspective.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\nperspective: none;\n\n/* values */\nperspective: 20px;\nperspective: 3.5em;\n\n/* Global values */\nperspective: inherit;\nperspective: initial;\nperspective: revert;\nperspective: revert-layer;\nperspective: unset;\n```\n\n### Values\n\n- `none`\n - : Indicates that no perspective transform is to be applied.\n- ``\n - : A {{cssxref(\"<length>\")}} giving the distance from the user to the z=0 plane. It is used to apply a perspective transform to the children of the element. Negative values are syntax errors. If the value is smaller than `1px`, it is clamped to `1px`.\n\n## Description\n\nEach 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.\nLarge values of `perspective` cause a small transformation;\nsmall values of `perspective` cause a large transformation.\n\nThe parts of the 3D elements that are behind the user — i.e. their z-axis coordinates are greater than the value of the `perspective` CSS property — are not drawn.\n\nThe _vanishing point_ is by default placed at the center of the element, but its position can be changed using the {{cssxref(\"perspective-origin\")}} property.\n\nUsing this property with a value other than `none` creates a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Also, in that case, the object will act as a containing block for `position: fixed` elements that it contains.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting perspective\n\nAn example showing how a cube varies if the `perspective` is set at different positions is given in [Using CSS transforms > Setting perspective](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms#setting_perspective).\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Using CSS Transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)\n" }, { "property": "place-items", "document": "---\ntitle: place-items\nslug: Web/CSS/place-items\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.place-items\n---\n{{CSSRef}}\n\nThe [CSS](/en-US/docs/Web/CSS) **`place-items`** [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) allows you to align items along both the block and inline directions at once (i.e. the {{CSSxRef(\"align-items\")}} and {{CSSxRef(\"justify-items\")}} properties) in a relevant layout system such as [Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). If the second value is not set, the first value is also used for it.\n\n{{EmbedInteractiveExample(\"pages/css/place-items.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`align-items`](/en-US/docs/Web/CSS/align-items)\n- [`justify-items`](/en-US/docs/Web/CSS/justify-items)\n\n## Syntax\n\n```css\n/* Keyword values */\nplace-items: center;\nplace-items: normal start;\n\n/* Positional alignment */\nplace-items: center normal;\nplace-items: start legacy;\nplace-items: end normal;\nplace-items: self-start legacy;\nplace-items: self-end normal;\nplace-items: flex-start legacy;\nplace-items: flex-end normal;\nplace-items: left legacy;\nplace-items: right normal;\n\n/* Baseline alignment */\nplace-items: baseline normal;\nplace-items: first baseline legacy;\nplace-items: last baseline normal;\nplace-items: stretch legacy;\n\n/* Global values */\nplace-items: inherit;\nplace-items: initial;\nplace-items: revert;\nplace-items: revert-layer;\nplace-items: unset;\n```\n\n### Values\n\nOne of the following forms:\n\n- A single {{cssxref(\"align-items\")}} value, which is used to set alignment in both block and inline directions.\n- An {{cssxref(\"align-items\")}} value, which sets alignment in the block direction, followed by a {{cssxref(\"justify-items\")}} value, which sets alignment in the inline direction.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Placing items in a flex container\n\nIn flexbox {{cssxref(\"justify-self\")}} or {{cssxref(\"justify-items\")}} do not apply, as on the main axis items are treated as a group. Therefore, the second value will be ignored.\n\n```css hidden\ndiv > div {\n box-sizing: border-box;\n border: 2px solid #8c8c8c;\n width: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#item1 {\n background-color: #8cffa0;\n min-height: 30px;\n font-size: 2em;\n}\n\n#item2 {\n background-color: #a0c8ff;\n min-height: 50px;\n}\n\n#item3 {\n background-color: #ffa08c;\n min-height: 40px;\n}\n\n#item4 {\n background-color: #ffff8c;\n min-height: 60px;\n}\n\n#item5 {\n background-color: #ff8cff;\n min-height: 70px;\n}\n\n#item6 {\n background-color: #8cffff;\n min-height: 50px;\n}\n\nselect {\n font-size: 16px;\n}\n\n.row {\n margin-top: 10px;\n}\n```\n\n```html hidden\n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n\n
      \n \n \n
      \n```\n\n```js hidden\nlet values = document.getElementById('values');\nlet container = document.getElementById('container');\n\nvalues.addEventListener('change', function (evt) {\n container.style.placeItems = evt.target.value;\n});\n```\n\n#### CSS\n\n```css\n#container {\n height:200px;\n width: 240px;\n place-items: stretch; /* You can change this value by selecting another option in the list */\n background-color: #8c8c8c;\n display: flex;\n}\n\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Placing_items_in_a_flex_container\", 260, 290)}}\n\n### Placing items in a grid container\n\nThe following grid container has items which are smaller than the grid areas they are placed in, therefore `place-items` will move them in the block and inline dimensions.\n\n```css hidden\ndiv > div {\n box-sizing: border-box;\n border: 2px solid #8c8c8c;\n}\n\n#item1 {\n background-color: #8cffa0;\n min-height: 30px;\n font-size: 2em;\n}\n\n#item2 {\n background-color: #a0c8ff;\n min-height: 50px;\n}\n\n#item3 {\n background-color: #ffa08c;\n min-height: 40px;\n}\n\n#item4 {\n background-color: #ffff8c;\n min-height: 60px;\n}\n\n#item5 {\n background-color: #ff8cff;\n min-height: 70px;\n}\n\n#item6 {\n background-color: #8cffff;\n min-height: 50px;\n}\n\nselect {\n font-size: 16px;\n}\n\n.row {\n margin-top: 10px;\n}\n```\n\n```html hidden\n
      \n
      1
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n \n \n
      \n```\n\n```js hidden\nlet values = document.getElementById('gridvalues');\nlet container = document.getElementById('gridcontainer');\n\nvalues.addEventListener('change', function (evt) {\n container.style.placeItems = evt.target.value;\n});\n```\n\n#### CSS\n\n```css\n#gridcontainer {\n height:200px;\n width: 240px;\n place-items: stretch; /* You can change this value by selecting another option in the list */\n background-color: #8c8c8c;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n}\n\n#gridcontainer > div {\n width: 50px;\n}\n\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Placing_items_in_a_grid_container\", 260, 290)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n- The {{CSSxRef(\"align-items\")}} property\n- The {{CSSxRef(\"align-self\")}} property\n- The {{CSSxRef(\"justify-items\")}} property\n- The {{CSSxRef(\"justify-self\")}} property\n" }, { "property": "pointer-events", "document": "---\ntitle: pointer-events\nslug: Web/CSS/pointer-events\ntags:\n - CSS\n - CSS Property\n - Reference\n - SVG\n - pointer-events\n - recipe:css-property\nbrowser-compat: css.properties.pointer-events\n---\n{{CSSRef}}\n\nThe **`pointer-events`** [CSS](/en-US/docs/Web/CSS) property sets under what circumstances (if any) a particular graphic element can become the [target](/en-US/docs/Web/API/Event/target) of pointer events.\n\n{{EmbedInteractiveExample(\"pages/css/pointer-events.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\npointer-events: auto;\npointer-events: none;\npointer-events: visiblePainted; /* SVG only */\npointer-events: visibleFill; /* SVG only */\npointer-events: visibleStroke; /* SVG only */\npointer-events: visible; /* SVG only */\npointer-events: painted; /* SVG only */\npointer-events: fill; /* SVG only */\npointer-events: stroke; /* SVG only */\npointer-events: all; /* SVG only */\n\n/* Global values */\npointer-events: inherit;\npointer-events: initial;\npointer-events: revert;\npointer-events: revert-layer;\npointer-events: unset;\n```\n\nThe `pointer-events` property is specified as a single keyword chosen from the list of values below.\n\n### Values\n\n- `auto`\n - : The element behaves as it would if the `pointer-events` property were not specified. In SVG content, this value and the value `visiblePainted` have the same effect.\n- `none`\n - : The element is never the [target](/en-US/docs/Web/API/Event/target) of pointer events; however, pointer events may target its descendant elements if those descendants have `pointer-events` set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/[bubble](/en-US/docs/Web/API/Event/bubbles) phases.\n\n#### SVG only (experimental for HTML)\n\n- `visiblePainted`\n - : SVG only (experimental for HTML). The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when a mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when a mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`.\n- `visibleFill`\n - : SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and when e.g. a mouse cursor is over the interior (i.e., fill) of the element. The value of the `fill` property does not affect event processing.\n- `visibleStroke`\n - : SVG only. The element can only be the target of a pointer event when the `visibility` property is set to `visible` and e.g. when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the `stroke` property does not affect event processing.\n- `visible`\n - : SVG only (experimental for HTML). The element can be the target of a pointer event when the `visibility` property is set to `visible` and e.g. the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill` and `stroke` do not affect event processing.\n- `painted`\n - : SVG only (experimental for HTML). The element can only be the target of a pointer event when e.g. the mouse cursor is over the interior (i.e., 'fill') of the element and the `fill` property is set to a value other than `none`, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the `stroke` property is set to a value other than `none`. The value of the `visibility` property does not affect event processing.\n- `fill`\n - : 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. The values of the `fill` and `visibility` properties do not affect event processing.\n- `stroke`\n - : 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. The values of the `stroke` and `visibility` properties do not affect event processing.\n- `all`\n - : SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the `fill`, `stroke`, and `visibility` properties do not affect event processing.\n\n## Description\n\nWhen this property is unspecified, the same characteristics of the `visiblePainted` value apply to SVG content.\n\nIn addition to indicating that the element is not the target of pointer events, the value `none` instructs the pointer event to go \"through\" the element and target whatever is \"underneath\" that element instead.\n\nNote that preventing an element from being the target of pointer events by using `pointer-events` does _not_ necessarily mean that pointer event listeners on that element _cannot_ or _will not_ be triggered. If one of the element's children has `pointer-events` explicitly set to _allow_ that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go \"through\" the parent and target whatever is underneath).\n\nElements with `pointer-events: none` will still receive focus through sequential keyboard navigation using the Tab key.\n\nWe would like to provide finer grained control (than just `auto` and `none`) in HTML for which parts of an element will cause it to \"catch\" pointer events, and when. To help us in deciding how `pointer-events` should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of [this wiki page](https://wiki.mozilla.org/SVG:Pointer-events) (don't worry about keeping it tidy).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Disabling pointer events on all images\n\nThis example disables pointer events (clicking, dragging, hovering, etc.) on all images.\n\n```css\nimg {\n pointer-events: none;\n}\n```\n\n### Disabling pointer events on a single link\n\nThis example disables pointer events on the link to http\\://example.com.\n\n#### HTML\n\n```html\n\n```\n\n#### CSS\n\n```css\na[href=\"http://example.com\"] {\n pointer-events: none;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Disabling_pointer_events_on_a_single_link\", \"500\", \"100\")}}\n\n## Specifications\n\n{{Specifications}}\n\nIts extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its [level 4](https://wiki.csswg.org/spec/css4-ui#pointer-events).\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The SVG attribute {{SVGAttr(\"pointer-events\")}}\n- The SVG attribute {{SVGAttr(\"visibility\")}}\n- [WebKit Specs PointerEventsProperty](https://webkit.org/specs/PointerEventsProperty.html) extended for use in (X)HTML content\n- {{cssxref(\"user-select\")}} - controls whether the user can select text\n" }, { "property": "position_value", "document": "---\ntitle: \nslug: Web/CSS/position_value\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.position\n---\n{{CSSRef}}\n\nThe **``** (or **``**) [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the {{cssxref(\"background-position\")}} and {{cssxref(\"offset-anchor\")}} properties.\n\n> **Note:** The final position described by the `` value does not need to be inside the element's box.\n\n## Syntax\n\n![](position_type.png)The `` data type is specified with one or two keywords, with optional offsets.\n\nThe keyword values are `center`, `top`, `right`, `bottom`, and `left`. Each keyword represents either an edge of the element's box or the center line between two edges. Depending on the context, `center` represents either the center between the left and right edges, or the center between the top and bottom edges.\n\nIf specified, an offset can be either a relative {{cssxref(\"<percentage>\")}} value or an absolute {{cssxref(\"<length>\")}} value. Positive values are offset towards the right or the bottom, whichever is appropriate. Negative values are offset in the opposite directions.\n\nIf only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to `center`.\n\n```css\n/* 1-value syntax */\nkeyword /* Either the horizontal or vertical position; the other axis defaults to center */\nvalue /* The position on the x-axis; the y-axis defaults to 50% */\n\n/* 2-value syntax */\nkeyword keyword /* A keyword for each direction (the order is irrelevant) */\nkeyword value /* A keyword for horizontal position, value for vertical position */\nvalue keyword /* A value for horizontal position, keyword for vertical position */\nvalue value /* A value for each direction (horizontal then vertical) */\n\n/* 4-value syntax */\nkeyword value keyword value /* Each value is an offset from the keyword that precedes it */\n```\n\n### Formal syntax\n\n```css\n[\n [ left | center | right ] || [ top | center | bottom ]\n|\n [ left | center | right | | ]\n [ top | center | bottom | | ]?\n|\n [ [ left | right ] [ | ] ] &&\n [ [ top | bottom ] [ | ] ]\n]\n```\n\n> **Note:** The {{cssxref(\"background-position\")}} property also accepts a three-value syntax. This is not allowed in other properties that use ``.\n\n## Interpolation\n\nWhen animated, a point's abscissa and ordinate values are interpolated independently. However, because the speed of the interpolation is determined by a single [timing function](/en-US/docs/Web/CSS/easing-function) for both coordinates, the point will move in a straight line.\n\n## Examples\n\n### Valid positions\n\n```css example-good\ncenter\nleft\ncenter top\n\nright 8.5%\nbottom 12vmin right -6px\n\n10% 20%\n8rem 14px\n```\n\n### Invalid positions\n\n```plain example-bad\nleft right\nbottom top\n10px 15px 20px 15px\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n- [CSS Values and Units introduction](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)\n- {{cssxref(\"background-position\")}}\n- {{cssxref(\"gradient/radial-gradient\", \"radial-gradient()\")}}\n- {{cssxref(\"gradient/conic-gradient\", \"conic-gradient()\")}}\n" }, { "property": "print-color-adjust", "document": "---\ntitle: print-color-adjust\nslug: Web/CSS/print-color-adjust\ntags:\n - Adjusting Colors\n - CSS\n - CSS Colors\n - CSS Property\n - HTML Colors\n - HTML Styles\n - Layout\n - Reference\n - Styling HTML\n - Styling text\n - print-color-adjust\n - recipe:css-property\nbrowser-compat: css.properties.print-color-adjust\n---\n{{CSSRef}}\n\nThe **`print-color-adjust`** CSS property sets what, if anything, the {{Glossary(\"user agent\")}} may do to optimize the appearance of the element on the output device.\nBy default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.\n\n## Syntax\n\n```css\nprint-color-adjust: economy;\nprint-color-adjust: exact;\n\n/* Global values */\nprint-color-adjust: inherit;\nprint-color-adjust: initial;\nprint-color-adjust: revert;\nprint-color-adjust: revert-layer;\nprint-color-adjust: unset;\n```\n\nThe `print-color-adjust` property's value must be one of the following keywords.\n\n### Values\n\n- `economy`\n - : The user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the output for the device it's being rendered for.\n For example, when printing, a browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.\n This is the default.\n- **`exact`**\n - : The element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the browser might actually make things worse rather than better.\n The appearance of the content should not be changed except by the user's request.\n For example, a page might include a list of information with rows whose background colors alternate between white and a light grey.\n Removing the background color would decrease the legibility of the content.\n\n## Usage notes\n\nThere are a number of reasons a browser might wish to deviate from the specified appearance, such as:\n\n- The content uses text and background colors that will be too similar on the output device for legibility purposes.\n- If the output device is a printer, and to save ink, dark or extremely dense background images might be removed.\n- When printing a page, the browser might want to replace light-colored text on a dark background with dark text on a white background.\n\nAny options the user agent offers the user to allow them to control the use of color and images will take priority over the value of `print-color-adjust`.\nIn other words, there isn't any guarantee that `print-color-adjust` will do anything.\nNot only can the user override the behavior, but each user agent is allowed to decide for itself how to handle `print-color-adjust` in any given situation.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preserving low contrast\n\nIn this example, a box is shown which uses a {{cssxref(\"background-image\")}} and a translucent {{cssxref(\"gradient/linear-gradient\", \"linear-gradient()\")}} function atop a black background color to have a dark blue gradient behind medium red text.\nFor whatever reason, this is the desired appearance in any rendering environment, including on paper, so we also use `print-color-adjust: exact` to tell the browser not to make color or style adjustments to the box when rendering it.\n\n#### CSS\n\n```css\n.my-box {\n background-color: black;\n background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5));\n color: #900;\n width: 15rem;\n height: 6rem;\n text-align: center;\n font: 24px \"Helvetica\", sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n print-color-adjust: exact;\n}\n```\n\n#### HTML\n\n```html\n
      \n

      Need more contrast!

      \n
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Preserving_low_contrast\", 640, 120)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n- Other color-related properties: {{cssxref(\"color\")}}, {{cssxref(\"background-color\")}}, {{cssxref(\"border-color\")}}, {{cssxref(\"outline-color\")}}, {{cssxref(\"text-decoration-color\")}}, {{cssxref(\"text-emphasis-color\")}}, {{cssxref(\"text-shadow\")}}, {{cssxref(\"caret-color\")}}, and {{cssxref(\"column-rule-color\")}}\n- {{cssxref(\"background-image\")}}\n" }, { "property": "position", "document": "---\ntitle: position\nslug: Web/CSS/position\ntags:\n - CSS\n - CSS Positioning\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.position\n---\n{{CSSRef}}\n\nThe **`position`** [CSS](/en-US/docs/Web/CSS) property sets how an element is positioned in a document. The {{Cssxref(\"top\")}}, {{Cssxref(\"right\")}}, {{Cssxref(\"bottom\")}}, and {{Cssxref(\"left\")}} properties determine the final location of positioned elements.\n\n{{EmbedInteractiveExample(\"pages/css/position.html\")}}\n\n## Syntax\n\n```css\nposition: static;\nposition: relative;\nposition: absolute;\nposition: fixed;\nposition: sticky;\n\n/* Global values */\nposition: inherit;\nposition: initial;\nposition: revert;\nposition: revert-layer;\nposition: unset;\n```\n\n### Values\n\n- `static`\n - : The element is positioned according to the normal flow of the document. The {{cssxref(\"top\")}}, {{cssxref(\"right\")}}, {{cssxref(\"bottom\")}}, {{cssxref(\"left\")}}, and {{cssxref(\"z-index\")}} properties have _no effect_. This is the default value.\n- `relative`\n\n - : The element is positioned according to the normal flow of the document, and then offset _relative to itself_ based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were `static`.\n\n This value creates a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) when the value of `z-index` is not `auto`. Its effect on `table-*-group`, `table-row`, `table-column`, `table-cell`, and `table-caption` elements is undefined.\n\n- `absolute`\n\n - : The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial [containing block](/en-US/docs/Web/CSS/Containing_block). Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.\n\n This value creates a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) when the value of `z-index` is not `auto`. The margins of absolutely positioned boxes do not [collapse](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) with other margins.\n\n- `fixed`\n\n - : The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial [containing block](/en-US/docs/Web/CSS/Containing_block) established by the {{glossary(\"viewport\")}}, except when one of its ancestors has a `transform`, `perspective`, or `filter` property set to something other than `none` (see the [CSS Transforms Spec](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with `perspective` and `filter` contributing to containing block formation.) Its final position is determined by the values of `top`, `right`, `bottom`, and `left`.\n\n This value always creates a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). In printed documents, the element is placed in the same position on _every page_.\n\n- `sticky`\n\n - : The element is positioned according to the normal flow of the document, and then offset relative to its _nearest scrolling ancestor_ and [containing block](/en-US/docs/Web/CSS/Containing_block) (nearest block-level ancestor), including table-related elements, based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements.\n\n This value always creates a new [stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Note that a sticky element \"sticks\" to its nearest ancestor that has a \"scrolling mechanism\" (created when `overflow` is `hidden`, `scroll`, `auto`, or `overlay`), even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any \"sticky\" behavior (see the [GitHub issue on W3C CSSWG](https://github.com/w3c/csswg-drafts/issues/865)).\n\n## Description\n\n### Types of positioning\n\n- A **positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is either `relative`, `absolute`, `fixed`, or `sticky`. (In other words, it's anything except `static`.)\n- A **relatively positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `relative`. The {{Cssxref(\"top\")}} and {{Cssxref(\"bottom\")}} properties specify the vertical offset from its normal position; the {{Cssxref(\"left\")}} and {{Cssxref(\"right\")}} properties specify the horizontal offset.\n- An **absolutely positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `absolute` or `fixed`. The {{Cssxref(\"top\")}}, {{Cssxref(\"right\")}}, {{Cssxref(\"bottom\")}}, and {{Cssxref(\"left\")}} properties specify offsets from the edges of the element's [containing block](/en-US/docs/Web/CSS/Containing_block). (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents.\n- A **stickily positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `sticky`. It's treated as relatively positioned until its [containing block](/en-US/docs/Web/CSS/Containing_block) crosses a specified threshold (such as setting {{Cssxref(\"top\")}} to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as \"stuck\" until meeting the opposite edge of its [containing block](/en-US/docs/Web/CSS/Containing_block).\n\nMost of the time, absolutely positioned elements that have {{Cssxref(\"height\")}} and {{Cssxref(\"width\")}} set to `auto` are sized so as to fit their contents. However, non-[replaced](/en-US/docs/Web/CSS/Replaced_element), absolutely positioned elements can be made to fill the available vertical space by specifying both {{Cssxref(\"top\")}} and {{Cssxref(\"bottom\")}} and leaving {{Cssxref(\"height\")}} unspecified (that is, `auto`). They can likewise be made to fill the available horizontal space by specifying both {{Cssxref(\"left\")}} and {{Cssxref(\"right\")}} and leaving {{Cssxref(\"width\")}} as `auto`.\n\nExcept for the case just described (of absolutely positioned elements filling the available space):\n\n- If both `top` and `bottom` are specified (technically, not `auto`), `top` wins.\n- If both `left` and `right` are specified, `left` wins when {{Cssxref(\"direction\")}} is `ltr` (English, horizontal Japanese, etc.) and `right` wins when {{Cssxref(\"direction\")}} is `rtl` (Persian, Arabic, Hebrew, etc.).\n\n## Accessibility concerns\n\nEnsure that elements positioned with an `absolute` or `fixed` value do not obscure other content when the page is zoomed to increase text size.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n\n### Performance & Accessibility\n\nScrolling elements containing `fixed` or `sticky` content can cause performance and accessibility issues. As a user scrolls, the browser must repaint the sticky or fixed content in a new location. Depending on the content needing to be repainted, the browser performance, and the device's processing speed, the browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone. One solution is to add {{cssxref(\"will-change\", \"will-change: transform\")}} to the positioned elements to render the element in its own layer, improving repaint speed and therefore improving performance and accessibility.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Relative positioning\n\nRelatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements. In the example below, note how the other elements are placed as if \"Two\" were taking up the space of its normal location.\n\n#### HTML\n\n```html\n
      One
      \n
      Two
      \n
      Three
      \n
      Four
      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\n.box {\n display: inline-block;\n width: 100px;\n height: 100px;\n background: red;\n color: white;\n}\n\n#two {\n position: relative;\n top: 20px;\n left: 20px;\n background: blue;\n}\n```\n\n{{EmbedLiveSample('Relative_positioning', '', '200px')}}\n\n### Absolute positioning\n\nElements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its _nearest positioned ancestor_ (i.e., the nearest ancestor that is not `static`). If a positioned ancestor doesn't exist, it is positioned relative to the ICB (initial containing block — see also the [W3C definition](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)), which is the containing block of the document's root element.\n\n#### HTML\n\n```html\n

      Absolute positioning

      \n\n

      I am a basic block level element. My adjacent block level elements sit on new lines below me.

      \n\n

      By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.

      \n\n

      We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

      \n\n

      inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements wrap onto a new line if possible — like this one containing text, or just go on to a new line if not, much like this image will do:

      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\nbody {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background: aqua;\n border: 3px solid blue;\n padding: 10px;\n margin: 10px;\n}\n\nspan {\n background: red;\n border: 1px solid black;\n}\n\n.positioned {\n position: absolute;\n background: yellow;\n top: 30px;\n left: 30px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Absolute_positioning', '', '420px')}}\n\n### Fixed positioning\n\nFixed positioning is similar to absolute positioning, with the exception that the element's [containing block](/en-US/docs/Web/CSS/Containing_block) is the initial containing block established by the _viewport_, unless any ancestor has `transform`, `perspective`, or `filter` property set to something other than `none` (see [CSS Transforms Spec](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), which then causes that ancestor to take the place of the elements [containing block](/en-US/docs/Web/CSS/Containing_block). This can be used to create a \"floating\" element that stays in the same position regardless of scrolling. In the example below, box \"One\" is fixed at 80 pixels from the top of the page and 10 pixels from the left. Even after scrolling, it remains in the same place relative to the viewport.\n\n#### HTML\n\n```html\n
      \n

      \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.\n Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.\n Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.\n Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.\n Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.\n Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.\n Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.\n

      \n

      \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.\n Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.\n Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.\n Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.\n Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.\n Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.\n Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.\n

      \n
      One
      \n
      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\n.box {\n width: 100px;\n height: 100px;\n background: red;\n color: white;\n}\n\n#one {\n position: fixed;\n top: 80px;\n left: 10px;\n background: blue;\n}\n\n.outer {\n width: 500px;\n height: 300px;\n overflow: scroll;\n padding-left: 150px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Fixed_positioning', '', '300px')}}\n\n### Sticky positioning\n\nSticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. For instance...\n\n```css\n#one { position: sticky; top: 10px; }\n```\n\n...would position the element with id _one_ relatively until the viewport were scrolled such that the element would be less than 10 pixels from the top. Beyond that threshold, the element would be fixed to 10 pixels from the top.\n\nA common use for sticky positioning is for the headings in an alphabetized list. The \"B\" heading will appear just below the items that begin with \"A\" until they are scrolled offscreen. Rather than sliding offscreen with the rest of the content, the \"B\" heading will then remain fixed to the top of the viewport until all the \"B\" items have scrolled offscreen, at which point it will be covered up by the \"C\" heading, and so on.\n\nYou must specify a threshold with at least one of `top`, `right`, `bottom`, or `left` for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.\n\n#### HTML\n\n```html\n
      \n
      \n
      A
      \n
      Andrew W.K.
      \n
      Apparat
      \n
      Arcade Fire
      \n
      At The Drive-In
      \n
      Aziz Ansari
      \n
      \n
      \n
      C
      \n
      Chromeo
      \n
      Common
      \n
      Converge
      \n
      Crystal Castles
      \n
      Cursive
      \n
      \n
      \n
      E
      \n
      Explosions In The Sky
      \n
      \n
      \n
      T
      \n
      Ted Leo & The Pharmacists
      \n
      T-Pain
      \n
      Thrice
      \n
      TV On The Radio
      \n
      Two Gallants
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\ndl > div {\n background: #FFF;\n padding: 24px 0 0 0;\n}\n\ndt {\n background: #B8C1C8;\n border-bottom: 1px solid #989EA4;\n border-top: 1px solid #717D85;\n color: #FFF;\n font: bold 18px/21px Helvetica, Arial, sans-serif;\n margin: 0;\n padding: 2px 0 0 12px;\n position: -webkit-sticky;\n position: sticky;\n top: -1px;\n}\n\ndd {\n font: bold 20px/45px Helvetica, Arial, sans-serif;\n margin: 0;\n padding: 0 0 0 12px;\n white-space: nowrap;\n}\n\ndd + dd {\n border-top: 1px solid #CCC;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Sticky_positioning', '', '300px')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Learn CSS: Positioning](/en-US/docs/Learn/CSS/CSS_layout/Positioning)\n" }, { "property": "privacy_and_the__colon_visited_selector", "document": "---\ntitle: Privacy and the :visited selector\nslug: Web/CSS/Privacy_and_the_:visited_selector\ntags:\n - CSS\n - Guide\n - Pseudo-class\n - Reference\n - Security\n - Selectors\n---\n{{CSSRef}}\n\nBefore about 2010, the [CSS](/en-US/docs/Web/CSS) {{ cssxref(\":visited\") }} selector allowed websites to uncover a user's browsing history and figure out what sites the user had visited. This was done through {{domxref(\"window.getComputedStyle\")}} and other techniques. This process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of information about the user's identity.\n\nTo mitigate this problem, browsers have limited the amount of information that can be obtained from visited links.\n\n## Little white lies\n\nTo preserve users' privacy, Firefox and other browsers will lie to web applications under certain circumstances:\n\n- The `window.getComputedStyle` method, and similar functions such as {{ domxref(\"element.querySelector\") }}, will always return values indicating that a user has never visited any of the links on a page.\n- If you use a sibling selector such as `:visited + span`, the adjacent element (`span` in this example) will be styled as if the link were unvisited.\n- In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.\n\n## Limits to visited link styles\n\nYou can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:\n\n- {{ cssxref(\"color\") }}\n- {{ cssxref(\"background-color\") }}\n- {{ cssxref(\"border-color\") }} (and its sub-properties)\n- {{ cssxref(\"column-rule-color\") }}\n- {{ cssxref(\"outline-color\") }}\n- {{ cssxref(\"text-decoration-color\") }}\n- {{ cssxref(\"text-emphasis-color\") }}\n- The color parts of the {{SVGAttr(\"fill\")}} and {{SVGAttr(\"stroke\")}} attributes\n\nIn addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using [`rgba()`](), [`hsla()`](), or the [`transparent`](/en-US/docs/Web/CSS/color_value#transparent_keyword) keyword.\n\nHere is an example of how to use styles with the aforementioned restrictions:\n\n```css\n:link {\n outline: 1px dotted blue;\n background-color: white;\n /* The default value of background-color is `transparent`. You need to\n specify a different value, otherwise changes on :visited won't apply. */\n}\n\n:visited {\n outline-color: orange; /* Visited links have an orange outline */\n background-color: green; /* Visited links have a green background */\n color: yellow; /* Visited links have yellow colored text */\n}\n```\n\n## Impact on web developers\n\nOverall, these restrictions shouldn't affect web developers too significantly. They may, however, require the following changes to existing sites:\n\n- Using background images to style links based on whether they've been visited will no longer work, since only colors can be used to style visited links.\n- Colors that are otherwise transparent will fail to appear if styled in a `:visited` selector.\n\n## See also\n\n- [privacy-related changes coming to CSS :visited](https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) on Mozilla Hacks\n- [Plugging the CSS History Leak](https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/) on the Mozilla Security Blog\n- [Preventing attacks on a user's history through CSS :visited selectors](https://dbaron.org/mozilla/visited-privacy)\n" }, { "property": "pseudo-classes", "document": "---\ntitle: Pseudo-classes\nslug: Web/CSS/Pseudo-classes\ntags:\n - CSS\n - Guide\n - Overview\n - Pseudo-class\n - Reference\n - Selectors\nspec-urls:\n - https://html.spec.whatwg.org/multipage/#pseudo-classes\n - https://drafts.csswg.org/selectors/\n - https://drafts.csswg.org/css-ui/\n---\n{{CSSRef}}\n\nA [CSS](/en-US/docs/Web/CSS) **_pseudo-class_** is a keyword added to a selector that specifies a special state of the selected element(s). For example, {{CSSxRef(\":hover\")}} can be used to change a button's color when the user's pointer hovers over it.\n\n```css\n/* Any button over which the user's pointer is hovering */\nbutton:hover {\n color: blue;\n}\n```\n\nPseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{CSSxRef(\":visited\")}}, for example), the status of its content (like {{CSSxRef(\":checked\")}} on certain form elements), or the position of the mouse (like {{CSSxRef(\":hover\")}}, which lets you know if the mouse is over an element or not).\n\n> **Note:** In contrast to pseudo-classes, [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements) can be used to style a _specific part_ of an element.\n\n## Linguistic pseudo-classes\n\nThese pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.\n\n- {{CSSxRef(\":dir\")}}\n - : The directionality pseudo-class selects an element based on its directionality as determined by the document language.\n- {{CSSxRef(\":lang\")}}\n - : Select an element based on its content language.\n\n## Location pseudo-classes\n\nThese pseudo-classes relate to links, and to targeted elements within the current document.\n\n- {{CSSxRef(\":any-link\")}}\n - : Matches an element if the element would match either {{CSSxRef(\":link\")}} or {{CSSxRef(\":visited\")}}.\n- {{CSSxRef(\":link\")}}\n - : Matches links that have not yet been visited.\n- {{CSSxRef(\":visited\")}}\n - : Matches links that have been visited.\n- {{CSSxRef(\":local-link\")}}\n - : Matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.\n- {{CSSxRef(\":target\")}}\n - : Matches the element which is the target of the document URL.\n- {{CSSxRef(\":target-within\")}}\n - : Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.\n- {{CSSxRef(\":scope\")}}\n - : Represents elements that are a reference point for selectors to match against.\n\n## User action pseudo-classes\n\nThese pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.\n\n- {{CSSxRef(\":hover\")}}\n - : Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.\n- {{CSSxRef(\":active\")}}\n - : Matches when an item is being activated by the user, for example clicked on.\n- {{CSSxRef(\":focus\")}}\n - : Matches when an element has focus.\n- {{CSSxRef(\":focus-visible\")}}\n - : Matches when an element has focus and the user agent identifies that the element should be visibly focused.\n- {{CSSxRef(\":focus-within\")}}\n - : Matches an element to which {{CSSxRef(\":focus\")}} applies, plus any element that has a descendant to which {{CSSxRef(\":focus\")}} applies.\n\n## Time-dimensional pseudo-classes\n\nThese pseudo-classes apply when viewing something which has timing, such as a [WebVTT](/en-US/docs/Web/API/WebVTT_API) caption track.\n\n- {{CSSxRef(\":current\")}}\n - : Represents the element or ancestor of the element that is being displayed.\n- {{CSSxRef(\":past\")}}\n - : Represents an element that occurs entirely before the {{CSSxRef(\":current\")}} element.\n- {{CSSxRef(\":future\")}}\n - : Represents an element that occurs entirely after the {{CSSxRef(\":current\")}} element.\n\n## Resource state pseudo-classes\n\nThese pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.\n\n- {{CSSxRef(\":playing\")}}\n - : Represents a media element that is capable of playing when that element is playing.\n- {{CSSxRef(\":paused\")}}\n - : Represents a media element that is capable of playing when that element is paused.\n\n## The input pseudo-classes\n\nThese pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.\n\n- {{CSSxRef(\":autofill\")}}\n - : Matches when an {{htmlelement(\"input\")}} has been autofilled by the browser.\n- {{CSSxRef(\":enabled\")}}\n - : Represents a user interface element that is in an enabled state.\n- {{CSSxRef(\":disabled\")}}\n - : Represents a user interface element that is in a disabled state.\n- {{CSSxRef(\":read-only\")}}\n - : Represents any element that cannot be changed by the user.\n- {{CSSxRef(\":read-write\")}}\n - : Represents any element that is user-editable.\n- {{CSSxRef(\":placeholder-shown\")}}\n - : Matches an input element that is displaying placeholder text, for example from the HTML5 `placeholder` attribute.\n- {{CSSxRef(\":default\")}}\n - : Matches one or more UI elements that are the default among a set of elements.\n- {{CSSxRef(\":checked\")}}\n - : Matches when elements such as checkboxes and radiobuttons are toggled on.\n- {{CSSxRef(\":indeterminate\")}}\n - : Matches when UI elements are in an indeterminate state.\n- {{CSSxRef(\":blank\")}}\n - : Matches a user-input element which is empty, containing an empty string or other null input.\n- {{CSSxRef(\":valid\")}}\n - : Matches an element with valid contents. For example an input element with type 'email' which contains a validly formed email address.\n- {{CSSxRef(\":invalid\")}}\n - : Matches an element with invalid contents. For example an input element with type 'email' with a name entered.\n- {{CSSxRef(\":in-range\")}}\n - : Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.\n- {{CSSxRef(\":out-of-range\")}}\n - : Applies to elements with range limitations, for example a slider control, when the selected value is outside the allowed range.\n- {{CSSxRef(\":required\")}}\n - : Matches when a form element is required.\n- {{CSSxRef(\":optional\")}}\n - : Matches when a form element is optional.\n- {{CSSxRef(\":user-invalid\")}}\n - : Represents an element with incorrect input, but only when the user has interacted with it.\n\n## Tree-structural pseudo-classes\n\nThese pseudo-classes relate to the location of an element within the document tree.\n\n- {{CSSxRef(\":root\")}}\n - : Represents an element that is the root of the document. In HTML this is usually the `` element.\n- {{CSSxRef(\":empty\")}}\n - : Represents an element with no children other than white-space characters.\n- {{CSSxRef(\":nth-child\")}}\n - : Uses A*n*+B notation to select elements from a list of sibling elements.\n- {{CSSxRef(\":nth-last-child\")}}\n - : Uses A*n*+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.\n- {{CSSxRef(\":first-child\")}}\n - : Matches an element that is the first of its siblings.\n- {{CSSxRef(\":last-child\")}}\n - : Matches an element that is the last of its siblings.\n- {{CSSxRef(\":only-child\")}}\n - : Matches an element that has no siblings. For example a list item with no other list items in that list.\n- {{CSSxRef(\":nth-of-type\")}}\n - : Uses A*n*+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.\n- {{CSSxRef(\":nth-last-of-type\")}}\n - : Uses A*n*+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.\n- {{CSSxRef(\":first-of-type\")}}\n - : Matches an element that is the first of its siblings, and also matches a certain type selector.\n- {{CSSxRef(\":last-of-type\")}}\n - : Matches an element that is the last of its siblings, and also matches a certain type selector.\n- {{CSSxRef(\":only-of-type\")}}\n - : Matches an element that has no siblings of the chosen type selector.\n\n## Syntax\n\n```css\nselector:pseudo-class {\n property: value;\n}\n```\n\nLike regular classes, you can chain together as many pseudo-classes as you want in a selector.\n\n## Alphabetical index\n\nPseudo-classes defined by a set of CSS specifications include the following:\n\nA\n\n- {{CSSxRef(\":active\")}}\n- {{CSSxRef(\":any-link\")}}\n- {{CSSxRef(\":autofill\")}}\n\nB\n\n- {{CSSxRef(\":blank\")}} {{Experimental_Inline}}\n\nC\n\n- {{CSSxRef(\":checked\")}}\n- {{CSSxRef(\":current\")}} {{Experimental_Inline}}\n\nD\n\n- {{CSSxRef(\":default\")}}\n- {{CSSxRef(\":defined\")}}\n- {{CSSxRef(\":dir\", \":dir()\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":disabled\")}}\n\nE\n\n- {{CSSxRef(\":empty\")}}\n- {{CSSxRef(\":enabled\")}}\n\nF\n\n- {{CSSxRef(\":first\")}}\n- {{CSSxRef(\":first-child\")}}\n- {{CSSxRef(\":first-of-type\")}}\n- {{CSSxRef(\":fullscreen\")}}\n- {{CSSxRef(\":future\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":focus\")}}\n- {{CSSxRef(\":focus-visible\")}}\n- {{CSSxRef(\":focus-within\")}}\n\nH\n\n- {{CSSxRef(\":has\", \":has()\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":host\")}}\n- {{CSSxRef(\":host\", \":host()\")}}\n- {{CSSxRef(\":host-context\", \":host-context()\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":hover\")}}\n\nI\n\n- {{CSSxRef(\":indeterminate\")}}\n- {{CSSxRef(\":in-range\")}}\n- {{CSSxRef(\":invalid\")}}\n- {{CSSxRef(\":is\", \":is()\")}}\n\nL\n\n- {{CSSxRef(\":lang\", \":lang()\")}}\n- {{CSSxRef(\":last-child\")}}\n- {{CSSxRef(\":last-of-type\")}}\n- {{CSSxRef(\":left\")}}\n- {{CSSxRef(\":link\")}}\n- {{CSSxRef(\":local-link\")}} {{Experimental_Inline}}\n\nN\n\n- {{CSSxRef(\":not\", \":not()\")}}\n- {{CSSxRef(\":nth-child\", \":nth-child()\")}}\n- {{CSSxRef(\":nth-col\", \":nth-col()\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":nth-last-child\", \":nth-last-child()\")}}\n- {{CSSxRef(\":nth-last-col\", \":nth-last-col()\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":nth-last-of-type\", \":nth-last-of-type()\")}}\n- {{CSSxRef(\":nth-of-type\", \":nth-of-type()\")}}\n\nO\n\n- {{CSSxRef(\":only-child\")}}\n- {{CSSxRef(\":only-of-type\")}}\n- {{CSSxRef(\":optional\")}}\n- {{CSSxRef(\":out-of-range\")}}\n\nP\n\n- {{CSSxRef(\":past\")}} {{Experimental_Inline}}\n- {{CSSxRef(\":picture-in-picture\")}}\n- {{CSSxRef(\":placeholder-shown\")}}\n- {{CSSxRef(\":paused\")}}\n- {{CSSxRef(\":playing\")}}\n\nR\n\n- {{CSSxRef(\":read-only\")}}\n- {{CSSxRef(\":read-write\")}}\n- {{CSSxRef(\":required\")}}\n- {{CSSxRef(\":right\")}}\n- {{CSSxRef(\":root\")}}\n\nS\n\n- {{CSSxRef(\":scope\")}}\n- {{CSSxRef(\":state\", \":state()\")}} {{Experimental_Inline}}\n\nT\n\n- {{CSSxRef(\":target\")}}\n- {{CSSxRef(\":target-within\")}} {{Experimental_Inline}}\n\nU\n\n- {{CSSxRef(\":user-invalid\")}} {{Experimental_Inline}}\n\nV\n\n- {{CSSxRef(\":valid\")}}\n- {{CSSxRef(\":visited\")}}\n\nW\n\n- {{CSSxRef(\":where\", \":where()\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- [Pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements)\n" }, { "property": "pseudo-elements", "document": "---\ntitle: Pseudo-elements\nslug: Web/CSS/Pseudo-elements\ntags:\n - CSS\n - Guide\n - Overview\n - Pseudo-element\n - Reference\n - Selectors\nspec-urls: https://www.w3.org/TR/CSS22/selector.html#pseudo-element-selectors\n---\n{{CSSRef}}\n\nA CSS **pseudo-element** is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, {{CSSxRef(\"::first-line\")}} can be used to change the font of the first line of a paragraph.\n\n```css\n/* The first line of every

      element. */\np::first-line {\n color: blue;\n text-transform: uppercase;\n}\n```\n\n> **Note:** In contrast to pseudo-elements, {{CSSxRef(\"pseudo-classes\")}} can be used to style an element based on its _state_.\n\n## Syntax\n\n```css\nselector::pseudo-element {\n property: value;\n}\n```\n\nYou can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.\n\n> **Note:** As a rule, double colons (`::`) should be used instead of a single colon (`:`). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.\n\n## Index\n\nPseudo-elements defined by a set of CSS specifications include the following:\n\nA\n\n- {{CSSxRef(\"::after\", \"::after (:after)\")}}\n\nB\n\n- {{CSSxRef(\"::backdrop\")}}\n- {{CSSxRef(\"::before\", \"::before (:before)\")}}\n\nC\n\n- {{CSSxRef(\"::cue\")}}\n- {{CSSxRef(\"::cue-region\")}}\n\nF\n\n- {{CSSxRef(\"::first-letter\", \"::first-letter (:first-letter)\")}}\n- {{CSSxRef(\"::first-line\", \"::first-line (:first-line)\")}}\n- {{CSSxRef(\"::file-selector-button\")}}\n\nG\n\n- {{CSSxRef(\"::grammar-error\")}} {{Experimental_Inline}}\n\nM\n\n- {{CSSxRef(\"::marker\")}}\n\nP\n\n- {{CSSxRef(\"::part\", \"::part()\")}}\n- {{CSSxRef(\"::placeholder\")}}\n\nS\n\n- {{CSSxRef(\"::selection\")}}\n- {{CSSxRef(\"::slotted\", \"::slotted()\")}}\n- {{CSSxRef(\"::spelling-error\")}} {{Experimental_Inline}}\n\nT\n\n- {{CSSxRef(\"::target-text\")}} {{Experimental_Inline}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      BrowserLowest VersionSupport of
      Internet Explorer8.0:pseudo-element
      9.0:pseudo-element ::pseudo-element
      Firefox (Gecko)1.0 (1.0):pseudo-element
      1.0 (1.5):pseudo-element ::pseudo-element
      Opera4.0:pseudo-element
      7.0:pseudo-element ::pseudo-element
      Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
      \n\n## See also\n\n- [Pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes)\n" }, { "property": "padding-block-end", "document": "---\ntitle: padding-block-end\nslug: Web/CSS/padding-block-end\ntags:\n - CSS\n - CSS Logical Property\n - CSS Property\n - Reference\n - padding-block\n - padding-block-end\n - recipe:css-property\nbrowser-compat: css.properties.padding-block-end\n---\n{{CSSRef}}\n\nThe **`padding-block-end`** [CSS](/en-US/docs/Web/CSS) property defines the logical block end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.\n\n{{EmbedInteractiveExample(\"pages/css/padding-block-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\npadding-block-end: 10px; /* An absolute length */\npadding-block-end: 1em; /* A length relative to the text size */\n\n/* value */\npadding-block-end: 5%; /* A padding relative to the block container's width */\n\n/* Global values */\npadding-block-end: inherit;\npadding-block-end: initial;\npadding-block-end: revert;\npadding-block-end: revert-layer;\npadding-block-end: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : The size of the padding as a fixed value. Must be nonnegative.\n- {{cssxref(\"<percentage>\")}}\n - : The size of the padding as a percentage, relative to the inline size (_width_ in a horizontal language, defined by {{cssxref(\"writing-mode\")}}) of the [containing block](/en-US/docs/Web/CSS/Containing_block). Must be nonnegative.\n\n## Description\n\nThe `padding-block-end` property is defined in the specification as taking the same values as the {{cssxref(\"padding-top\")}} property. However, the physical property it maps to depends on the values set for {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, and {{cssxref(\"text-orientation\")}}. Therefore, it could map to {{cssxref(\"padding-bottom\")}}, {{cssxref(\"padding-right\")}}, or {{cssxref(\"padding-left\")}}\n\nIt relates to {{cssxref(\"padding-block-start\")}}, {{cssxref(\"padding-inline-start\")}}, and {{cssxref(\"padding-inline-end\")}}, which define the other paddings of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting block end padding for vertical text\n\n#### HTML\n\n```html\n

      \n

      Example text

      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n background-color: yellow;\n width: 120px;\n height: 120px;\n}\n\n.exampleText {\n writing-mode: vertical-lr;\n padding-block-end: 20px;\n background-color: #C8C800;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_block_end_padding_for_vertical_text\", 140, 140)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The mapped physical properties: {{cssxref(\"padding-top\")}}, {{cssxref(\"padding-right\")}}, {{cssxref(\"padding-bottom\")}}, and {{cssxref(\"padding-left\")}}\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"direction\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "paint-order", "document": "---\ntitle: paint-order\nslug: Web/CSS/paint-order\ntags:\n - CSS\n - Reference\n - SVG\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.paint-order\n---\n{{CSSRef}}\n\nThe **`paint-order`** [CSS](/en-US/docs/Web/CSS) property lets you control the order in which the fill and stroke (and painting markers) of text content and shapes are drawn.\n\n## Syntax\n\n```css\n/* Normal */\npaint-order: normal;\n\n/* Single values */\npaint-order: stroke; /* draw the stroke first, then fill and markers */\npaint-order: markers; /* draw the markers first, then fill and stroke */\n\n/* Multiple values */\npaint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */\npaint-order: markers stroke fill; /* draw markers, then stroke, then fill */\n\n/* Global values */\npaint-order: inherit;\npaint-order: initial;\npaint-order: revert;\npaint-order: unset;\n```\n\nIf no value is specified, the default paint order is `fill`, `stroke`, `markers`.\n\nWhen one value is specified, that one is painted first, followed by the other two in their default order relative to one another. When two values are specified, they will be painted in the order they are specified in, followed by the unspecified one.\n\n> **Note:** In the case of this property, markers are only appropriate when drawing SVG shapes involving the use of the `marker-*` properties (e.g. [`marker-start`](/en-US/docs/Web/SVG/Attribute/marker-start)) and [``](/en-US/docs/Web/SVG/Element/marker) element. They do not apply to HTML text, so in that case, you can only determine the order of `stroke` and `fill`.\n\n### Values\n\n- `normal`\n - : Paint the different items in normal paint order.\n- `stroke`,\n `fill`,\n `markers`\n - : Specify some or all of these values in the order you want them to be painted in.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Reversing the paint order of stroke and fill\n\n#### SVG\n\n```html\n\n stroke in front\n stroke behind\n\n```\n\n#### CSS\n\n```css\ntext {\n font-family: sans-serif;\n font-size: 50px;\n font-weight: bold;\n fill: black;\n stroke: red;\n stroke-width: 4px;\n}\n\n.stroke-behind {\n paint-order: stroke fill;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Reversing_the_paint_order_of_stroke_and_fill\", \"100%\", 165)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Tricks: paint-order](https://css-tricks.com/almanac/properties/p/paint-order/)\n" }, { "property": "ratio", "document": "---\ntitle: \nslug: Web/CSS/ratio\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.ratio\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types), used for describing [aspect ratios](/en-US/docs/Web/CSS/@media/aspect-ratio) in [media queries](/en-US/docs/Web/CSS/Media_Queries), denotes the proportion between two unitless values.\n\n## Syntax\n\nIn Media Queries Level 3, the `` data type consisted of a strictly positive {{cssxref(\"<integer>\")}} followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive {{cssxref(\"<integer>\")}}. Spaces before and after the slash are optional. The first number represents the width, while the second represents the height.\n\nIn Media Queries Level 4, the \\ date type is updated to consist of a strictly positive {{cssxref(\"<number>\")}} followed by a forward slash ('/', Unicode `U+002F SOLIDUS`) and a second strictly positive {{cssxref(\"<number>\")}}. In addition a single {{cssxref(\"<number>\")}} as a value is allowable.\n\n## Examples\n\n### Use in a media query\n\n```css\n@media screen and (min-aspect-ratio: 16/9) { ... }\n```\n\n### Common aspect ratios\n\n| | Ratio | Usage |\n| ----------------------------------- | ------------------- | ----------------------------------------------- |\n| ![](ratio4_3.png) | `4/3` | Traditional TV format in the twentieth century. |\n| ![](ratio16_9.png) | `16/9` | Modern \"widescreen\" TV format. |\n| ![Ratio1_1.85.png](ratio1_1.85.png) | `185/100` = `91/50` | The most common movie format since the 1960s. |\n| ![Ratio1_2.39.png](ratio1_2.39.png) | `239/100` | \"Widescreen,\" anamorphic movie format. |\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [`aspect-ratio`](/en-US/docs/Web/CSS/@media/aspect-ratio) media feature\n" }, { "property": "quotes", "document": "---\ntitle: quotes\nslug: Web/CSS/quotes\ntags:\n - CSS\n - CSS Property\n - Generated Content\n - Layout\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.quotes\n---\n{{CSSRef}}\n\nThe **`quotes`** [CSS](/en-US/docs/Web/CSS) property sets how the browser should render quotation marks that are added using the `open-quotes` or `close-quotes` values of the CSS [`content`](/en-US/docs/Web/CSS/content) property.\n\n{{EmbedInteractiveExample(\"pages/css/quotes.html\")}}\n\n## Syntax\n\n```css\n/* Keyword value */\nquotes: none;\nquotes: auto;\n\n/* values */\nquotes: \"«\" \"»\"; /* Set open-quote and close-quote to the French quotation marks */\nquotes: \"«\" \"»\" \"‹\" \"›\"; /* Set two levels of quotation marks */\n\n/* Global values */\nquotes: inherit;\nquotes: initial;\nquotes: revert;\nquotes: revert-layer;\nquotes: unset;\n```\n\n### Values\n\n- `none`\n - : The `open-quote` and `close-quote` values of the {{cssxref(\"content\")}} property produce no quotation marks.\n- `auto`\n - : Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the {{htmlattrxref(\"lang\")}} attribute).\n- `[ ]+`\n - : One or more pairs of {{cssxref(\"<string>\")}} values for `open-quote` and `close-quote`. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic quote marks\n\n#### HTML\n\n```html\nTo be or not to be. That's the question!\n```\n\n#### CSS\n\n```css\nq {\n quotes: '\"' '\"' \"'\" \"'\";\n}\nq::before {\n content: open-quote;\n}\nq::after {\n content: close-quote;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Basic_quote_marks', \"100%\", 60)}}\n\n### Auto quotes\n\nFor most browsers, the default value of `quotes` is `auto` (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.\n\n#### HTML\n\n```html\n
      \n Ceci est une citation française.\n
      \n
      \n
      \n Это русская цитата\n
      \n
      \n
      \n Dies ist ein deutsches Zitat\n
      \n
      \n
      \n This is an English quote.\n
      \n```\n\n#### CSS\n\n```css\n/*q {\n quotes: auto;\n}*/\n```\n\n#### Result\n\n{{EmbedLiveSample('Auto_quotes', \"100%\", 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{ Cssxref(\"content\") }}\n" }, { "property": "replaced_element", "document": "---\ntitle: Replaced elements\nslug: Web/CSS/Replaced_element\ntags:\n - CSS\n - Guide\n - Layout\n - Reference\n - css layout\n - rendering\n - replaced element\n---\n{{CSSRef}}\n\nIn [CSS](/en-US/docs/Web/CSS), a **replaced element** is an element whose representation is outside the scope of CSS; they're external objects whose representation is independent of the CSS formatting model.\n\nPut in simpler terms, they're elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. Some replaced elements, such as {{HTMLElement(\"iframe\")}} elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.\n\nThe only other impact CSS can have on a replaced element is that there are properties which support controlling the positioning of the element's content within its box. See [Controlling object position within the content box](#controlling_object_position_within_the_content_box) for further information.\n\n## Replaced elements\n\nTypical replaced elements are:\n\n- {{HTMLElement(\"iframe\")}}\n- {{HTMLElement(\"video\")}}\n- {{HTMLElement(\"embed\")}}\n- {{HTMLElement(\"img\")}}\n\nSome elements are treated as replaced elements only in specific cases:\n\n- {{HTMLElement(\"option\")}}\n- {{HTMLElement(\"audio\")}}\n- {{HTMLElement(\"canvas\")}}\n- {{HTMLElement(\"object\")}}\n- {{HTMLElement(\"applet\")}}\n\nHTML spec also says that an {{HTMLElement(\"input\")}} element can be replaced, because {{HTMLElement(\"input\")}} elements of the `\"image\"` type are replaced elements similar to {{HTMLElement(\"img\")}}. However, other form controls, including other types of {{HTMLElement(\"input\")}} elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term \"Widgets\").\n\nObjects inserted using the CSS {{cssxref(\"content\")}} property are _anonymous replaced elements_. They are \"anonymous\" because they don't exist in the HTML markup.\n\n## Using CSS with replaced elements\n\nCSS handles replaced elements specifically in some cases, like when calculating margins and some `auto` values.\n\nNote that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some CSS properties, such as {{cssxref(\"vertical-align\")}}. Only replaced elements can ever have intrinsic dimensions.\n\n### Controlling object position within the content box\n\nCertain CSS properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. These are defined by the {{SpecName(\"CSS3 Images\")}} and {{SpecName(\"CSS4 Images\")}} specifications:\n\n- {{cssxref(\"object-fit\")}}\n - : Specifies how the replaced element's content object should be fitted to the containing element's box.\n- {{cssxref(\"object-position\")}}\n - : Specifies the alignment of the replaced element's content object within the element's box.\n\n## See also\n\n- [HTML Spec](https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements)\n- {{CSS_key_concepts()}}\n" }, { "property": "resize", "document": "---\ntitle: resize\nslug: Web/CSS/resize\ntags:\n - Basic User Interface\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.resize\n---\n{{CSSRef}}\n\nThe **`resize`** [CSS](/en-US/docs/Web/CSS) property sets whether an element is resizable, and if so, in which directions.\n\n{{EmbedInteractiveExample(\"pages/css/resize.html\")}}\n\n`resize` does not apply to the following:\n\n- Inline elements\n- Block elements for which the {{cssxref(\"overflow\")}} property is set to `visible`\n\n## Syntax\n\n```css\n/* Keyword values */\nresize: none;\nresize: both;\nresize: horizontal;\nresize: vertical;\nresize: block;\nresize: inline;\n\n/* Global values */\nresize: inherit;\nresize: initial;\nresize: revert;\nresize: revert-layer;\nresize: unset;\n```\n\nThe `resize` property is specified as a single keyword value from the list below.\n\n### Values\n\n- `none`\n - : The element offers no user-controllable method for resizing it.\n- `both`\n - : The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.\n- `horizontal`\n - : The element displays a mechanism for allowing the user to resize it in the _horizontal_ direction.\n- `vertical`\n - : The element displays a mechanism for allowing the user to resize it in the _vertical_ direction.\n- `block` {{experimental_inline}}\n - : The element displays a mechanism for allowing the user to resize it in the _block_ direction (either horizontally or vertically, depending on the {{cssxref(\"writing-mode\")}} and {{cssxref(\"direction\")}} value).\n- `inline` {{experimental_inline}}\n - : The element displays a mechanism for allowing the user to resize it in the _inline_ direction (either horizontally or vertically, depending on the {{cssxref(\"writing-mode\")}} and {{cssxref(\"direction\")}} value).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Disabling resizability of textareas\n\nIn many browsers, {{HTMLElement(\"textarea\")}} elements are resizable by default. You may override this behavior with the `resize` property.\n\n#### HTML\n\n```html\n\n```\n\n#### CSS\n\n```css\ntextarea {\n resize: none; /* Disables resizability */\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Disabling_resizability_of_textareas\",\"200\",\"100\")}}\n\n### Using resize with arbitrary elements\n\nYou can use the `resize` property to make any element resizable. In the example below, a resizable {{HTMLElement(\"div\")}} contains a resizable paragraph ({{HTMLElement(\"p\")}} element).\n\n#### HTML\n\n```html\n
      \n

      \n This paragraph is resizable in all directions, because\n the CSS `resize` property is set to `both` on this element.\n

      \n
      \n```\n\n#### CSS\n\n```css\n.resizable {\n resize: both;\n overflow: scroll;\n border: 1px solid black;\n}\n\ndiv {\n height: 300px;\n width: 300px;\n}\n\np {\n height: 200px;\n width: 200px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Using_resize_with_arbitrary_elements\",\"450\",\"450\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{HTMLElement(\"textarea\")}}\n" }, { "property": "place-content", "document": "---\ntitle: place-content\nslug: Web/CSS/place-content\ntags:\n - CSS\n - CSS Box Alignment\n - CSS Property\n - Reference\n - place-content\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.place-content\n---\n{{CSSRef}}\n\nThe **`place-content`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) allows you to align content along both the block and inline directions at once (i.e. the {{CSSxRef(\"align-content\")}} and {{CSSxRef(\"justify-content\")}} properties) in a relevant layout system such as [Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout).\n\n{{EmbedInteractiveExample(\"pages/css/place-content.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`align-content`](/en-US/docs/Web/CSS/align-content)\n- [`justify-content`](/en-US/docs/Web/CSS/justify-content)\n\n## Syntax\n\n```css\n/* Positional alignment */\n/* align-content does not take left and right values */\nplace-content: center start;\nplace-content: start center;\nplace-content: end left;\nplace-content: flex-start center;\nplace-content: flex-end center;\n\n/* Baseline alignment */\n/* justify-content does not take baseline values */\nplace-content: baseline center;\nplace-content: first baseline space-evenly;\nplace-content: last baseline right;\n\n/* Distributed alignment */\nplace-content: space-between space-evenly;\nplace-content: space-around space-evenly;\nplace-content: space-evenly stretch;\nplace-content: stretch space-evenly;\n\n/* Global values */\nplace-content: inherit;\nplace-content: initial;\nplace-content: revert;\nplace-content: revert-layer;\nplace-content: unset;\n```\n\nThe first value is the {{CSSxRef(\"align-content\")}} property value, the second the {{CSSxRef(\"justify-content\")}} one.\n\n> **Note:** If the second value is not present, the first value is used for both, provided it is a valid value for both. If it is invalid for one or the other, the whole value will be invalid.\n\n### Values\n\n- `start`\n - : The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.\n- `end`\n - : The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.\n- `flex-start`\n - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start or cross-start side.\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`.\n- `flex-end`\n - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side.\n This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`.\n- `center`\n - : The items are packed flush to each other toward the center of the alignment container.\n- `left`\n - : The items are packed flush to each other toward the left edge of the alignment container. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `right`\n - : The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property's axis is not parallel with the inline axis, this value behaves like `start`.\n- `space-between`\n - : The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.\n- `baseline`, `first baseline`, `last baseline`\n - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.\n The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.\n- `space-around`\n - : The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.\n- `space-evenly`\n - : The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.\n- `stretch`\n - : If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef(\"max-height\")}}/{{CSSxRef(\"max-width\")}} (or equivalent functionality), so that the combined size exactly fills the alignment container\n- `safe`\n - : Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.\n- `unsafe`\n - : Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Placing content in a flex container\n\n#### HTML\n\n```html\n
      \n
      Lorem
      \n
      Lorem
      ipsum
      \n
      Lorem
      \n
      Lorem
      ipsum
      \n
      \n
      \n
      \n```\n\n```html hidden\nwriting-mode:;
      \ndirection:;
      \nplace-content:\n ;\n```\n\n```js hidden\nvar update = function () {\n document.getElementById(\"container\").style.placeContent = document.getElementById(\"alignContentAlignment\").value + \" \" + document.getElementById(\"justifyContentAlignment\").value;\n}\n\nvar alignContentAlignment = document.getElementById(\"alignContentAlignment\");\nalignContentAlignment.addEventListener(\"change\", update);\n\nvar justifyContentAlignment = document.getElementById(\"justifyContentAlignment\");\njustifyContentAlignment.addEventListener(\"change\", update);\n\nvar writingM = document.getElementById(\"writingMode\");\nwritingM.addEventListener(\"change\", function (evt) {\n document.getElementById(\"container\").style.writingMode = evt.target.value;\n});\nvar direction = document.getElementById(\"direction\");\ndirection.addEventListener(\"change\", function (evt) {\n document.getElementById(\"container\").style.direction = evt.target.value;\n});\n```\n\n#### CSS\n\n```css\n#container {\n display: flex;\n height:240px;\n width: 240px;\n flex-wrap: wrap;\n background-color: #8c8c8c;\n writing-mode: horizontal-tb; /* Can be changed in the live sample */\n direction: ltr; /* Can be changed in the live sample */\n place-content: flex-end center; /* Can be changed in the live sample */\n}\n\ndiv > div {\n border: 2px solid #8c8c8c;\n width: 50px;\n background-color: #a0c8ff;\n}\n\n.small {\n font-size: 12px;\n height: 40px;\n}\n\n.large {\n font-size: 14px;\n height: 50px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Placing_content_in_a_flex_container\", \"370\", \"300\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n- The {{CSSxRef(\"align-content\")}} property\n- The {{CSSxRef(\"justify-content\")}} property\n" }, { "property": "resolution", "document": "---\ntitle: \nslug: Web/CSS/resolution\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.resolution\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types), used for describing [resolutions](/en-US/docs/Web/CSS/@media/resolution) in [media queries](/en-US/docs/Web/CSS/Media_Queries), denotes the pixel density of an output device, i.e., its resolution.\n\nOn screens, the units are related to _CSS_ inches, centimeters, or pixels, not physical values.\n\n## Syntax\n\nThe `` data type consists of a strictly positive {{cssxref(\"<number>\")}} followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.\n\n### Units\n\n- `dpi`\n - : Represents the number of [dots per inch](https://en.wikipedia.org/wiki/Dots_per_inch). Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, `1dpi ≈ 0.39dpcm`.\n- `dpcm`\n - : Represents the number of [dots per centimeter](https://en.wikipedia.org/wiki/Dots_per_inch). As 1 inch is 2.54 cm, `1dpcm ≈ 2.54dpi`.\n- `dppx`\n - : Represents the number of dots per [`px`](/en-US/docs/Web/CSS/length#px) unit. Due to the 1:96 fixed ratio of CSS `in` to CSS `px`, `1dppx` is equivalent to `96dpi`, which corresponds to the default resolution of images displayed in CSS as defined by {{cssxref(\"image-resolution\")}}.\n- `x`\n - : Alias for `dppx`.\n\n> **Note:** Although the number `0` is always the same regardless of unit, the unit may not be omitted. In other words, `0` is invalid and does not represent `0dpi`, `0dpcm`, or `0dppx`.\n\n## Examples\n\n### Use in a media query\n\n```css\n@media print and (min-resolution: 300dpi) { ... }\n```\n\n### Valid resolutions\n\n```plain example-good\n96dpi\n50.82dpcm\n3dppx\n```\n\n### Invalid resolutions\n\n```plain example-bad\n72 dpi Spaces are not allowed between the number and the unit.\nten dpi The number must use digits only.\n0 The unit is required.\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [resolution](/en-US/docs/Web/CSS/@media/resolution) media feature\n- The {{cssxref(\"image-resolution\")}} property\n- [Using @media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)\n" }, { "property": "resolved_value", "document": "---\ntitle: Resolved value\nslug: Web/CSS/resolved_value\ntags:\n - CSS\n - Guide\n - Reference\nspec-urls: https://drafts.csswg.org/cssom/#resolved-values\n---\n{{CSSRef}}\n\nThe **resolved value** of a [CSS](/en-US/docs/Web/CSS) property is the value returned by {{domxref(\"Window.getComputedStyle\", \"getComputedStyle()\")}}.\n\nFor most properties, it is the [computed value](/en-US/docs/Web/CSS/computed_value), but for a few legacy properties (including {{cssxref(\"width\")}} and {{cssxref(\"height\")}}), it is instead the [used value](/en-US/docs/Web/CSS/used_value). See the specification link below for more per-property details.\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- {{domxref(\"window.getComputedStyle\")}}\n- {{CSS_key_concepts}}\n" }, { "property": "revert-layer", "document": "---\ntitle: revert-layer\nslug: Web/CSS/revert-layer\ntags:\n - CSS\n - CSS Value\n - Keyword\n - Reference\n - revert-layer\nbrowser-compat: css.types.global_keywords.revert-layer\n---\n{{CSSRef}}\n\nThe **`revert-layer`** CSS keyword rolls back the value of a property in a {{cssxref(\"@layer\", \"cascade layer\")}} to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of the property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.\n\nIf there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the {{cssxref(\"computed_value\", \"computed value\")}} derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous [style origin](/en-US/docs/Glossary/Style_origin).\n\nThis keyword can be applied to any CSS property, including the CSS shorthand property {{cssxref(\"all\")}}.\n\n## Revert-layer vs revert\n\nThe `revert-layer` keyword lets you rollback styles to the ones specified in previous cascade layers. All cascade layers exist in the [author origin](/en-US/docs/Glossary/Style_origin). The {{cssxref(\"revert\")}} keyword, in comparison, lets you remove styles applied in the author origin and roll back to styles in user origin or user-agent origin.\n\nThe `revert-layer` keyword is ideally meant for applying on properties inside a layer. However, if the `revert-layer` keyword is set on a property outside a layer, the value of the property will roll back to the default value established by the user agent's stylesheet (or by user styles, if any exist). So in this scenario, the `revert-layer` keyword behaves like the {{cssxref(\"revert\")}} keyword.\n\n## Examples\n\n### Default cascade layer behavior\n\nIn the example below, two cascade layers are defined in the CSS, `base` and `special`. By default, rules in the `special` layer will override competing rules in the `base` layer because `special` is listed after `base` in the `@layer` declaration statement.\n\n#### HTML\n\n```html\n

      This example contains a list.

      \n\n
        \n
      • Item one
        • \n
      • Item two
        • \n
      • Item three
        • \n
      \n```\n\n#### CSS\n\n```css\n@layer base, special;\n\n@layer special {\n .item {\n color: red;\n }\n}\n\n@layer base {\n .item {\n color: blue;\n }\n .feature {\n color: green;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Default_cascade_layer_behavior')}}\n\nAll the `
    • ` elements match the `item` rule in the `special` layer and are red. This is the default cascade layer behavior, where rules in the `special` layer take precedence over rules in the `base` layer.\n\n### Revert to style in previous cascade layer\n\nLet's examine how the `revert-layer` keyword changes the default cascade layer behavior. For this example, the `special` layer contains an additional `feature` rule targeting the first `
    • ` element. The `color` property in this rule is set to `revert-layer`.\n\n#### HTML\n\n```html\n

      This example contains a list.

      \n\n
        \n
      • Item one
        • \n
      • Item two
        • \n
      • Item three
        • \n
      \n```\n\n#### CSS\n\n```css\n@layer base, special;\n\n@layer special {\n .item {\n color: red;\n }\n .feature {\n color: revert-layer;\n }\n}\n\n@layer base {\n .item {\n color: blue;\n }\n .feature {\n color: green;\n }\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Revert_to_style_in_previous_cascade_layer')}}\n\nWith `color` set to `revert-layer`, the `color` property value rolls back to the value in the matching `feature` rule in the previous layer `base`, and so 'Item one' is now green.\n\n### Revert to style in previous origin\n\nThis example shows the `revert-layer` keyword behavior when there is no cascade layer to revert to _and_ there is no matching CSS rule in the current layer to inherit the property value.\n\n#### HTML\n\n```html\n

      This example contains a list.

      \n\n
        \n
      • Item one
        • \n
      • Item two
        • \n
      • Item three
        • \n
      \n```\n\n#### CSS\n\n```css\n@layer base {\n .item {\n color: revert-layer;\n }\n}\n```\n\n{{EmbedLiveSample('Revert_to_style_in_previous_origin')}}\n\nThe style for all `
    • ` elements rolls back to the defaults in the user-agent origin.\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Use the {{cssxref(\"initial\")}} keyword to set a property to its initial value.\n- Use the {{cssxref(\"inherit\")}} keyword to make an element's property the same as its parent.\n- Use the {{cssxref(\"revert\")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).\n- Use the {{cssxref(\"unset\")}} keyword to set a property to its inherited value if it inherits or to its initial value if not.\n- The {{cssxref(\"all\")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.\n" }, { "property": "revert", "document": "---\ntitle: revert\nslug: Web/CSS/revert\ntags:\n - CSS\n - CSS Cascade\n - CSS Value\n - Cascade\n - Keyword\n - Layout\n - Reference\n - Style\n - revert\nbrowser-compat: css.types.global_keywords.revert\n---\n{{CSSRef}}\n\nThe **`revert`** CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current **{{Glossary(\"style origin\")}}** to the current element. Thus, it resets the property to its inherited value if it inherits from its parent or to the default value established by the user agent's stylesheet (or by user styles, if any exist). It can be applied to any CSS property, including the CSS shorthand property {{cssxref(\"all\")}}.\n\nThis keyword removes from the cascade all of the styles that have been overridden until the style being rolled back to is reached.\n\n- If used by a site's own styles (the author origin), `revert` rolls back the property's cascaded value to the user's custom style, if one exists; otherwise, it rolls the style back to the user agent's default style.\n- If used in a user's custom stylesheet, or if the style was applied by the user (the user origin), `revert` rolls back the cascaded value to the user agent's default style.\n- If used within the user agent's default styles, this keyword is functionally equivalent to {{cssxref(\"unset\")}}.\n\nThe `revert` keyword works exactly the same as [`unset`](/en-US/docs/Web/CSS/unset) in many cases. The only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).\n\nRevert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). So if you have a `color: green` for all sections and `all: revert` on a specific section, the color of the section will be black. But if you have a rule to make all paragraphs red, then all paragraphs will still be red in all sections.\n\n> **Note:** Revert is just a value. It is still possible to override the `revert` value using [specificity](/en-US/docs/Web/CSS/Specificity).\n\n> **Note:** The `revert` keyword is different from and should not be confused with the {{cssxref(\"initial\")}} keyword, which uses the [initial value](/en-US/docs/Web/CSS/initial_value) defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors.\n>\n> For example, the [initial value](/en-US/docs/Web/CSS/initial_value) for the [`display`](en-US/docs/Web/CSS/display#formal_definition) property is `inline`, whereas a normal user-agent stylesheet sets the default {{cssxref(\"display\")}} value of {{HTMLElement(\"div\")}}s to `block`, of {{HTMLElement(\"table\")}}s to `table`, etc.\n\n## Examples\n\n### Revert vs unset\n\nAlthough `revert` and `unset` are similar, they differ for some properties for some elements.\n\nSo in the below example, we set custom [`font-weight`](/en-US/docs/Web/CSS/font-weight#formal_definition), but then try to `revert` and `unset` it inline in the HTML document. The `revert` keyword will revert the text to bold because that is the default value for headers in most browsers. The `unset` keyword will keep the text normal because that is the initial value for the `font-weight` property.\n\n#### HTML\n\n```html\n

      \n This should have its original font-weight (bold) and color: black\n

      \n

      Just some text

      \n

      \n This will still have font-weight: normal, but color: black\n

      \n

      Just some text

      \n```\n\n#### CSS\n\n```css\nh3 {\n font-weight: normal;\n color: blue;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Revert_vs_unset', 0, 200)}}\n\n### Revert all\n\nReverting all values is useful in a situation where you've made several style changes and then you want to revert to the browser default values. So in the above example, instead of reverting `font-weight` and `color` separately, you could just revert all of them at once - by applying the `revert` keyword on `all`.\n\n#### HTML\n\n```html\n

      This will have custom styles

      \n

      Just some text

      \n

      \n This should be reverted to browser/user defaults.\n

      \n

      Just some text

      \n```\n\n#### CSS\n\n```css\nh3 {\n font-weight: normal;\n color: blue;\n border-bottom: 1px solid grey;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Revert_all', 0, 200)}}\n\n### Revert on a parent\n\nReverting effectively removes the value for the element you select with some rule and this happens only for that element. To illustrate this, we will set a green color on a section and red color on a paragraph.\n\n#### HTML\n\n```html\n
      \n

      This will be dark green

      \n

      Text in paragraph will be red.

      \n This will also be dark green.\n
      \n
      \n

      This will be black

      \n

      Text in paragraph will be red.

      \n This will also be black.\n
      \n```\n\n#### CSS\n\n```css\nsection { color: darkgreen }\np { color: red }\nsection.with-revert { color: revert }\n```\n\nNotice how paragraph still has a red color even though a color property for the section was reverted. Also note that both the header and plain text node are black. This is exactly the same as if `section { color: darkgreen }` would not exist for the second section.\n\n#### Result\n\n{{EmbedLiveSample('Revert_on_a_parent')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Use the {{cssxref(\"initial\")}} keyword to set a property to its initial value.\n- Use the {{cssxref(\"inherit\")}} keyword to make an element's property the same as its parent.\n- Use the {{cssxref(\"revert-layer\")}} keyword to reset a property to the value established in a previous cascade layer.\n- Use the {{cssxref(\"unset\")}} keyword to set a property to its inherited value if it inherits or to its initial value if not.\n- The {{cssxref(\"all\")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.\n" }, { "property": "right", "document": "---\ntitle: right\nslug: Web/CSS/right\ntags:\n - CSS\n - CSS Positioning\n - CSS Property\n - Layout\n - Reference\n - Web\n - recipe:css-property\nbrowser-compat: css.properties.right\n---\n{{CSSRef}}\n\nThe **`right`** [CSS](/en-US/docs/Web/CSS) property participates in specifying the horizontal position of a [positioned element](/en-US/docs/Web/CSS/position). It has no effect on non-positioned elements.\n\n{{EmbedInteractiveExample(\"pages/css/right.html\")}}\n\n## Syntax\n\n```css\n/* values */\nright: 3px;\nright: 2.4em;\n\n/* s of the width of the containing block */\nright: 10%;\n\n/* Keyword value */\nright: auto;\n\n/* Global values */\nright: inherit;\nright: initial;\nright: revert;\nright: revert-layer;\nright: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n\n - : A negative, null, or positive {{cssxref(\"<length>\")}} that represents:\n\n - for _absolutely positioned elements_, the distance to the right edge of the containing block.\n - for _relatively positioned elements_, the distance that the element is moved to the left of its normal position.\n\n- {{cssxref(\"<percentage>\")}}\n - : A {{cssxref(\"<percentage>\")}} of the containing block's width.\n- `auto`\n\n - : Specifies that:\n\n - for _absolutely positioned elements_, the position of the element is based on the {{Cssxref(\"left\")}} property, while `width: auto` is treated as a width based on the content; or if `left` is also `auto`, the element is positioned where it should horizontally be positioned if it were a static element.\n - for _relatively positioned elements_, the distance of the element from its normal position is based on the {{Cssxref(\"left\")}} property; or if `left` is also `auto`, the element is not moved horizontally at all.\n\n- `inherit`\n - : Specifies that the value is the same as the computed value from its parent element (which might not be its containing block). This computed value is then handled as if it were a {{cssxref(\"<length>\")}}, {{cssxref(\"<percentage>\")}}, or the `auto` keyword.\n\n## Description\n\nThe effect of `right` depends on how the element is positioned (i.e., the value of the {{cssxref(\"position\")}} property):\n\n- When `position` is set to `absolute` or `fixed`, the `right` property specifies the distance between the element's right edge and the right edge of its containing block.\n- When `position` is set to `relative`, the `right` property specifies the distance the element's right edge is moved to the left from its normal position.\n- When `position` is set to `sticky`, the `right` property is used to compute the sticky-constraint rectangle.\n- When `position` is set to `static`, the `right` property has _no effect_.\n\nWhen both {{cssxref(\"left\")}} and `right` are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both -- for example, if a `width` is declared -- the position of the element is _over-constrained_. When this is the case, the `left` value has precedence when the container is left-to-right; the `right` value has precedence when the container is right-to-left.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Absolute and relative positioning using right\n\n#### HTML\n\n```html\n
      Relatively positioned
      \n
      Absolutely positioned
      \n```\n\n#### CSS\n\n```css\n#relative {\n width: 100px;\n height: 100px;\n background-color: #FFC7E4;\n position: relative;\n top: 20px;\n left: 20px;\n}\n\n#absolute {\n width: 100px;\n height: 100px;\n background-color: #FFD7C2;\n position: absolute;\n bottom: 10px;\n right: 20px;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Absolute_and_relative_positioning_using_right', 500, 220) }}\n\n### Declaring both left and right\n\nWhen both `left` and `right` are declared, the element will stretch to meet both, unless other constraints prevent it from doing so. If the element will not stretch or shrink to meet both. When the position of the element is _overspecified_, the precedence is based on the container's direction: The `left` will take precedence if the container's direction is left-to-right. The `right` will take precedence if the container's direction is right-to-left.\n\n#### HTML\n\n```html\n
      Parent\n
      No width
      \n
      width: 100px
      \n
      \n```\n\n#### CSS\n\n```css\ndiv {\n outline: 1px solid #CCCCCC;\n}\n#parent {\n width: 200px;\n height: 200px;\n background-color: #FFC7E4;\n position: relative;\n}\n/* declare both a left and a right */\n#width,\n#noWidth {\n background-color: #C2FFD7;\n position: absolute;\n left: 0;\n right: 0;\n}\n/* declare a width */\n#width {\n width: 100px;\n top: 60px;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Declaring_both_left_and_right', 500, 220) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"inset\")}}, the shorthand for all related properties: {{cssxref(\"top\")}}, {{cssxref(\"bottom\")}}, {{cssxref(\"left\")}}, and {{cssxref(\"right\")}}\n- The mapped logical properties: {{cssxref(\"inset-block-start\")}}, {{cssxref(\"inset-block-end\")}}, {{cssxref(\"inset-inline-start\")}}, and {{cssxref(\"inset-inline-end\")}} and the shorthands {{cssxref(\"inset-block\")}} and {{cssxref(\"inset-inline\")}}\n- {{cssxref(\"position\")}}\n" }, { "property": "rotate", "document": "---\ntitle: rotate\nslug: Web/CSS/rotate\ntags:\n - CSS\n - CSS Property\n - Reference\n - Rotate\n - Transforms\n - angle\n - recipe:css-property\n - rotation\nbrowser-compat: css.properties.rotate\n---\n{{CSSRef}}\n\nThe **`rotate`** [CSS](/en-US/docs/Web/CSS) property allows you to specify rotation transforms individually and independently of the {{CSSxRef(\"transform\")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.\n\n## Syntax\n\n```css\n/* Keyword values */\nrotate: none;\n\n/* Angle value */\nrotate: 90deg;\nrotate: 0.25turn;\nrotate: 1.57rad;\n\n/* x, y, or z axis name plus angle */\nrotate: x 90deg;\nrotate: y 0.25turn;\nrotate: z 1.57rad;\n\n/* Vector plus angle value */\nrotate: 1 1 1 90deg;\n\n/* Global values */\nrotate: inherit;\nrotate: initial;\nrotate: revert;\nrotate: revert-layer;\nrotate: unset;\n```\n\n### Values\n\n- angle value\n - : An {{CSSxRef(\"<angle>\")}} specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a `rotate()` (2D rotation) function.\n- x, y, or z axis name plus angle value\n - : The name of the axis you want to rotate the affected element around (`\"x\"`, \"`y`\", or \"`z\"`), plus an {{CSSxRef(\"<angle>\")}} specifying the angle to rotate the element through. Equivalent to a `rotateX()`/`rotateY()`/`rotateZ()` (3D rotation) function.\n- vector plus angle value\n - : Three {{CSSxRef(\"<number>\")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{CSSxRef(\"<angle>\")}} specifying the angle to rotate the element through. Equivalent to a `rotate3d()` (3D rotation) function.\n- `none`\n - : Specifies that no rotation should be applied.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Rotate an element on hover\n\n#### HTML\n\n```html\n
      \n

      Rotation

      \n
      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n}\n\ndiv {\n width: 150px;\n margin: 0 auto;\n}\n\np {\n padding: 10px 5px;\n border: 3px solid black;\n border-radius: 20px;\n width: 150px;\n font-size: 1.2rem;\n text-align: center;\n}\n\n.rotate {\n transition: rotate 1s;\n}\n\ndiv:hover .rotate {\n rotate: 1 -0.5 1 180deg;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Rotate_an_element_on_hover\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref('translate')}}\n- {{cssxref('scale')}}\n- {{cssxref('transform')}}\n\nNote: `skew` is not an independent `transform` value\n" }, { "property": "row-gap", "document": "---\ntitle: row-gap (grid-row-gap)\nslug: Web/CSS/row-gap\ntags:\n - CSS\n - CSS Flexible Boxes\n - CSS Grid\n - CSS Property\n - Reference\n - recipe:css-property\n - row-gap\nbrowser-compat: css.properties.row-gap\n---\n{{CSSRef}}\n\nThe **`row-gap`** [CSS](/en-US/docs/Web/CSS) property sets the size of the gap ({{glossary(\"gutters\",\"gutter\")}}) between an element's rows.\n\n{{EmbedInteractiveExample(\"pages/css/row-gap.html\")}}\n\n## Syntax\n\n```css\n/* values */\nrow-gap: 20px;\nrow-gap: 1em;\nrow-gap: 3vmin;\nrow-gap: 0.5cm;\n\n/* value */\nrow-gap: 10%;\n\n/* Global values */\nrow-gap: inherit;\nrow-gap: initial;\nrow-gap: revert;\nrow-gap: revert-layer;\nrow-gap: unset;\n```\n\n### Values\n\n- ``\n - : Is the width of the gutter separating the rows. {{CSSxRef(\"<percentage>\")}} values are relative to the dimension of the element.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Flex layout\n\n#### HTML\n\n```html\n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n#flexbox {\n display: flex;\n flex-wrap: wrap;\n width: 300px;\n row-gap: 20px;\n}\n\n#flexbox > div {\n border: 1px solid green;\n background-color: lime;\n flex: 1 1 auto;\n width: 100px;\n height: 50px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Flex_layout', \"auto\", \"120px\")}}\n\n### Grid layout\n\n#### HTML\n\n```html\n
      \n
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n#grid {\n display: grid;\n height: 200px;\n grid-template-columns: 200px;\n grid-template-rows: repeat(3, 1fr);\n row-gap: 20px;\n}\n\n#grid > div {\n border: 1px solid green;\n background-color: lime;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Grid_layout', 'auto', 120)}}\n\n## Specifications\n\n{{Specifications(\"css.properties.row-gap.grid_context\")}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{CSSxRef(\"column-gap\")}}, {{CSSxRef(\"gap\")}}\n- Grid Layout Guide: _[Basic concepts of grid layout - Gutters](/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_\n" }, { "property": "scale", "document": "---\ntitle: scale\nslug: Web/CSS/scale\ntags:\n - CSS\n - CSS Property\n - Reference\n - Transforms\n - recipe:css-property\nbrowser-compat: css.properties.scale\n---\n{{CSSRef}}\n\nThe **`scale`** [CSS](/en-US/docs/Web/CSS) property allows you to specify scale transforms individually and independently of the {{CSSxRef(\"transform\")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.\n\n## Syntax\n\n```css\n/* Keyword values */\nscale: none;\n\n/* Single values */\n/* values of more than 1 make the element grow */\nscale: 2;\n/* values of less than 1 make the element shrink */\nscale: 0.5;\n\n/* Two values */\nscale: 2 0.5;\n\n/* Three values */\nscale: 2 0.5 2;\n\n/* Global values */\nscale: inherit;\nscale: initial;\nscale: revert;\nscale: revert-layer;\nscale: unset;\n```\n\n### Values\n\n- Single number value\n - : A {{CSSxRef(\"<number>\")}} specifying a scale factor to make the affected element scale by the same factor along both the X and Y axes. Equivalent to a `scale()` (2D scaling) function with a single value specified.\n- Two length/percentage values\n - : Two {{CSSxRef(\"<number>\")}}s that specify the X and Y axis scaling values (respectively) of a 2D scale. Equivalent to a `scale()` (2D scaling) function with two values specified.\n- Three length/percentage values\n - : Three {{CSSxRef(\"<number>\")}}s that specify the X, Y, and Z axis scaling values (respectively) of a 3D scale. Equivalent to a `scale3d()` (3D scaling) function.\n- `none`\n - : Specifies that no scaling should be applied.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Scaling an element on hover\n\n#### HTML\n\n```html\n
      \n

      Scaling

      \n
      \n```\n\n#### CSS\n\n```css\n* {\n box-sizing: border-box;\n}\n\nhtml {\n font-family: sans-serif;\n}\n\ndiv {\n width: 150px;\n margin: 0 auto;\n}\n\np {\n padding: 10px 5px;\n border: 3px solid black;\n border-radius: 20px;\n width: 150px;\n font-size: 1.2rem;\n text-align: center;\n}\n\n.scale {\n transition: scale 1s;\n}\n\ndiv:hover .scale {\n scale: 2 0.7;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Scaling_an_element_on_hover\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref('translate')}}\n- {{cssxref('rotate')}}\n- {{cssxref('transform')}}\n\nNote: skew is not an independent transform value\n" }, { "property": "ruby-position", "document": "---\ntitle: ruby-position\nslug: Web/CSS/ruby-position\ntags:\n - CSS\n - CSS Property\n - CSS Ruby\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.ruby-position\n---\n{{CSSRef}}\n\nThe **`ruby-position`** CSS property defines the position of a ruby element relatives to its base element. It can be positioned over the element (`over`), under it (`under`), or between the characters on their right side (`inter-character`).\n\n{{EmbedInteractiveExample(\"pages/css/ruby-position.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nruby-position: over;\nruby-position: under;\nruby-position: inter-character;\nruby-position: alternate;\n\n/* Global values */\nruby-position: inherit;\nruby-position: initial;\nruby-position: revert;\nruby-position: revert-layer;\nruby-position: unset;\n```\n\n### Values\n\n- `over`\n - : ![Over example](screen_shot_2015-03-04_at_13.02.20.png)Is a keyword indicating that the ruby has to be placed over the main text for horizontal scripts and right to it for vertical scripts.\n- `under`\n - : ![Under example](screen_shot_2015-03-04_at_13.02.07.png)Is a keyword indicating that the ruby has to be placed under the main text for horizontal scripts and left to it for vertical scripts.\n- `inter-character`\n - : Is a keyword indicating that the ruby has to be placed between the different characters.\n- `alternate`\n - : Is a keyword indicating that the ruby alternates between over and under, when there are multiple levels of annotation.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Ruby positioned over the text\n\n#### HTML\n\n```html\n\n 超電磁砲\n （レールガン）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-position:over;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Ruby_positioned_over_the_text\", 100, 40)}}\n\n### Ruby positioned under the text\n\n#### HTML\n\n```html\n\n 超電磁砲\n （レールガン）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-position:under;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Ruby_positioned_under_the_text\", 100, 40)}}\n\n### Ruby alternate\n\n#### HTML\n\n```html\n\n ABC\n Above\n Below\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-position: alternate; /* this is also the initial value */\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Ruby_alternate\", 100, 40)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- HTML Ruby elements: {{HTMLElement(\"ruby\")}}, {{HTMLElement(\"rt\")}}, {{HTMLElement(\"rp\")}}, and {{HTMLElement(\"rtc\")}}.\n- CSS Ruby properties: {{cssxref(\"ruby-align\")}}, {{cssxref(\"ruby-merge\")}}.\n" }, { "property": "scaling_of_svg_backgrounds", "document": "---\ntitle: Scaling of SVG backgrounds\nslug: Web/CSS/Scaling_of_SVG_backgrounds\ntags:\n - CSS\n - CSS Background\n - Guide\n - Images\n - Reference\n - SVG\n---\n{{CSSRef}}\n\nGiven the flexibility of SVG images, there's a lot to keep in mind when using them as background images with the {{ cssxref(\"background-image\") }} property, and even more to keep in mind when also scaling them using the {{ cssxref(\"background-size\") }} property. This article describes how scaling of SVG images is handled when using these properties.\n\n## The algorithm, in summary\n\nThe algorithm can for the most part be summarized by these four rules. There are some edge cases that aren't covered by these rules, but this covers the majority of cases.\n\n1. If {{ cssxref(\"background-size\") }} specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins.\n2. If the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio.\n3. If the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins.\n4. If none of the above cases are met, the image is rendered at the same size as the background area.\n\nIt's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. An SVG image with fixed dimensions will be treated just like a raster image of the same size.\n\n> **Note:** If you are trying to stretch your SVG to a different aspect ratio with CSS—for example in order to stretch it over the page background—make sure your SVG includes `preserveAspectRatio=\"none\"`. Find out more about {{svgattr(\"preserveAspectRatio\")}}.\n\n## Source image examples\n\nBefore diving in to look at the results of using different kinds of source images and seeing how they look when used with {{ cssxref(\"background-size\") }}, it would be helpful to look at a few example source images that have different dimensions and sizing settings.\n\nIn each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the SVG source.\n\n### Dimensionless and proportionless\n\nThis image is both dimensionless and proportionless. It doesn't care what size it is, nor does it care about remaining at a particular aspect ratio. This would make a good gradient desktop background that would work regardless of your screen size and its aspect ratio.\n\n![no-dimensions-or-ratio.png](no-dimensions-or-ratio.png)\n\n[SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3469/6587a382ffb2c944462a6b110b079496/no-dimensions-or-ratio.svg \"no-dimensions-or-ratio.svg\")\n\n### One specified dimension and proportionless\n\nThis image specifies a width of 100 pixels but no height or intrinsic ratio. This is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block.\n\n![100px-wide-no-height-or-ratio.png](100px-wide-no-height-or-ratio.png)\n\n[SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3468/af73bea307a10ffe2559df42fad199e3/100px-wide-no-height-or-ratio.svg \"100px-wide-no-height-or-ratio.svg\")\n\n### One specified dimension with intrinsic ratio\n\nThis image specifies a 100 pixel height but no width. It also specifies an intrinsic aspect ratio of 3:4. This ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio).\n\nThis is very much like specifying a specific width and height, since once you have one dimension and a ratio, the other dimension is implied, but it's still a useful example.\n\n![100px-height-3x4-ratio.png](100px-height-3x4-ratio.png)\n\n[SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3467/fd0c534c506be06d52f0a954a59863a6/100px-height-3x4-ratio.svg \"100px-height-3x4-ratio.svg\")\n\n### No width or height with intrinsic ratio\n\nThis image doesn't specify either a width or a height; instead, it specifies an intrinsic ratio of 1:1. Think of this like a program icon. It's always square, and is usable at any size, such as 32x32, 128x128, or 512x512, for example.\n\n![no-dimensions-1x1-ratio.png](no-dimensions-1x1-ratio.png)\n\n[SVG source](https://media.prod.mdn.mozit.cloud/attachments/2012/07/09/3466/a3398e03c058d99fb2b7837167cdbc26/no-dimensions-1x1-ratio.svg \"no-dimensions-1x1-ratio.svg\")\n\n## Scaling examples\n\nNow let's see some examples of what happens as we apply different scaling to these images. In each of the examples below, the enclosing rectangles are 300 pixels wide and 200 pixels tall. In addition, the backgrounds have {{ cssxref(\"background-repeat\") }} set to no-repeat for clarity.\n\n> **Note:** The screenshots below show the **expected** rendering. Not all browsers currently render these correctly.\n\n### Specifying fixed lengths for both dimensions\n\nIf you use {{ cssxref(\"background-size\") }} to specify fixed lengths for both dimensions, those lengths are always used, per rule 1 above. In other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.\n\n#### Source: No dimensions or intrinsic ratio\n\nGiven this CSS:\n\n```css\nbackground: url(no-dimensions-or-ratio.svg);\nbackground-size: 125px 175px;\n```\n\nThe rendered output would look like this:\n\n![fixed-no-dimensions-or-ratio.png](fixed-no-dimensions-or-ratio.png)\n\n#### Source: One specified dimension, no intrinsic ratio\n\nGiven this CSS:\n\n```css\nbackground: url(100px-wide-no-height-or-ratio.svg);\nbackground-size: 250px 150px;\n```\n\nThe rendered output would look like this:\n\n![fixed-100px-wide-no-height-or-ratio.png](fixed-100px-wide-no-height-or-ratio.png)\n\n#### Source: One specified dimension with intrinsic ratio\n\nGiven this CSS:\n\n```css\nbackground: url(100px-height-3x4-ratio.svg);\nbackground-size: 275px 125px;\n```\n\nThe rendered output would look like this:\n\n![fixed-100px-height-3x4-ratio.png](fixed-100px-height-3x4-ratio.png)\n\n#### Source: No specified width or height with intrinsic ratio\n\nGiven this CSS:\n\n```css\nbackground: url(no-dimensions-1x1-ratio.svg);\nbackground-size: 250px 100px;\n```\n\nThe rendered output would look like this:\n\n![fixed-no-dimensions-1x1-ratio.png](fixed-no-dimensions-1x1-ratio.png)\n\n### Using contain or cover\n\nSpecifying `cover` for {{ cssxref(\"background-size\") }} makes the picture as small as possible while still covering the entire background area. `contain`, on the other hand, makes the image as large as possible while not being clipped by the background area.\n\nFor an image with an intrinsic ratio, exactly one size matches the `cover`/fit criteria alone. But if there is no intrinsic ratio specified, `cover`/fit isn't sufficient, so the large/small constraints choose the resulting size.\n\n#### Source: No dimensions or intrinsic ratio\n\nIf an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.\n\n```css\nbackground: url(no-dimensions-or-ratio.svg);\nbackground-size: contain;\n```\n\nThe rendered output looks like this:\n\n![no-dimensions-or-ratio-contain.png](no-dimensions-or-ratio-contain.png)\n\n#### Source: One specified dimension, no intrinsic ratio\n\nSimilarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.\n\n```css\nbackground: url(100px-wide-no-height-or-ratio.svg);\nbackground-size: contain;\n```\n\nThe rendered output looks like this:\n\n![100px-wide-no-height-or-ratio-contain.png](100px-wide-no-height-or-ratio-contain.png)\n\n#### Source: One specified dimension with intrinsic ratio\n\nThings change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting `contain` or `cover`). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with `contain` means drawing a 150x200 background.\n\n##### contain case\n\n```css\nbackground: url(100px-height-3x4-ratio.svg);\nbackground-size: contain;\n```\n\nThe rendered output looks like this:\n\n![100px-height-3x4-ratio-contain.png](100px-height-3x4-ratio-contain.png)\n\nNotice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.\n\n##### cover case\n\n```css\nbackground: url(100px-height-3x4-ratio.svg);\nbackground-size: cover;\n```\n\nThe rendered output looks like this:\n\n![100px-height-3x4-ratio-cover.png](100px-height-3x4-ratio-cover.png)\n\nHere, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.\n\n#### Source: No dimensions with intrinsic ratio\n\nWhen using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.\n\n##### contain case\n\n```css\nbackground: url(no-dimensions-1x1-ratio.svg);\nbackground-size: contain;\n```\n\nThe rendered output looks like this:\n\n![no-dimensions-1x1-ratio-contain.png](no-dimensions-1x1-ratio-contain.png)\n\nNotice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.\n\n##### cover case\n\n```css\nbackground: url(no-dimensions-1x1-ratio.svg);\nbackground-size: cover;\n```\n\nThe rendered output looks like this:\n\n![no-dimensions-1x1-ratio-cover.png](no-dimensions-1x1-ratio-cover.png)\n\nHere, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.\n\n### Automatic sizing using \"auto\" for both dimensions\n\nIf {{ cssxref(\"background-size\") }} is set to `auto` or `auto auto`, rule 2 says that rendering must preserve any intrinsic ratio that's provided.\n\n#### Source: No dimensions or intrinsic ratio\n\nWhen no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.\n\n```css\nbackground: url(no-dimensions-or-ratio.svg);\nbackground-size: auto auto;\n```\n\nThe rendered output looks like this:\n\n![auto-no-dimensions-or-ratio.png](auto-no-dimensions-or-ratio.png)\n\n#### Source: One dimension and no intrinsic ratio\n\nIf no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.\n\n```css\nbackground: url(100px-wide-no-height-or-ratio.svg);\nbackground-size: auto auto;\n```\n\nThe rendered output looks like this:\n\n![auto-100px-wide-no-height-or-ratio.png](auto-100px-wide-no-height-or-ratio.png)\n\nNote here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).\n\n#### Source: One dimension and an intrinsic ratio\n\nIf we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.\n\n```css\nbackground: url(100px-height-3x4-ratio.svg);\nbackground-size: auto auto;\n```\n\nThe rendered output looks like this:\n\n![auto-100px-height-3x4-ratio.png](auto-100px-height-3x4-ratio.png)\n\nSince this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the `auto` case.\n\n#### Source: No fixed dimensions with intrinsic ratio\n\nWhen an intrinsic ratio is specified, but no dimensions, rule 4 is applied -- except that rule 2 also applies. The image is therefore rendered just like for the `contain` case.\n\n```css\nbackground: url(no-dimensions-1x1-ratio.svg);\nbackground-size: auto auto;\n```\n\nThe rendered output looks like this:\n\n![auto-no-dimensions-1x1-ratio.png](auto-no-dimensions-1x1-ratio.png)\n\n### Using \"auto\" and one specific length\n\nGiven rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.\n\n#### Source: No dimensions or intrinsic ratio\n\nIf the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the `auto` dimension.\n\n```css\nbackground: url(no-dimensions-or-ratio.svg);\nbackground-size: auto 150px;\n```\n\n![1auto-no-dimensions-or-ratio.png](1auto-no-dimensions-or-ratio.png)\n\nHere, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.\n\n#### Source: One specified dimension with no intrinsic ratio\n\nIf the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to `auto` in the CSS.\n\n```css\nbackground: url(100px-wide-no-height-or-ratio.svg);\nbackground-size: 200px auto;\n```\n\n![100px-wide-no-height-or-ratio-length-auto.png](100px-wide-no-height-or-ratio-length-auto.png)\n\nHere, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, `auto` selects the height of the background area as the height for the rendered image.\n\n```css\nbackground: url(100px-wide-no-height-or-ratio.svg);\nbackground-size: auto 125px;\n```\n\n![100px-wide-no-height-or-ratio-auto-length.png](100px-wide-no-height-or-ratio-auto-length.png)\n\nIn this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.\n\n#### Source: One specified dimension with intrinsic ratio\n\nWhen a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.\n\n```css\nbackground: url(100px-height-3x4-ratio.svg);\nbackground-size: 150px auto;\n```\n\n![1auto-100px-height-3x4-ratio.png](1auto-100px-height-3x4-ratio.png)\n\nIn this case, we use the width of the image specified in the CSS set at 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the height for the `auto` case.\n\n#### Source: No specified dimensions with intrinsic ratio\n\nIf no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.\n\n```css\nbackground: url(no-dimensions-1x1-ratio.svg);\nbackground-size: 150px auto;\n```\n\n![1auto-no-dimensions-1x1-ratio.png](1auto-no-dimensions-1x1-ratio.png)\n\nThe width is set by the CSS to 150px. The `auto` value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.\n\n## See also\n\n- {{cssxref(\"background-size\")}}\n- Blog post: [Properly resizing vector image backgrounds](https://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/)\n" }, { "property": "repeat", "document": "---\ntitle: repeat()\nslug: Web/CSS/repeat\ntags:\n - CSS\n - CSS Function\n - CSS Grid\n - Function\n - Layout\n - Reference\n - Web\nbrowser-compat: css.properties.grid-template-columns.repeat\n---\n{{CSSRef}}\n\nThe **`repeat()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.\n\nThis function can be used in the CSS Grid properties {{cssxref(\"grid-template-columns\")}} and {{cssxref(\"grid-template-rows\")}}.\n\n```css\n/* values */\nrepeat(4, 1fr)\nrepeat(4, [col-start] 250px [col-end])\nrepeat(4, [col-start] 60% [col-end])\nrepeat(4, [col-start] 1fr [col-end])\nrepeat(4, [col-start] min-content [col-end])\nrepeat(4, [col-start] max-content [col-end])\nrepeat(4, [col-start] auto [col-end])\nrepeat(4, [col-start] minmax(100px, 1fr) [col-end])\nrepeat(4, [col-start] fit-content(200px) [col-end])\nrepeat(4, 10px [col-start] 30% [col-middle] auto [col-end])\nrepeat(4, [col-start] min-content [col-middle] max-content [col-end])\n\n/* values */\nrepeat(auto-fill, 250px)\nrepeat(auto-fit, 250px)\nrepeat(auto-fill, [col-start] 250px [col-end])\nrepeat(auto-fit, [col-start] 250px [col-end])\nrepeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])\nrepeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])\n\n/* values */\nrepeat(4, 250px)\nrepeat(4, [col-start] 250px [col-end])\nrepeat(4, [col-start] 60% [col-end])\nrepeat(4, [col-start] minmax(100px, 1fr) [col-end])\nrepeat(4, [col-start] fit-content(200px) [col-end])\nrepeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])\n```\n\n## Syntax\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : A positive integer length.\n- {{cssxref(\"<percentage>\")}}\n - : A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `` must be treated as `auto`. The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.\n- {{cssxref(\"<flex>\")}}\n - : A non-negative dimension with the unit `fr` specifying the track's flex factor. Each ``-sized track takes a share of the remaining space in proportion to its flex factor.\n- `max-content`\n - : Represents the largest max-content contribution of the grid items occupying the grid track.\n- `min-content`\n - : Represents the largest min-content contribution of the grid items occupying the grid track.\n- `auto`\n - : As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by {{cssxref(\"min-width\")}}/{{cssxref(\"min-height\")}}) of the grid items occupying the grid track.\n- `auto-fill`\n - : If the grid container has a definite or maximal size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container. Treating each track as its maximal track sizing function (each independent value used to define `grid-template-rows` or `grid-template-columns`), if that is definite. Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is `1`. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.\n- `auto-fit`\n\n - : Behaves the same as `auto-fill`, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they're all empty.)\n\n A collapsed track is treated as having a single fixed track sizing function of `0px`, and the gutters on either side of it collapse.\n\n For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., `1px`), to avoid division by zero.\n\n## Examples\n\n### Specifying grid columns using repeat()\n\n#### HTML\n\n```html\n
      \n
      \n This item is 50 pixels wide.\n
      \n
      \n Item with flexible width.\n
      \n
      \n This item is 50 pixels wide.\n
      \n
      \n Item with flexible width.\n
      \n
      \n Inflexible item of 100 pixels width.\n
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n display: grid;\n grid-template-columns: repeat(2, 50px 1fr) 100px;\n grid-gap: 5px;\n box-sizing: border-box;\n height: 200px;\n width: 100%;\n background-color: #8cffa0;\n padding: 10px;\n}\n\n#container > div {\n background-color: #8ca0ff;\n padding: 5px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Specifying_grid_columns_using_repeat\", \"100%\", 200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"grid-template\")}}, {{cssxref(\"grid-template-rows\")}}, {{cssxref(\"grid-template-columns\")}}, {{cssxref(\"grid-template-areas\")}}, {{cssxref(\"grid-auto-columns\")}}, {{cssxref(\"grid-auto-rows\")}}, {{cssxref(\"grid-auto-flow\")}}\n- Grid Layout Guide: _[Line-based placement with CSS Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_\n- Grid Layout Guide: _[Grid template areas - Grid definition shorthands](/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands)_\n" }, { "property": "reference", "document": "---\ntitle: CSS reference\nslug: Web/CSS/Reference\ntags:\n - CSS\n - Guide\n - Overview\n - Reference\n - l10n:priority\n---\n{{CSSRef}}\n\nUse this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](/en-US/docs/Web/CSS) properties, [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), [data types](/en-US/docs/Web/CSS/CSS_Types), [functional notations](/en-US/docs/Web/CSS/CSS_Functions) and [at-rules](/en-US/docs/Web/CSS/At-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom).\n\n## Basic rule syntax\n\n### Style rule syntax\n\n```css\nstyle-rule ::=\n selectors-list {\n properties-list\n }\n```\n\n... where :\n\n```css\nselectors-list ::=\n selector[:pseudo-class] [::pseudo-element]\n [, selectors-list]\n\nproperties-list ::=\n [property : value] [; properties-list]\n```\n\nSee the index of [_selectors_](#selectors), [_pseudo-classes_](#pseudo), and _[pseudo-elements](#pseudo)_ below. The syntax for each specified _value_ depends on the data type defined for each specified _property_.\n\n#### Style rule examples\n\n```css\nstrong {\n color: red;\n}\n\ndiv.menu-bar li:hover > ul {\n display: block;\n}\n```\n\nFor a beginner-level introduction to the syntax of selectors, see our [guide on CSS Selectors](/en-US/docs/Learn/CSS/Building_blocks/Selectors). Be aware that any [syntax](/en-US/docs/Web/CSS/Syntax) error in a rule definition invalidates the entire rule. Invalid rules are ignored by the browser. Note that CSS rule definitions are entirely (ASCII) [text-based](https://www.w3.org/TR/css-syntax-3/#intro), whereas DOM-CSS / CSSOM (the rule management system) is [object-based](https://www.w3.org/TR/cssom/#introduction).\n\n### At-rule syntax\n\nAs the structure of at-rules varies widely, please see [At-rule](/en-US/docs/Web/CSS/At-rule) to find the syntax of the specific one you want.\n\n## Index\n\n> **Note:** The property names in this index do **not** include the [JavaScript names](/en-US/docs/Web/CSS/CSS_Properties_Reference) where they differ from the CSS standard names.\n\n{{CSS_Ref}}\n\n## Selectors\n\nThe following are the various [selectors](/en-US/docs/Web/CSS/CSS_Selectors), which allow styles to be conditional based on various features of elements within the DOM.\n\n### Basic selectors\n\n**Basic selectors** are fundamental selectors; these are the most basic selectors that are frequently combined to create other, more complex selectors.\n\n- [Universal selector](/en-US/docs/Web/CSS/Universal_selectors) `*`, `ns|*`, `*|*`, `|*`\n- [Type selector](/en-US/docs/Web/CSS/Type_selectors) `elementname`\n- [Class selector](/en-US/docs/Web/CSS/Class_selectors) `.classname`\n- [ID selector](/en-US/docs/Web/CSS/ID_selectors) `#idname`\n- [Attribute selector](/en-US/docs/Web/CSS/Attribute_selectors) `[attr=value]`\n\n### Grouping selectors\n\n- [Selector list](/en-US/docs/Web/CSS/Selector_list) `A, B`\n - : Specifies that both `A` and `B` elements are selected. This is a grouping method to select several matching elements.\n\n### Combinators\n\nCombinators are selectors that establish a relationship between two or more simple selectors, such as \"`A` is a child of `B`\" or \"`A` is adjacent to `B`.\"\n\n- [Adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator) `A + B`\n - : Specifies that the elements selected by both `A` and `B` have the same parent and that the element selected by `B` immediately follows the element selected by `A` horizontally.\n- [General sibling combinator](/en-US/docs/Web/CSS/General_sibling_combinator) `A ~ B`\n - : Specifies that the elements selected by both `A` and `B` share the same parent and that the element selected by `A` comes before—but not necessarily immediately before—the element selected by `B`.\n- [Child combinator](/en-US/docs/Web/CSS/Child_combinator) `A > B`\n - : Specifies that the element selected by `B` is the direct child of the element selected by `A`.\n- [Descendant combinator](/en-US/docs/Web/CSS/Descendant_combinator) `A B`\n - : Specifies that the element selected by `B` is a descendant of the element selected by `A`, but is not necessarily a direct child.\n- [Column combinator](/en-US/docs/Web/CSS/Column_combinator) `A || B` {{Experimental_Inline}}\n - : Specifies that the element selected by `B` is located within the table column specified by `A`. Elements which span multiple columns are considered to be a member of all of those columns.\n\n### Pseudo\n\n- [Pseudo classes](/en-US/docs/Web/CSS/Pseudo-classes) `:`\n - : Specifies a special state of the selected element(s).\n- [Pseudo elements](/en-US/docs/Web/CSS/Pseudo-elements) `::`\n - : Represents entities that are not included in HTML.\n\n> **Callout:**\n>\n> See also [Selectors in the Selectors Level 4 specification](https://www.w3.org/TR/selectors/#overview).\n\n## Concepts\n\n### Syntax and semantics\n\n- [CSS syntax](/en-US/docs/Web/CSS/Syntax)\n- [At-rules](/en-US/docs/Web/CSS/At-rule)\n- [Cascade](/en-US/docs/Web/CSS/Cascade)\n- [Comments](/en-US/docs/Web/CSS/Comments)\n- [Descriptor]()\n- [Inheritance](/en-US/docs/Web/CSS/inheritance)\n- [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties)\n- [Specificity](/en-US/docs/Web/CSS/Specificity)\n- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax)\n- [CSS unit and value types](/en-US/docs/Web/CSS/CSS_Values_and_Units)\n- [CSS functional notations](/en-US/docs/Web/CSS/CSS_Functions)\n\n### Values\n\n- [Actual value](/en-US/docs/Web/CSS/actual_value)\n- [Computed value](/en-US/docs/Web/CSS/computed_value)\n- [Initial value](/en-US/docs/Web/CSS/initial_value)\n- [Resolved value](/en-US/docs/Web/CSS/resolved_value)\n- [Specified value](/en-US/docs/Web/CSS/specified_value)\n- [Used value](/en-US/docs/Web/CSS/used_value)\n\n### Layout\n\n- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context)\n- [Box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)\n- [Containing block](/en-US/docs/Web/CSS/Containing_block)\n- [Layout mode](/en-US/docs/Web/CSS/Layout_mode)\n- [Margin collapsing](/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)\n- [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)\n- [Stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)\n- [Visual formatting model](/en-US/docs/Web/CSS/Visual_formatting_model)\n\n## DOM-CSS / CSSOM\n\n### Major object types\n\n- {{DOMxRef(\"Document.styleSheets\")}}\n- `{{DOMxRef(\"StyleSheetList\", \"styleSheets\", \"\", 1)}}[i].{{DOMxRef(\"CSSRuleList\", \"cssRules\", \"\", 1)}}`\n- `cssRules[i].{{DOMxRef(\"CSSRule.cssText\", \"cssText\", \"\", 1)}}` (selector & style)\n- `cssRules[i].{{DOMxRef(\"CSSStyleRule.selectorText\", \"selectorText\", \"\", 1)}}`\n- {{DOMxRef(\"HTMLElement.style\")}}\n- `HTMLElement.style.{{DOMxRef(\"CSSStyleDeclaration.cssText\", \"cssText\", \"\", 1)}}` (just style)\n- {{DOMxRef(\"Element.className\")}}\n- {{DOMxRef(\"Element.classList\")}}\n\n### Important methods\n\n- {{DOMxRef(\"CSSStyleSheet.insertRule()\")}}\n- {{DOMxRef(\"CSSStyleSheet.deleteRule()\")}}\n\n## See also\n\n- [Mozilla CSS extensions](/en-US/docs/Web/CSS/Mozilla_Extensions) (prefixed with `-moz-`)\n- [WebKit CSS extensions](/en-US/docs/Web/CSS/WebKit_Extensions) (mostly prefixed with `-webkit-`)\n- [Microsoft CSS extensions](/en-US/docs/Web/CSS/Microsoft_Extensions) (prefixed with `-ms-`)\n\n## External Links\n\n- [CSS Indices (w3.org)](https://www.w3.org/TR/CSS/#indices)\n" }, { "property": "scroll-behavior", "document": "---\ntitle: scroll-behavior\nslug: Web/CSS/scroll-behavior\ntags:\n - CSS\n - CSS Property\n - CSSOM View\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-behavior\n---\n{{CSSRef}}\n\nThe **`scroll-behavior`** [CSS](/en-US/docs/Web/CSS) property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-behavior.html\")}}\n\nNote that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead. This property specified on the `body` element will *not* propagate to the viewport.\n\nUser agents are allowed to ignore this property.\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-behavior: auto;\nscroll-behavior: smooth;\n\n/* Global values */\nscroll-behavior: inherit;\nscroll-behavior: initial;\nscroll-behavior: revert;\nscroll-behavior: revert-layer;\nscroll-behavior: unset;\n```\n\nThe `scroll-behavior` property is specified as one of the keyword values listed below.\n\n### Values\n\n- `auto`\n - : The scrolling box scrolls instantly.\n- `smooth`\n - : The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting smooth scroll behavior\n\n#### HTML\n\n```html\n\n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n```\n\n#### CSS\n\n```css\na {\n display: inline-block;\n width: 50px;\n text-decoration: none;\n}\nnav, .scroll-container {\n display: block;\n margin: 0 auto;\n text-align: center;\n}\nnav {\n width: 339px;\n padding: 5px;\n border: 1px solid black;\n}\n.scroll-container {\n width: 350px;\n height: 200px;\n overflow-y: scroll;\n scroll-behavior: smooth;\n}\n.scroll-page {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n font-size: 5em;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample(\"Setting_smooth_scroll_behavior\", \"100%\", 250) }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n" }, { "property": "scroll-margin-block-start", "document": "---\ntitle: scroll-margin-block-start\nslug: Web/CSS/scroll-margin-block-start\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin-block\n - scroll-margin-block-start\nbrowser-compat: css.properties.scroll-margin-block-start\n---\n{{CSSRef}}\n\nThe `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-block-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-block-start: 10px;\nscroll-margin-block-start: 1em;\n\n/* Global values */\nscroll-margin-block-start: inherit;\nscroll-margin-block-start: initial;\nscroll-margin-block-start: revert;\nscroll-margin-block-start: revert-layer;\nscroll-margin-block-start: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the block start edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "place-self", "document": "---\ntitle: place-self\nslug: Web/CSS/place-self\ntags:\n - CSS\n - CSS Box Alignment\n - CSS Property\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.place-self\n---\n{{CSSRef}}\n\nThe **`place-self`** [CSS](/en-US/docs/Web/CSS) [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) allows you to align an individual item in both the block and inline directions at once (i.e. the {{cssxref(\"align-self\")}} and {{cssxref(\"justify-self\")}} properties) in a relevant layout system such as [Grid](/en-US/docs/Web/CSS/CSS_Grid_Layout) or [Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout). If the second value is not present, the first value is also used for it.\n\n{{EmbedInteractiveExample(\"pages/css/place-self.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`align-self`](/en-US/docs/Web/CSS/align-self)\n- [`justify-self`](/en-US/docs/Web/CSS/justify-self)\n\n## Syntax\n\n```css\n/* Keyword values */\nplace-self: auto center;\nplace-self: normal start;\n\n/* Positional alignment */\nplace-self: center normal;\nplace-self: start auto;\nplace-self: end normal;\nplace-self: self-start auto;\nplace-self: self-end normal;\nplace-self: flex-start auto;\nplace-self: flex-end normal;\nplace-self: left auto;\nplace-self: right normal;\n\n/* Baseline alignment */\nplace-self: baseline normal;\nplace-self: first baseline auto;\nplace-self: last baseline normal;\nplace-self: stretch auto;\n\n/* Global values */\nplace-self: inherit;\nplace-self: initial;\nplace-self: revert;\nplace-self: revert-layer;\nplace-self: unset;\n```\n\n### Values\n\n- `auto`\n - : Computes to the parent's {{cssxref(\"align-items\")}} value.\n- `normal`\n\n - : The effect of this keyword is dependent of the layout mode we are in:\n\n - In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.\n - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.\n - For flex items, the keyword behaves as `stretch`.\n - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.\n - The property doesn't apply to block-level boxes, and to table cells.\n\n- `self-start`\n - : Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.\n- `self-end`\n - : Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.\n- `flex-start`\n - : The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.\n- `flex-end`\n - : The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.\n- `center`\n - : The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.\n- `baseline`, `first baseline`. `last baseline`\n - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.\n The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.\n- `stretch`\n - : If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref(\"max-height\")}}/{{cssxref(\"max-width\")}} (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nIn the following example we have a simple 2 x 2 grid layout. Initially the grid container has [`justify-items`](/en-US/docs/Web/CSS/justify-items) and [`align-items`](/en-US/docs/Web/CSS/align-items) values of `stretch` — the defaults — which causes the grid items to stretch across the entire width of their cells.\n\nThe second, third, and fourth grid items are then given different values of `place-self`, to show how these override the default placements. These values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions.\n\n#### HTML\n\n```html\n
      \n First\n Second\n Third\n Fourth\n
      \n```\n\n#### CSS\n\n```css\nhtml {\n font-family: helvetica, arial, sans-serif;\n letter-spacing: 1px;\n}\n\narticle {\n background-color: red;\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-auto-rows: 80px;\n grid-gap: 10px;\n width: 300px;\n}\n\nspan:nth-child(2) {\n place-self: start center;\n}\n\nspan:nth-child(3) {\n place-self: center start;\n}\n\nspan:nth-child(4) {\n place-self: end;\n}\n\narticle span {\n background-color: black;\n color: white;\n margin: 1px;\n text-align: center;\n}\n\narticle, span {\n padding: 10px;\n border-radius: 7px;\n}\n\narticle {\n margin: 20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_\n- CSS Flexbox Guide: _[Aligning items in a flex container](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_\n- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_\n- [CSS Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment)\n- The {{cssxref(\"align-self\")}} property\n- The {{cssxref(\"justify-self\")}} property\n" }, { "property": "scroll-margin-block", "document": "---\ntitle: scroll-margin-block\nslug: Web/CSS/scroll-margin-block\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-shorthand-property\n - scroll-margin\n - scroll-margin-block\nbrowser-compat: css.properties.scroll-margin-block\n---\n{{CSSRef}}\n\nThe `scroll-margin-block` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll margins of an element in the block dimension.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-block.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`scroll-margin-block-end`](/en-US/docs/Web/CSS/scroll-margin-block-end)\n- [`scroll-margin-block-start`](/en-US/docs/Web/CSS/scroll-margin-block-start)\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-block: 10px;\nscroll-margin-block: 1em .5em ;\n\n/* Global values */\nscroll-margin-block: inherit;\nscroll-margin-block: initial;\nscroll-margin-block: revert;\nscroll-margin-block: revert-layer;\nscroll-margin-block: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the corresponding edge of the scroll container.\n\n## Description\n\nThe scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-inline-end", "document": "---\ntitle: scroll-margin-inline-end\nslug: Web/CSS/scroll-margin-inline-end\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin-inline\n - scroll-margin-inline-end\nbrowser-compat: css.properties.scroll-margin-inline-end\n---\n{{CSSRef}}\n\nThe `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-inline-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-inline-end: 10px;\nscroll-margin-inline-end: 1em;\n\n/* Global values */\nscroll-margin-inline-end: inherit;\nscroll-margin-inline-end: initial;\nscroll-margin-inline-end: revert;\nscroll-margin-inline-end: revert-layer;\nscroll-margin-inline-end: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the inline end edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nThis example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.\n\nThe aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.\n\n#### HTML\n\nThe HTML that represents the blocks is very simple:\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      4
      \n
      \n```\n\n#### CSS\n\nLet's walk through the CSS. the outer container is styled like this:\n\n```css\n.scroller {\n text-align: left;\n width: 250px;\n height: 250px;\n overflow-x: scroll;\n display: flex;\n box-sizing: border-box;\n border: 1px solid #000;\n scroll-snap-type: x mandatory;\n}\n```\n\nThe main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.\n\nThe child elements are styled as follows:\n\n```css\n.scroller > div {\n flex: 0 0 250px;\n width: 250px;\n background-color: #663399;\n color: #fff;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: end;\n}\n\n.scroller > div:nth-child(2n) {\n background-color: #fff;\n color: #663399;\n}\n```\n\nThe most relevant part here is `scroll-snap-align: end`, which specifies that the right-hand edges (the \"ends\" along the x axis, in our case) are the designated snap points.\n\nLast of all we specify the scroll margin values, a different one for the second and third child elements:\n\n```css\n.scroller > div:nth-child(2) {\n scroll-margin-inline-end: 1rem;\n}\n\n.scroller > div:nth-child(3) {\n scroll-margin-inline-end: 2rem;\n}\n```\n\nThis means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline end edge of the second `
      `, and `2rems` outside the inline end edge of the third `
      `.\n\n#### Result\n\nTry it for yourself:\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-bottom", "document": "---\ntitle: scroll-margin-bottom\nslug: Web/CSS/scroll-margin-bottom\ntags:\n - CSS\n - CSS Property\n - Reference\n - Scroll margin bottom\n - Web\n - recipe:css-property\n - scroll-margin\n - scroll-margin-bottom\nbrowser-compat: css.properties.scroll-margin-bottom\n---\n{{CSSRef}}\n\nThe `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-bottom.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-bottom: 10px;\nscroll-margin-bottom: 1em;\n\n/* Global values */\nscroll-margin-bottom: inherit;\nscroll-margin-bottom: initial;\nscroll-margin-bottom: revert;\nscroll-margin-bottom: revert-layer;\nscroll-margin-bottom: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the bottom edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-inline-start", "document": "---\ntitle: scroll-margin-inline-start\nslug: Web/CSS/scroll-margin-inline-start\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin-inline\n - scroll-margin-inline-start\nbrowser-compat: css.properties.scroll-margin-inline-start\n---\n{{CSSRef}}\n\nThe `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-inline-start.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-inline-start: 10px;\nscroll-margin-inline-start: 1em;\n\n/* Global values */\nscroll-margin-inline-start: inherit;\nscroll-margin-inline-start: initial;\nscroll-margin-inline-start: revert;\nscroll-margin-inline-start: revert-layer;\nscroll-margin-inline-start: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the inline start edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nThis example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.\n\nThe aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.\n\n#### HTML\n\nThe HTML that represents the blocks is very simple:\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      4
      \n
      \n```\n\n#### CSS\n\nLet's walk through the CSS. the outer container is styled like this:\n\n```css\n.scroller {\n text-align: left;\n width: 250px;\n height: 250px;\n overflow-x: scroll;\n display: flex;\n box-sizing: border-box;\n border: 1px solid #000;\n scroll-snap-type: x mandatory;\n}\n```\n\nThe main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.\n\nThe child elements are styled as follows:\n\n```css\n.scroller > div {\n flex: 0 0 250px;\n width: 250px;\n background-color: #663399;\n color: #fff;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: start;\n}\n\n.scroller > div:nth-child(2n) {\n background-color: #fff;\n color: #663399;\n}\n```\n\nThe most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the \"starts\" along the x axis, in our case) are the designated snap points.\n\nLast of all we specify the scroll margin-values, a different one for the second and third child elements:\n\n```css\n.scroller > div:nth-child(2) {\n scroll-margin-inline-start: 1rem;\n}\n\n.scroller > div:nth-child(3) {\n scroll-margin-inline-start: 2rem;\n}\n```\n\nThis means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline start edge of the second `
      `, and `2rems` outside the inline start edge of the third `
      `.\n\n#### Result\n\nTry it for yourself:\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "ruby-align", "document": "---\ntitle: ruby-align\nslug: Web/CSS/ruby-align\ntags:\n - CSS\n - CSS Property\n - CSS Ruby\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.ruby-align\n---\n{{CSSRef}}\n\nThe **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.\n\n```css\n/* Keyword values */\nruby-align: start;\nruby-align: center;\nruby-align: space-between;\nruby-align: space-around;\n\n/* Global values */\nruby-align: inherit;\nruby-align: initial;\nruby-align: revert;\nruby-align: revert-layer;\nruby-align: unset;\n```\n\n## Syntax\n\n### Values\n\n- `start`\n - : Is a keyword indicating that the ruby will be aligned with the start of the base text.\n- `center`\n - : Is a keyword indicating that the ruby will be aligned at the middle of the base text.\n- `space-between`\n - : Is a keyword indicating that the extra space will be distributed between the elements of the ruby.\n- `space-around`\n - : Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Ruby aligned at the start of the base text\n\n#### HTML\n\n```html\n\n This is a long text to check\n （short ruby）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-align: start;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Ruby_aligned_at_the_start_of_the_base_text\", 180, 40)}}\n\n### Ruby aligned at the center of the base text\n\n#### HTML\n\n```html\n\n This is a long text to check\n （short ruby）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-align: center;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Ruby_aligned_at_the_center_of_the_base_text\", 180, 40)}}\n\n### Extra space distributed between ruby elements\n\n#### HTML\n\n```html\n\n This is a long text to check\n （short ruby）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-align: space-between;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Extra_space_distributed_between_ruby_elements\", 180, 40)}}\n\n### Extra space distributed between and around ruby elements\n\n#### HTML\n\n```html\n\n This is a long text to check\n （short ruby）\n\n```\n\n#### CSS\n\n```css\nruby {\n ruby-align: space-around;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Extra_space_distributed_between_and_around_ruby_elements\", 180, 40)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- HTML Ruby elements: {{HTMLElement(\"ruby\")}}, {{HTMLElement(\"rt\")}}, {{HTMLElement(\"rp\")}}, and {{HTMLElement(\"rtc\")}}.\n- CSS Ruby properties: {{cssxref(\"ruby-position\")}}, {{cssxref(\"ruby-merge\")}}.\n" }, { "property": "scroll-margin-right", "document": "---\ntitle: scroll-margin-right\nslug: Web/CSS/scroll-margin-right\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin\n - scroll-margin-right\nbrowser-compat: css.properties.scroll-margin-right\n---\n{{CSSRef}}\n\nThe `scroll-margin-right` property defines the right margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-right.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-right: 10px;\nscroll-margin-right: 1em;\n\n/* Global values */\nscroll-margin-right: inherit;\nscroll-margin-right: initial;\nscroll-margin-right: revert;\nscroll-margin-right: revert-layer;\nscroll-margin-right: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the right edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-top", "document": "---\ntitle: scroll-margin-top\nslug: Web/CSS/scroll-margin-top\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin\n - scroll-margin-top\nbrowser-compat: css.properties.scroll-margin-top\n---\n{{CSSRef}}\n\nThe `scroll-margin-top` property defines the top margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-top.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-top: 10px;\nscroll-margin-top: 1em;\n\n/* Global values */\nscroll-margin-top: inherit;\nscroll-margin-top: initial;\nscroll-margin-top: revert;\nscroll-margin-top: revert-layer;\nscroll-margin-top: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the top edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin", "document": "---\ntitle: scroll-margin\nslug: Web/CSS/scroll-margin\ntags:\n - CSS\n - CSS Property\n - Reference\n - margin\n - recipe:css-shorthand-property\n - scroll-margin\n - scrollbar\n - scrolling\nbrowser-compat: css.properties.scroll-margin\n---\n{{CSSRef}}\n\nThe **`scroll-margin`** [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets all of the scroll margins of an element at once, assigning values much like the [`margin`](/en-US/docs/Web/CSS/margin) property does for margins of an element.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`scroll-margin-bottom`](/en-US/docs/Web/CSS/scroll-margin-bottom)\n- [`scroll-margin-left`](/en-US/docs/Web/CSS/scroll-margin-left)\n- [`scroll-margin-right`](/en-US/docs/Web/CSS/scroll-margin-right)\n- [`scroll-margin-top`](/en-US/docs/Web/CSS/scroll-margin-top)\n\n## Syntax\n\n```css\n/* values */\nscroll-margin: 10px;\nscroll-margin: 1em .5em 1em 1em;\n\n/* Global values */\nscroll-margin: inherit;\nscroll-margin: initial;\nscroll-margin: revert;\nscroll-margin: revert-layer;\nscroll-margin: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : An outset from the corresponding edge of the scroll container.\n\n## Description\n\nYou can see the effect of `scroll-margin` by scrolling to a point partway between two of the \"pages\" of the example's content. The value specified for `scroll-margin` determines how much of the page that's primarily outside the snapport should remain visible.\n\nThus, the `scroll-margin` values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nThis example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.\n\nThe aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.\n\n#### HTML\n\nThe HTML that represents the blocks is very simple:\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      4
      \n
      \n```\n\n#### CSS\n\nLet's walk through the CSS. the outer container is styled like this:\n\n```css\n.scroller {\n text-align: left;\n width: 250px;\n height: 250px;\n overflow-x: scroll;\n display: flex;\n box-sizing: border-box;\n border: 1px solid #000;\n scroll-snap-type: x mandatory;\n}\n```\n\nThe main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.\n\nThe child elements are styled as follows:\n\n```css\n.scroller > div {\n flex: 0 0 250px;\n width: 250px;\n background-color: #663399;\n color: #fff;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: start;\n}\n\n.scroller > div:nth-child(2n) {\n background-color: #fff;\n color: #663399;\n}\n```\n\nThe most relevant part here is `scroll-snap-align: start`, which specifies that the left-hand edges (the \"starts\" along the x axis, in our case) are the designated snap points.\n\nLast of all we specify the scroll margin-values, a different one for the second and third child elements:\n\n```css\n.scroller > div:nth-child(2) {\n scroll-margin: 1rem;\n}\n\n.scroller > div:nth-child(3) {\n scroll-margin: 2rem;\n}\n```\n\nThis means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the left edge of the second `
      `, and `2rems` outside the left edge of the third `
      `.\n\n> **Note:** Here we are setting `scroll-margin` on all sides at once, but only the start edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with `scroll-margin-inline-start: 1rem`, or `scroll-margin: 0 0 0 1rem`.\n\n#### Result\n\nTry it for yourself:\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-block-start", "document": "---\ntitle: scroll-padding-block-start\nslug: Web/CSS/scroll-padding-block-start\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-padding-block\n - scroll-padding-block-start\nbrowser-compat: css.properties.scroll-padding-block-start\n---\n{{CSSRef}}\n\nThe `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-block-start.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-block-start: auto;\n\n/* values */\nscroll-padding-block-start: 10px;\nscroll-padding-block-start: 1em;\nscroll-padding-block-start: 10%;\n\n/* Global values */\nscroll-padding-block-start: inherit;\nscroll-padding-block-start: initial;\nscroll-padding-block-start: revert;\nscroll-padding-block-start: revert-layer;\nscroll-padding-block-start: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the block start edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-block-end", "document": "---\ntitle: scroll-padding-block-end\nslug: Web/CSS/scroll-padding-block-end\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-padding-block\n - scroll-padding-block-end\nbrowser-compat: css.properties.scroll-padding-block-end\n---\n{{CSSRef}}\n\nThe `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-block-end.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-block-end: auto;\n\n/* values */\nscroll-padding-block-end: 10px;\nscroll-padding-block-end: 1em;\nscroll-padding-block-end: 10%;\n\n/* Global values */\nscroll-padding-block-end: inherit;\nscroll-padding-block-end: initial;\nscroll-padding-block-end: revert;\nscroll-padding-block-end: revert-layer;\nscroll-padding-block-end: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the block end edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-block", "document": "---\ntitle: scroll-padding-block\nslug: Web/CSS/scroll-padding-block\ntags:\n - CSS\n - CSS Scroll Snap\n - Reference\n - Web\n - recipe:css-shorthand-property\n - scroll-padding\n - scroll-padding-block\nbrowser-compat: css.properties.scroll-padding-block\n---\n{{CSSRef}}\n\nThe `scroll-padding-block` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll padding of an element in the block dimension.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-block.html\")}}\n\nThe scroll-padding properties define offsets for the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`scroll-padding-block-end`](/en-US/docs/Web/CSS/scroll-padding-block-end)\n- [`scroll-padding-block-start`](/en-US/docs/Web/CSS/scroll-padding-block-start)\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-block: auto;\n\n/* values */\nscroll-padding-block: 10px;\nscroll-padding-block: 1em .5em;\nscroll-padding-block: 10%;\n\n/* Global values */\nscroll-padding-block: inherit;\nscroll-padding-block: initial;\nscroll-padding-block: revert;\nscroll-padding-block: revert-layer;\nscroll-padding-block: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-block-end", "document": "---\ntitle: scroll-margin-block-end\nslug: Web/CSS/scroll-margin-block-end\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-margin-block\n - scroll-margin-block-end\nbrowser-compat: css.properties.scroll-margin-block-end\n---\n{{CSSRef}}\n\nThe `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-block-end.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-block-end: 10px;\nscroll-margin-block-end: 1em;\n\n/* Global values */\nscroll-margin-block-end: inherit;\nscroll-margin-block-end: initial;\nscroll-margin-block-end: revert;\nscroll-margin-block-end: revert-layer;\nscroll-margin-block-end: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the block end edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-bottom", "document": "---\ntitle: scroll-padding-bottom\nslug: Web/CSS/scroll-padding-bottom\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-padding\n - scroll-padding-bottom\nbrowser-compat: css.properties.scroll-padding-bottom\n---\n{{CSSRef}}\n\nThe `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-bottom.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-bottom: auto;\n\n/* values */\nscroll-padding-bottom: 10px;\nscroll-padding-bottom: 1em;\nscroll-padding-bottom: 10%;\n\n/* Global values */\nscroll-padding-bottom: inherit;\nscroll-padding-bottom: initial;\nscroll-padding-bottom: revert;\nscroll-padding-bottom: revert-layer;\nscroll-padding-bottom: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the bottom edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-inline-end", "document": "---\ntitle: scroll-padding-inline-end\nslug: Web/CSS/scroll-padding-inline-end\ntags:\n - CSS\n - CSS Property\n - Web\n - recipe:css-property\n - scroll-padding-inline\n - scroll-padding-inline-end\nbrowser-compat: css.properties.scroll-padding-inline-end\n---\n{{CSSRef}}\n\nThe `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-inline-end.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-inline-end: auto;\n\n/* values */\nscroll-padding-inline-end: 10px;\nscroll-padding-inline-end: 1em;\nscroll-padding-inline-end: 10%;\n\n/* Global values */\nscroll-padding-inline-end: inherit;\nscroll-padding-inline-end: initial;\nscroll-padding-inline-end: revert;\nscroll-padding-inline-end: revert-layer;\nscroll-padding-inline-end: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the inline end edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-inline", "document": "---\ntitle: scroll-padding-inline\nslug: Web/CSS/scroll-padding-inline\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-shorthand-property\n - scroll-padding-inline\n - scroll-padding-inline-end\n - scroll-padding-inline-start\nbrowser-compat: css.properties.scroll-padding-inline\n---\n{{CSSRef}}\n\nThe `scroll-padding-inline` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll padding of an element in the inline dimension.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-inline.html\")}}\n\nThe scroll-padding properties define offsets for the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`scroll-padding-inline-end`](/en-US/docs/Web/CSS/scroll-padding-inline-end)\n- [`scroll-padding-inline-start`](/en-US/docs/Web/CSS/scroll-padding-inline-start)\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-inline: auto;\n\n/* values */\nscroll-padding-inline: 10px;\nscroll-padding-inline: 1em .5em;\nscroll-padding-inline: 10%;\n\n/* Global values */\nscroll-padding-inline: inherit;\nscroll-padding-inline: initial;\nscroll-padding-inline: revert;\nscroll-padding-inline: revert-layer;\nscroll-padding-inline: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-left", "document": "---\ntitle: scroll-padding-left\nslug: Web/CSS/scroll-padding-left\ntags:\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\n - scroll-padding\n - scroll-padding-left\nbrowser-compat: css.properties.scroll-padding-left\n---\n{{CSSRef}}\n\nThe `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-left.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-left: auto;\n\n/* values */\nscroll-padding-left: 10px;\nscroll-padding-left: 1em;\nscroll-padding-left: 10%;\n\n/* Global values */\nscroll-padding-left: inherit;\nscroll-padding-left: initial;\nscroll-padding-left: revert;\nscroll-padding-left: revert-layer;\nscroll-padding-left: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the left edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-right", "document": "---\ntitle: scroll-padding-right\nslug: Web/CSS/scroll-padding-right\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-padding\n - scroll-padding-right\nbrowser-compat: css.properties.scroll-padding-right\n---\n{{CSSRef}}\n\nThe `scroll-padding-right` property defines offsets for the right of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-right.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-right: auto;\n\n/* values */\nscroll-padding-right: 10px;\nscroll-padding-right: 1em;\nscroll-padding-right: 10%;\n\n/* Global values */\nscroll-padding-right: inherit;\nscroll-padding-right: initial;\nscroll-padding-right: revert;\nscroll-padding-right: revert-layer;\nscroll-padding-right: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the top edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-inline", "document": "---\ntitle: scroll-margin-inline\nslug: Web/CSS/scroll-margin-inline\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-shorthand-property\n - scroll-margin\n - scroll-margin-inline\nbrowser-compat: css.properties.scroll-margin-inline\n---\n{{CSSRef}}\n\nThe `scroll-margin-inline` [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets the scroll margins of an element in the inline dimension.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-inline.html\")}}\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`scroll-margin-inline-end`](/en-US/docs/Web/CSS/scroll-margin-inline-end)\n- [`scroll-margin-inline-start`](/en-US/docs/Web/CSS/scroll-margin-inline-start)\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-inline: 10px;\nscroll-margin-inline: 1em .5em ;\n\n/* Global values */\nscroll-margin-inline: inherit;\nscroll-margin-inline: initial;\nscroll-margin-inline: revert;\nscroll-margin-inline: revert-layer;\nscroll-margin-inline: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the corresponding edge of the scroll container.\n\n## Description\n\nThe scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple demonstration\n\nThis example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.\n\nThe aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.\n\n#### HTML\n\nThe HTML that represents the blocks is very simple:\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      4
      \n
      \n```\n\n#### CSS\n\nLet's walk through the CSS. the outer container is styled like this:\n\n```css\n.scroller {\n text-align: left;\n width: 250px;\n height: 250px;\n overflow-x: scroll;\n display: flex;\n box-sizing: border-box;\n border: 1px solid #000;\n scroll-snap-type: x mandatory;\n}\n```\n\nThe main parts relevant to the scroll snapping are `overflow-x: scroll`, which makes sure the contents will scroll and not be hidden, and `scroll-snap-type: x mandatory`, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.\n\nThe child elements are styled as follows:\n\n```css\n.scroller > div {\n flex: 0 0 250px;\n width: 250px;\n background-color: #663399;\n color: #fff;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: end;\n}\n\n.scroller > div:nth-child(2n) {\n background-color: #fff;\n color: #663399;\n}\n```\n\nThe most relevant part here is `scroll-snap-align: end`, which specifies that the right-hand edges (the \"ends\" along the x axis, in our case) are the designated snap points.\n\nLast of all we specify the scroll margin values, a different one for the second and third child elements:\n\n```css\n.scroller > div:nth-child(2) {\n scroll-margin-inline: 1rem;\n}\n\n.scroller > div:nth-child(3) {\n scroll-margin-inline: 2rem;\n}\n```\n\nThis means that when scrolling past the middle child elements, the scrolling will snap to `1rem` outside the inline end edge of the second `
      `, and `2rems` outside the inline end edge of the third `
      `.\n\n> **Note:** Here we are setting `scroll-margin` on the start _and_ end of the inline axis (x in our case), but only the end edge is really relevant. It would work just as well here to only set a scroll margin on that one edge, for example with `scroll-margin-inline: 0 1rem`, or `scroll-margin-inline-end: 1rem`.\n\n#### Result\n\nTry it for yourself:\n\n{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-margin-left", "document": "---\ntitle: scroll-margin-left\nslug: Web/CSS/scroll-margin-left\ntags:\n - CSS\n - CSS Property\n - Reference\n - Scroll margin left\n - Web\n - recipe:css-property\n - scroll-margin\n - scroll-margin-left\nbrowser-compat: css.properties.scroll-margin-left\n---\n{{CSSRef}}\n\nThe `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-margin-left.html\")}}\n\n## Syntax\n\n```css\n/* values */\nscroll-margin-left: 10px;\nscroll-margin-left: 1em;\n\n/* Global values */\nscroll-margin-left: inherit;\nscroll-margin-left: initial;\nscroll-margin-left: revert;\nscroll-margin-left: revert-layer;\nscroll-margin-left: unset;\n```\n\n### Values\n\n- ``\n - : An outset from the left edge of the scroll container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding", "document": "---\ntitle: scroll-padding\nslug: Web/CSS/scroll-padding\ntags:\n - CSS\n - CSS Property\n - recipe:css-shorthand-property\n - scroll-snap\nbrowser-compat: css.properties.scroll-padding\n---\n{{CSSRef}}\n\nThe **`scroll-padding`** [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties) sets scroll padding on all sides of an element at once, much like the {{cssxref(\"padding\")}} property does for padding on an element.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding.html\")}}\n\nThe `scroll-padding-*` properties define offsets for the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars), or to put more breathing room between a targeted element and the edges of the scrollport.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- {{CSSXref(\"scroll-padding-bottom\")}}\n- {{CSSXref(\"scroll-padding-left\")}}\n- {{CSSXref(\"scroll-padding-right\")}}\n- {{CSSXref(\"scroll-padding-top\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding: auto;\n\n/* values */\nscroll-padding: 10px;\nscroll-padding: 1em .5em 1em 1em;\nscroll-padding: 10%;\n\n/* Global values */\nscroll-padding: inherit;\nscroll-padding: initial;\nscroll-padding: revert;\nscroll-padding: revert-layer;\nscroll-padding: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length-percentage>\")}}\n - : An inwards offset from the corresponding edge of the scrollport, as a valid {{cssxref(\"<length>\")}} or a {{cssxref(\"<percentage>\")}}.\n- `auto`\n - : The offset is determined by the user agent. This will generally be `0px`, but the user agent is free to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-align", "document": "---\ntitle: scroll-snap-align\nslug: Web/CSS/scroll-snap-align\ntags:\n - Advanced\n - CSS\n - Example\n - NeedsLiveSample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-align\n---\n{{CSSRef}}\n\nThe `scroll-snap-align` property specifies the box's snap position as an alignment of its snap area (as the alignment subject) within its snap container's snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-snap-align: none;\nscroll-snap-align: start end; /* when two values set first is block, second inline */\nscroll-snap-align: center;\n\n/* Global values */\nscroll-snap-align: inherit;\nscroll-snap-align: initial;\nscroll-snap-align: revert;\nscroll-snap-align: revert-layer;\nscroll-snap-align: unset;\n```\n\n### Values\n\n- `none`\n - : The box does not define a snap position in that axis.\n- `start`\n - : The start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.\n- `end`\n - : The end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.\n- `center`\n - : The center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis.\n\nSafari currently has the two value syntax in the wrong order, the first value being inline the second block. See [bug #191865](https://bugs.webkit.org/show_bug.cgi?id=191865).\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-destination", "document": "---\ntitle: scroll-snap-destination\nslug: Web/CSS/scroll-snap-destination\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - Deprecated\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-destination\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-destination`** [CSS](/en-US/docs/Web/CSS) property defines the position in x and y coordinates within the scroll container's visual {{Glossary(\"viewport\")}} which element snap points align with.\n\n```css\n/* value */\nscroll-snap-destination: 400px 600px;\n\n/* Global values */\nscroll-snap-destination: inherit;\nscroll-snap-destination: initial;\nscroll-snap-destination: unset;\n```\n\n## Syntax\n\n### Values\n\n- ``\n - : Specifies the offset of the snap destination from the start edge of the scroll container's visual viewport. The first value gives the x coordinate of the snap destination, the second value its y coordinate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting scroll snap destination\n\n#### HTML\n\n```html\n
      \n
      \n

      At coordinate (0, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n\n
      \n

      At coordinate (25, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n\n
      \n

      At coordinate (50, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n display: flex;\n}\n\n#container > div:nth-child(-n+2) {\n margin-right: 20px;\n}\n\n.scrollContainer {\n width: 100px;\n overflow: auto;\n white-space: nowrap;\n scroll-snap-points-x: repeat(100%);\n scroll-snap-type: mandatory;\n scroll-snap-destination: 20px 0;\n font-size: 0;\n}\n\n.destination0 {\n scroll-snap-destination: 0 0;\n}\n\n.destination25 {\n scroll-snap-destination: 25px 0;\n}\n\n.destination50 {\n scroll-snap-destination: 50px 0;\n}\n\n.scrollContainer > div {\n width: 100px;\n height: 100px;\n display: inline-block;\n line-height: 100px;\n text-align: center;\n font-size: 50px;\n}\n\n.scrollContainer > div:nth-child(even) {\n background-color: #87EA87;\n}\n\n.scrollContainer > div:nth-child(odd) {\n background-color: #87CCEA;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_scroll_snap_destination\", \"100%\", \"170\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-points-x", "document": "---\ntitle: scroll-snap-points-x\nslug: Web/CSS/scroll-snap-points-x\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - Deprecated\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-points-x\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-points-x`** [CSS](/en-US/docs/Web/CSS) property defines the horizontal positioning of snap points within the content of the scroll container they are applied to.\n\n```css\n/* Keyword value */\nscroll-snap-points-x: none;\n\n/* Repeating snap points */\nscroll-snap-points-x: repeat(400px);\n\n/* Global values */\nscroll-snap-points-x: inherit;\nscroll-snap-points-x: initial;\nscroll-snap-points-x: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : The scroll container does not define any snap points. Elements within the scroll container may still define snap points on behalf of the scroll container.\n- `repeat()`\n - : Defines an interval at which snap points are defined, starting from the container's relevant start edge. Only positive lengths are allowed. Percentages refer to the width of the container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting horizontal scroll snap points\n\n#### HTML\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n width: 200px;\n overflow: auto;\n white-space: nowrap;\n scroll-snap-points-x: repeat(100%);\n scroll-snap-type: mandatory;\n font-size: 0;\n}\n\n#container > div {\n width: 200px;\n height: 200px;\n display: inline-block;\n line-height: 200px;\n text-align: center;\n font-size: 100px;\n}\n\n#container > div:nth-child(even) {\n background-color: #87ea87;\n}\n\n#container > div:nth-child(odd) {\n background-color: #87ccea;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_horizontal_scroll_snap_points\", 220, 220)}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-points-y", "document": "---\ntitle: scroll-snap-points-y\nslug: Web/CSS/scroll-snap-points-y\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - Deprecated\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-points-y\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-points-y`** [CSS](/en-US/docs/Web/CSS) property defines the vertical positioning of snap points within the content of the scroll container they are applied to.\n\n```css\n/* Keyword value */\nscroll-snap-points-y: none;\n\n/* Repeated snap points */\nscroll-snap-points-y: repeat(400px);\n\n/* Global values */\nscroll-snap-points-y: inherit;\nscroll-snap-points-y: initial;\nscroll-snap-points-y: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : The scroll container does not define any snap points. Elements within the scroll container may still define snap points on behalf of the scroll container.\n- `repeat()`\n - : Defines an interval at which snap points are defined, starting from the container's relevant start edge. Only positive lengths are allowed. Percentages refer to the width of the container.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting vertical scroll snap points\n\n#### HTML\n\n```html\n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n height: 200px;\n width: 220px;\n overflow-x: hidden;\n overflow-y: auto;\n scroll-snap-points-y: repeat(200px);\n scroll-snap-type: mandatory;\n font-size: 0;\n}\n\n#container > div {\n width: 200px;\n height: 200px;\n display: inline-block;\n line-height: 200px;\n text-align: center;\n font-size: 100px;\n}\n\n#container > div:nth-child(even) {\n background-color: #87EA87;\n}\n\n#container > div:nth-child(odd) {\n background-color: #87CCEA;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_vertical_scroll_snap_points\", 220, 220)}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-stop", "document": "---\ntitle: scroll-snap-stop\nslug: Web/CSS/scroll-snap-stop\ntags:\n - CSS\n - CSS Scroll Snap\n - Reference\n - Web\n - recipe:css-property\n - scroll-snap-stop\nbrowser-compat: css.properties.scroll-snap-stop\n---\n{{CSSRef}}\n\nThe **`scroll-snap-stop`** [CSS](/en-US/docs/Web/CSS) property defines whether the scroll container is allowed to \"pass over\" possible snap positions.\n\n```css\n/* Keyword values */\nscroll-snap-stop: normal;\nscroll-snap-stop: always;\n\n/* Global values */\nscroll-snap-stop: inherit;\nscroll-snap-stop: initial;\nscroll-snap-stop: revert;\nscroll-snap-stop: revert-layer;\nscroll-snap-stop: unset;\n```\n\n## Syntax\n\n### Values\n\n- `normal`\n - : When the visual {{Glossary(\"viewport\")}} of this element's scroll container is scrolled, it may \"pass over\" possible snap positions.\n- `always`\n - : The scroll container must not \"pass over\" a possible snap position; and must snap to the first of this elements' snap positions.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Snapping in different axes\n\nThis example is duplicated from {{cssxref(\"scroll-snap-type\")}} with minor variances.\n\n#### CSS\n\n```css\n/* setup */\n:root, body {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-flow: column nowrap;\n font-family: monospace;\n}\n.container {\n display: flex;\n overflow: auto;\n outline: 1px dashed lightgray;\n flex: none;\n}\n\n.container.x {\n width: 100%;\n height: 128px;\n flex-flow: row nowrap;\n}\n\n.container.y {\n width: 256px;\n height: 256px;\n flex-flow: column nowrap;\n}\n/* definite scroll snap */\n.mandatory-scroll-snapping > div {\n scroll-snap-stop: always;\n}\n.proximity-scroll-snapping > div {\n scroll-snap-stop: normal;\n}\n/* scroll-snap */\n.x.mandatory-scroll-snapping {\n scroll-snap-type: x mandatory;\n}\n\n.y.mandatory-scroll-snapping {\n scroll-snap-type: y mandatory;\n}\n\n.x.proximity-scroll-snapping {\n scroll-snap-type: x proximity;\n}\n\n.y.proximity-scroll-snapping {\n scroll-snap-type: y proximity;\n}\n\n.container > div {\n text-align: center;\n scroll-snap-align: center;\n flex: none;\n}\n\n.x.container > div {\n line-height: 128px;\n font-size: 64px;\n width: 100%;\n height: 128px;\n}\n\n.y.container > div {\n line-height: 256px;\n font-size: 128px;\n width: 256px;\n height: 256px;\n}\n/* appearance fixes */\n.y.container > div:first-child {\n line-height: 1.3;\n font-size: 64px;\n}\n/* coloration */\n.container > div:nth-child(even) {\n background-color: #87EA87;\n}\n\n.container > div:nth-child(odd) {\n background-color: #87CCEA;\n}\n```\n\n#### HTML\n\n```html\n
      \n
      X Mand. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Proximity LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Mand. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Prox. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Mandatory RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Proximity RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Mand. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Prox. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Snapping_in_different_axes\", \"100%\", \"1630\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-snap-type-x", "document": "---\ntitle: scroll-snap-type-x\nslug: Web/CSS/scroll-snap-type-x\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - NeedsExample\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-type-x\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-type-x`** [CSS](/en-US/docs/Web/CSS) property defines how strictly snap points are enforced on the horizontal axis of the scroll container in case there is one.\n\nSpecifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.\n\n```css\n/* Keyword values */\nscroll-snap-type-x: none;\nscroll-snap-type-x: mandatory;\nscroll-snap-type-x: proximity;\n\n/* Global values */\nscroll-snap-type-x: inherit;\nscroll-snap-type-x: initial;\nscroll-snap-type-x: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : When the visual {{Glossary(\"viewport\")}} of this scroll container is scrolled horizontally, it must ignore snap points.\n- `mandatory`\n - : The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.\n- `proximity`\n - : The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled horizontally considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [`scroll-snap-type-y`](/en-US/docs/Web/CSS/scroll-snap-type-y)\n- [`scroll-snap-type`](/en-US/docs/Web/CSS/scroll-snap-type)\n" }, { "property": "scroll-snap-type-y", "document": "---\ntitle: scroll-snap-type-y\nslug: Web/CSS/scroll-snap-type-y\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - NeedsExample\n - Non-standard\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-type-y\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-type-y`** [CSS](/en-US/docs/Web/CSS) property defines how strictly snap points are enforced on the vertical axis of the scroll container in case there is one.\n\nSpecifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.\n\n```css\n/* Keyword values */\nscroll-snap-type-y: none;\nscroll-snap-type-y: mandatory;\nscroll-snap-type-y: proximity;\n\n/* Global values */\nscroll-snap-type-y: inherit;\nscroll-snap-type-y: initial;\nscroll-snap-type-y: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : When the visual {{Glossary(\"viewport\")}} of this scroll container is scrolled vertically, it must ignore snap points.\n- `mandatory`\n - : The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.\n- `proximity`\n - : The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled vertically considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [`scroll-snap-type-x`](/en-US/docs/Web/CSS/scroll-snap-type-x)\n- [`scroll-snap-type`](/en-US/docs/Web/CSS/scroll-snap-type)\n" }, { "property": "scroll-snap-type", "document": "---\ntitle: scroll-snap-type\nslug: Web/CSS/scroll-snap-type\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-type\n---\n{{CSSRef}}\n\nThe **`scroll-snap-type`** [CSS](/en-US/docs/Web/CSS) property sets how strictly snap points are enforced on the scroll container in case there is one.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-snap-type.html\")}}\n\nSpecifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.\n\n```css\n/* Keyword values */\nscroll-snap-type: none;\nscroll-snap-type: x;\nscroll-snap-type: y;\nscroll-snap-type: block;\nscroll-snap-type: inline;\nscroll-snap-type: both;\n\n/* Optional mandatory | proximity*/\nscroll-snap-type: x mandatory;\nscroll-snap-type: y proximity;\nscroll-snap-type: both mandatory;\n\n/* etc */\n\n/* Global values */\nscroll-snap-type: inherit;\nscroll-snap-type: initial;\nscroll-snap-type: revert;\nscroll-snap-type: revert-layer;\nscroll-snap-type: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : When the visual {{Glossary(\"viewport\")}} of this scroll container is scrolled, it must ignore snap points.\n- `x`\n - : The scroll container snaps to snap positions in its horizontal axis only.\n- `y`\n - : The scroll container snaps to snap positions in its vertical axis only.\n- `block`\n - : The scroll container snaps to snap positions in its block axis only.\n- `inline`\n - : The scroll container snaps to snap positions in its inline axis only.\n- `both`\n - : The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).\n- `mandatory`\n - : The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.\n- `proximity`\n - : The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Snapping in different axes\n\n#### HTML\n\n```html\n
      \n
      \n
      X Mand. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Prox. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Mand. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Prox. LTR
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Mand. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      X Prox. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Mand. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n\n
      \n
      Y Prox. RTL
      \n
      2
      \n
      3
      \n
      4
      \n
      5
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n/* setup */\nhtml, body, .holster {\n height: 100%;\n}\n.holster {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-flow: column nowrap;\n font-family: monospace;\n}\n\n.container {\n display: flex;\n overflow: auto;\n outline: 1px dashed lightgray;\n flex: none;\n}\n\n.container.x {\n width: 100%;\n height: 128px;\n flex-flow: row nowrap;\n}\n\n.container.y {\n width: 256px;\n height: 256px;\n flex-flow: column nowrap;\n}\n/* scroll-snap */\n.x.mandatory-scroll-snapping {\n scroll-snap-type: x mandatory;\n}\n\n.y.mandatory-scroll-snapping {\n scroll-snap-type: y mandatory;\n}\n\n.x.proximity-scroll-snapping {\n scroll-snap-type: x proximity;\n}\n\n.y.proximity-scroll-snapping {\n scroll-snap-type: y proximity;\n}\n\n.container > div {\n text-align: center;\n scroll-snap-align: center;\n flex: none;\n}\n\n.x.container > div {\n line-height: 128px;\n font-size: 64px;\n width: 100%;\n height: 128px;\n}\n\n.y.container > div {\n line-height: 256px;\n font-size: 128px;\n width: 256px;\n height: 100%;\n}\n/* appearance fixes */\n.y.container > div:first-child {\n line-height: 1.3;\n font-size: 64px;\n}\n/* coloration */\n.container > div:nth-child(even) {\n background-color: #87EA87;\n}\n\n.container > div:nth-child(odd) {\n background-color: #87CCEA;\n}\n```\n\n#### Results\n\n{{EmbedLiveSample(\"Snapping_in_different_axes\", \"100%\", \"1630\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scroll-padding-inline-start", "document": "---\ntitle: scroll-padding-inline-start\nslug: Web/CSS/scroll-padding-inline-start\ntags:\n - CSS\n - CSS Property\n - Web\n - recipe:css-property\n - scroll-padding-inline\n - scroll-padding-inline-start\nbrowser-compat: css.properties.scroll-padding-inline-start\n---\n{{CSSRef}}\n\nThe `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-inline-start.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-inline-start: auto;\n\n/* values */\nscroll-padding-inline-start: 10px;\nscroll-padding-inline-start: 1em;\nscroll-padding-inline-start: 10%;\n\n/* Global values */\nscroll-padding-inline-start: inherit;\nscroll-padding-inline-start: initial;\nscroll-padding-inline-start: revert;\nscroll-padding-inline-start: revert-layer;\nscroll-padding-inline-start: unset;\n```\n\n### Values\n\n- ``\n - : An inwards offset from the inline start edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "scrollbar-gutter", "document": "---\ntitle: scrollbar-gutter\nslug: Web/CSS/scrollbar-gutter\ntags:\n - CSS\n - Property\n - Reference\n - scrollbar-gutter\nbrowser-compat: css.properties.scrollbar-gutter\n---\n\n{{CSSRef}}\n\nThe **`scrollbar-gutter`** [CSS](/en-US/docs/Web/CSS) property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.\n\nAn element's _scrollbar gutter_ is the space between the inner border edge and the outer padding edge, where the browser may display a scrollbar. If no scrollbar is present, the gutter will be painted as an extension of the padding.\n\nThe browser determines whether _classic_ scrollbars or _overlay_ scrollbars are used:\n\n- Classic scrollbars are always placed in a gutter, consuming space when present.\n- Overlay scrollbars are placed over the content, not in a gutter, and are usually partially transparent.\n\n## Syntax\n\n```css\n/* Initial value */\nscrollbar-gutter: auto;\n\n/* \"stable\" keyword, with optional modifier */\nscrollbar-gutter: stable;\nscrollbar-gutter: stable both-edges;\n\n/* Global values */\nscrollbar-gutter: inherit;\nscrollbar-gutter: initial;\nscrollbar-gutter: revert;\nscrollbar-gutter: revert-layer;\nscrollbar-gutter: unset;\n```\n\n### Values\n\n- `auto`\n - : The initial value. Classic scrollbars create a gutter when `overflow` is `scroll`, or when `overflow` is `auto` and the box is overflowing. Overlay scrollbars do not consume space.\n- `stable`\n - : When using classic scrollbars, the gutter will be present if `overflow` is `auto`, `scroll`, or `hidden` even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.\n- `both-edges`\n - : If a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\nThe examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within.\n\n> **Note:** In the images for the examples, the user's system settings are set to classic scrollbars (always shown).\n\n### Example 1\n\nPrevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it.\n\n```css\n.container {\n scrollbar-gutter: stable;\n}\n```\n\n![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is](stable-no-scroll.png)\n\n### Example 2\n\nAdd symmetric spacing to both sides of the box so the content is centered:\n\n```css\n.container {\n scrollbar-gutter: stable both-edges;\n}\n```\n\n![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left](stable-both-edges.png)\n\n### Example 3\n\nAlign the contents of a non-scrolling element and a scrolling one adjacent to it:\nThis example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent.\n\n```css\n.container1 {\n overflow: hidden;\n scrollbar-gutter: stable;\n}\n\n.container2 {\n scrollbar-gutter: stable;\n}\n```\n\n![Two adjacent divs containing text, both with space for a scrollbar](side-by-side.png)\n\n### Overlay scrollbars\n\nFor reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect.\n\n![One div with text, no visible scrollbar](for-ref-no-scroll.png)\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"scrollbar-width\")}}\n- {{CSSxRef(\"overflow\")}}\n" }, { "property": "scrollbar-width", "document": "---\ntitle: scrollbar-width\nslug: Web/CSS/scrollbar-width\ntags:\n - CSS\n - CSS Property\n - Reference\n - css scrollbars\n - recipe:css-property\n - scrollbar-width\nbrowser-compat: css.properties.scrollbar-width\n---\n{{CSSRef}}\n\nThe **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.\n\n## Syntax\n\n```css\n/* Keyword values */\nscrollbar-width: auto;\nscrollbar-width: thin;\nscrollbar-width: none;\n\n/* Global values */\nscrollbar-width: inherit;\nscrollbar-width: initial;\nscrollbar-width: revert;\nscrollbar-width: revert-layer;\nscrollbar-width: unset;\n```\n\n### Values\n\n- _\\_\n\n - : Defines the width of the scrollbar as a keyword. It must be one of the following values:\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      autoThe default scrollbar width for the platform.
      thin\n A thin scrollbar width variant on platforms that provide that option, or\n a thinner scrollbar than the default platform scrollbar width.\n
      noneNo scrollbar shown, however the element will still be scrollable.
      \n\n > **Note:** User Agents must apply any `scrollbar-width` value set on the root element to the viewport.\n\n## Accessibility concerns\n\nUse this property with caution — setting `scrollbar-width` to `thin` or `none` can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.\n\nWCAG criterion 2.1.1 (Keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. And introduced in WCAG 2.1, criterion 2.5.5 (Target Size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised).\n\n- [MDN Understanding WCAG, Guideline 2.1 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.1_%E2%80%94_Keyboard_Accessible_Make_all_functionality_available_from_a_keyboard)\n- [MDN Understanding WCAG, Guideline 2.5 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.5_Input_Modalities_Make_it_easier_for_users_to_operate_functionality_through_various_inputs_beyond_keyboard.s/)\n- [Understanding Success Criterion 2.1.1 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)\n- [Understanding Success Criterion 2.5.5 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Sizing overflow scrollbars\n\n#### CSS\n\n```css\n.scroller {\n width: 300px;\n height: 100px;\n overflow-y: scroll;\n scrollbar-width: thin;\n}\n```\n\n#### HTML\n\n```html\n
      Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Sizing_overflow_scrollbars\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"-ms-overflow-style\")}}\n- {{CSSxRef(\"::-webkit-scrollbar\")}}\n" }, { "property": "scroll-padding-top", "document": "---\ntitle: scroll-padding-top\nslug: Web/CSS/scroll-padding-top\ntags:\n - CSS\n - CSS Property\n - Reference\n - Web\n - recipe:css-property\n - scroll-padding\n - scroll-padding-top\nbrowser-compat: css.properties.scroll-padding-top\n---\n{{CSSRef}}\n\nThe **`scroll-padding-top`** property defines offsets for the top of the *optimal viewing region* of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.\n\n{{EmbedInteractiveExample(\"pages/css/scroll-padding-top.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nscroll-padding-top: auto;\n\n/* values */\nscroll-padding-top: 10px;\nscroll-padding-top: 1em;\nscroll-padding-top: 10%;\n\n/* Global values */\nscroll-padding-top: inherit;\nscroll-padding-top: initial;\nscroll-padding-top: revert;\nscroll-padding-top: revert-layer;\nscroll-padding-top: unset;\n```\n\n### Values\n\n- `{{cssxref(\"<length-percentage>\")}}`\n - : An inwards offset from the top edge of the scrollport, as a valid length or a percentage.\n- `auto`\n - : The offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "selector_list", "document": "---\ntitle: Selector list\nslug: Web/CSS/Selector_list\ntags:\n - CSS\n - Selector\n - Selector Lists\n - Selectors\nbrowser-compat: css.selectors.list\n---\n{{CSSRef}}\n\nThe CSS **selector list** (`,`) selects all the matching nodes.\n\n```css\n/* Selects all matching elements */\nspan,\ndiv {\n border: red 2px solid;\n}\n```\n\nTo reduce the size of style sheets, one can group selectors in comma-separated lists.\n\n## Syntax\n\n```css\nelement, element, element { style properties }\n```\n\n## Examples\n\n### Single Line Grouping\n\nGrouping selectors in a single line using a comma-separated lists.\n\n```css\nh1, h2, h3, h4, h5, h6 { font-family: helvetica; }\n```\n\n### Multi Line Grouping\n\nGrouping selectors in a multiple lines using a comma-separated lists.\n\n```css\n#main,\n.content,\narticle {\n font-size: 1.1em;\n}\n```\n\n### Selector list invalidation\n\nA downside to using selector lists is that the following aren't equivalent:\n\n```css\nh1 { font-family: sans-serif }\nh2:maybe-unsupported { font-family: sans-serif }\nh3 { font-family: sans-serif }\n```\n\n```css\nh1, h2:maybe-unsupported, h3 { font-family: sans-serif }\n```\n\nThis is because a single unsupported selector in a selector list invalidates the whole rule.\n\nA way to remedy this is to use the {{CSSxRef(\":is\", \":is()\")}} or {{CSSxRef(\":where\", \":where()\")}} selectors, which accept a forgiving selector list. This will ignore invalid selectors in the list but accept those which are valid.\n\n```css\nh1 { font-family: sans-serif }\nh2:maybe-unsupported { font-family: sans-serif }\nh3 { font-family: sans-serif }\n```\n\n```css\n:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The {{CSSxRef(\":is\", \":is()\")}} {{Experimental_Inline}} and {{CSSxRef(\":where\", \":where()\")}} {{Experimental_Inline}} pseudo-classes, which accept a forgiving selector list.\n" }, { "property": "shape-margin", "document": "---\ntitle: shape-margin\nslug: Web/CSS/shape-margin\ntags:\n - Boundaries\n - CSS\n - CSS Property\n - CSS Shapes\n - Float Area\n - Property\n - Reference\n - Shape\n - float\n - margin\n - recipe:css-property\n - shape-margin\nbrowser-compat: css.properties.shape-margin\n---\n{{CSSRef}}\n\nThe **`shape-margin`** [CSS](/en-US/docs/Web/CSS) property sets a margin for a CSS shape created using {{cssxref(\"shape-outside\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/shape-margin.html\")}}\n\nThe margin lets you adjust the distance between the edges of the shape (the **float element**) and the surrounding content.\n\n## Syntax\n\n```css\n/* values */\nshape-margin: 10px;\nshape-margin: 20mm;\n\n/* value */\nshape-margin: 60%;\n\n/* Global values */\nshape-margin: inherit;\nshape-margin: initial;\nshape-margin: revert;\nshape-margin: revert-layer;\nshape-margin: unset;\n```\n\n### Values\n\n- ``\n - : Sets the margin of the shape to a {{cssxref(\"<length>\")}} value or to a {{cssxref(\"<percentage>\")}} of the width of the element's containing block.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Adding a margin to a polygon\n\n#### HTML\n\n```html\n
      \n
      \nWe are not quite sure of any one thing in biology; our knowledge of geology\nis relatively very slight, and the economic laws of society are\nuncertain to every one except some individual who attempts to set them\nforth; but before the world was fashioned the square on the hypotenuse\nwas equal to the sum of the squares on the other two sides of a right\ntriangle, and it will be so after this world is dead; and the inhabitant\nof Mars, if one exists, probably knows its truth as we know it.
      \n```\n\n#### CSS\n\n```css\nsection {\n max-width: 400px;\n}\n\n.shape {\n float: left;\n width: 150px;\n height: 150px;\n background-color: maroon;\n clip-path: polygon(0 0, 150px 150px, 0 150px);\n shape-outside: polygon(0 0, 150px 150px, 0 150px);\n shape-margin: 20px;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Adding_a_margin_to_a_polygon\", 500, 250)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes)\n- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)\n- {{cssxref(\"shape-outside\")}}\n- {{cssxref(\"shape-image-threshold\")}}\n- {{cssxref(\"<basic-shape>\")}}\n" }, { "property": "scroll-snap-coordinate", "document": "---\ntitle: scroll-snap-coordinate\nslug: Web/CSS/scroll-snap-coordinate\ntags:\n - CSS\n - CSS Property\n - CSS Scroll Snap\n - Deprecated\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.scroll-snap-coordinate\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **`scroll-snap-coordinate`** [CSS](/en-US/docs/Web/CSS) property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's {{cssxref(\"scroll-snap-destination\")}} for each respective axis.\n\n```css\n/* Keyword value */\nscroll-snap-coordinate: none;\n\n/* values */\nscroll-snap-coordinate: 50px 50px; /* Single coordinate */\nscroll-snap-coordinate: 100px 100px, 100px bottom; /* Multiple coordinates */\n\n/* Global values */\nscroll-snap-coordinate: inherit;\nscroll-snap-coordinate: initial;\nscroll-snap-coordinate: unset;\n```\n\nIf the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed.\n\n## Syntax\n\n### Values\n\n- `none`\n - : Specifies that the element does not contribute to a snap point.\n- {{cssxref(\"<position>\")}}\n - : Specifies the offset of the snap coordinates from the start edge of the element's border box. For each pairing, the first value gives the x coordinate of the snap coordinate, the second value its y coordinate.\n\n## Formal definition\n\n{{cssinfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting scroll snap coordinates\n\n#### HTML\n\n```html\n
      \n
      \n

      At coordinate (0, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n\n
      \n

      At coordinate (25, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n\n
      \n

      At coordinate (50, 0)

      \n
      \n
      1
      \n
      2
      \n
      3
      \n
      \n
      \n
      \n```\n\n#### CSS\n\n```css\n#container {\n display: flex;\n}\n\n#container > div:nth-child(-n+2) {\n margin-right: 20px;\n}\n\n.scrollContainer {\n width: 100px;\n overflow: auto;\n white-space: nowrap;\n scroll-snap-type: mandatory;\n font-size: 0;\n}\n\n.scrollContainer > div {\n width: 100px;\n height: 100px;\n display: inline-block;\n line-height: 100px;\n text-align: center;\n font-size: 50px;\n}\n\n.coordinate0 > div {\n scroll-snap-coordinate: 0 0;\n}\n\n.coordinate25 > div {\n scroll-snap-coordinate: 25px 0;\n}\n\n.coordinate50 > div {\n scroll-snap-coordinate: 50px 0;\n}\n\n.scrollContainer > div:nth-child(even) {\n background-color: #87ea87;\n}\n\n.scrollContainer > div:nth-child(odd) {\n background-color: #87ccea;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Setting_scroll_snap_coordinates\", \"100%\", \"170\")}}\n\n## Specifications\n\nNot part of any standard.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Scroll Snap](/en-US/docs/Web/CSS/CSS_Scroll_Snap)\n- [Well-Controlled Scrolling with CSS Scroll Snap](https://web.dev/css-scroll-snap/)\n" }, { "property": "shape-outside", "document": "---\ntitle: shape-outside\nslug: Web/CSS/shape-outside\ntags:\n - Boundaries\n - CSS\n - CSS Property\n - CSS Shapes\n - Float Area\n - Property\n - Reference\n - Shape\n - margin\n - recipe:css-property\n - shape-outside\n - wrapping\nbrowser-compat: css.properties.shape-outside\n---\n{{CSSRef}}\n\nThe **`shape-outside`** [CSS](/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.\n\n{{EmbedInteractiveExample(\"pages/css/shape-outside.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\nshape-outside: none;\nshape-outside: margin-box;\nshape-outside: content-box;\nshape-outside: border-box;\nshape-outside: padding-box;\n\n/* Function values */\nshape-outside: circle();\nshape-outside: ellipse();\nshape-outside: inset(10px 10px 10px 10px);\nshape-outside: polygon(10px 10px, 20px 20px, 30px 30px);\nshape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');\n\n/* value */\nshape-outside: url(image.png);\n\n/* value */\nshape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);\n\n/* Global values */\nshape-outside: inherit;\nshape-outside: initial;\nshape-outside: revert;\nshape-outside: revert-layer;\nshape-outside: unset;\n```\n\nThe `shape-outside` property is specified using the values from the list below, which define the _float area_ for _float elements_. The float area determines the shape around which inline content (float elements) wrap.\n\n### Values\n\n- `none`\n - : The float area is unaffected. Inline content wraps around the element's margin box, like usual.\n- ``\n\n - : The float area is computed according to the shape of a float element's edges (as defined by the [CSS box model](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)). This can be `margin-box`, `border-box`, `padding-box`, or `content-box`. The shape includes any curvature created by the {{cssxref(\"border-radius\")}} property (behavior which is similar to {{cssxref(\"background-clip\")}}).\n\n - `margin-box`\n - : Defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding {{cssxref(\"border-radius\")}} and {{cssxref(\"margin\")}} values. If the `border-radius / margin` ratio is `1` or more, then the margin box corner radius is `border-radius + margin`. If the ratio is less than `1`, then the margin box corner radius is `border-radius + (margin * (1 + (ratio-1)^3))`.\n - `border-box`\n - : Defines the shape enclosed by the outside border edge. The shape follows the normal border radius shaping rules for the outside of the border.\n - `padding-box`\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 - `content-box`\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\n- {{cssxref(\"<basic-shape>\")}}\n - : The float area is computed based on the shape created by of one of {{cssxref(\"basic-shape/inset\",\"inset()\")}}, {{cssxref(\"basic-shape/circle\",\"circle()\")}}, {{cssxref(\"basic-shape/ellipse\",\"ellipse()\")}}, {{cssxref(\"basic-shape/polygon\",\"polygon()\")}} or, as added in the level 2 specification, `path()`. If a `` is also supplied, it defines the reference box for the `` function. Otherwise, the reference box defaults to `margin-box`.\n- {{cssxref(\"<image>\")}}\n - : The float area is extracted and computed based on the alpha channel of the specified {{cssxref(\"<image>\")}} as defined by {{cssxref(\"shape-image-threshold\")}}.\n\n> **Note:** {{glossary(\"User agent\", \"User agents\")}} must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a `shape-outside` value. When fetching, user agents must use \"Anonymous\" mode, set the referrer source to the stylesheet's URL, and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value **`none`** had been specified.\n\n## Interpolation\n\nWhen animating between one `` and a second, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref(\"<length>\")}}, {{cssxref(\"<percentage>\")}}, or {{cssxref(\"calc\", \"calc()\")}} where possible. If list values are not one of those types but are identical (such as finding `nonzero` in the same list position in both lists), those values do interpolate.\n\n- Both shapes must use the same reference box.\n- If both shapes are the same type, that type is `ellipse()` or `circle()`, and none of the radii use the `closest-side` or `farthest-side` keywords, interpolate between each value in the shape functions.\n- If both shapes are of type `inset()`, interpolate between each value in the shape functions.\n- If both shapes are of type `polygon()`, both polygons have the same number of vertices, and use the same ``, interpolate between each value in the shape functions.\n- In all other cases no interpolation occurs.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Funneling text\n\n#### HTML\n\n```html\n
      \n
      \n
      \n

      \n Sometimes a web page's text content appears to be\n funneling your attention towards a spot on the page\n to drive you to follow a particular link. Sometimes\n you don't notice.\n

      \n
      \n```\n\n#### CSS\n\n```css\n.main {\n width: 530px;\n}\n\n.left,\n.right {\n width: 40%;\n height: 12ex;\n background-color: lightgray;\n}\n\n.left {\n -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);\n shape-outside: polygon(0 0, 100% 100%, 0 100%);\n float: left;\n -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);\n clip-path: polygon(0 0, 100% 100%, 0 100%);\n}\n\n.right {\n -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);\n shape-outside: polygon(100% 0, 100% 100%, 0 100%);\n float: right;\n -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);\n clip-path: polygon(100% 0, 100% 100%, 0 100%);\n}\n\np {\n text-align: center;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Funneling_text\", \"100%\", 130)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes)\n- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)\n- [Shapes from Box Values](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values)\n- [Basic Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes)\n- [Shapes from Images](/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images)\n- {{cssxref(\"<basic-shape>\")}}\n- {{cssxref(\"shape-margin\")}}\n- {{cssxref(\"shape-image-threshold\")}}\n" }, { "property": "shorthand_properties", "document": "---\ntitle: Shorthand properties\nslug: Web/CSS/Shorthand_properties\ntags:\n - CSS\n - Guide\n - Layout\n - Reference\n - Shorthand Properties\n - properties\n - shorthand\n---\n{{CSSRef}}\n\n**_Shorthand properties_** are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.\n\nThe CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref(\"background\")}} property is a shorthand property that's able to define the values of {{cssxref(\"background-color\")}}, {{cssxref(\"background-image\")}}, {{cssxref(\"background-repeat\")}}, and {{cssxref(\"background-position\")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref(\"font\")}}, and the different margins around a box can be defined using the {{cssxref(\"margin\")}} shorthand.\n\n## Tricky edge cases\n\nThere are a few edge cases to keep in mind when using shorthand properties.\n\n### Omitting properties\n\nA value which is not specified is set to its initial value. That means that it **overrides** previously set values. For example:\n\n```css\np {\n background-color: red;\n background: url(images/bg.gif) no-repeat left top;\n}\n```\n\nThis will not set the color of the background to `red` but to the default value for {{cssxref(\"background-color\")}}, which is `transparent`.\n\nOnly the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword `inherit` can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword `inherit`.\n\n### Ordering properties\n\nShorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values.\n\nTwo important cases here are:\n\n- properties related to the edges of a box, like {{cssxref(\"border-style\")}}, {{cssxref(\"margin\")}} or {{cssxref(\"padding\")}}\n- properties related to the corners of a box, like {{cssxref(\"border-radius\")}}\n\n#### Edges of a box\n\nShorthands handling properties related to edges of a box, like {{cssxref(\"border-style\")}}, {{cssxref(\"margin\")}} or {{cssxref(\"padding\")}}, always use a consistent 1-to-4-value syntax representing those edges:\n\n- **1-value syntax:** `border-width: 1em` — The single value represents all edges: ![Box edges with one-value syntax](border1.png)\n\n- **2-value syntax:** `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones: ![Box edges with two-value syntax](border2.png)\n\n- **3-value syntax:** `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge: ![Box edges with three-value syntax](border3.png)\n\n- **4-value syntax:** border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top: ![Box edges with four-value syntax](border4.png) The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word _trouble_: TRBL. You can also remember it as the order that the hands would rotate on a clock: `1em` starts in the 12 o'clock position, then `2em` in the 3 o'clock position, then `3em` in the 6 o'clock position, and `4em` in the 9 o'clock position.\n\n#### Corners of a box\n\nSimilarly, shorthands handling properties related to corners of a box, like {{cssxref(\"border-radius\")}}, always use a consistent 1-to-4-value syntax representing those corners:\n\n- **1-value syntax:** `border-radius: 1em` — The single value represents all corners: ![Box corners with one-value syntax](corner1.png)\n\n- **2-value syntax:** `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones: ![Box corners with two-value syntax](corner2.png)\n\n- **3-value syntax:** `border-radius: 1em 2em 3em` — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner: ![Box corners with three-value syntax](corner3.png)\n\n- **4-value syntax:** `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left: ![Box corners with four-value syntax](corner4.png)\n\n## Background properties\n\nA background with the following properties ...\n\n```css\nbackground-color: #000;\nbackground-image: url(images/bg.gif);\nbackground-repeat: no-repeat;\nbackground-position: left top;\n```\n\n... can be shortened to just one declaration:\n\n```css\nbackground: #000 url(images/bg.gif) no-repeat left top;\n```\n\n(The shorthand form is actually the equivalent of the longhand properties above plus `background-attachment: scroll` and, in CSS3, some additional properties.)\n\nSee {{cssxref(\"background\")}} for more detailed information, including CSS3 properties.\n\n## Font properties\n\nThe following declarations ...\n\n```css\nfont-style: italic;\nfont-weight: bold;\nfont-size: .8em;\nline-height: 1.2;\nfont-family: Arial, sans-serif;\n```\n\n... can be shortened to the following:\n\n```css\nfont: italic bold .8em/1.2 Arial, sans-serif;\n```\n\nThis shorthand declaration is actually equivalent to the longhand declarations above plus `font-variant: normal` and `font-size-adjust: none` (CSS2.0 / CSS3), `font-stretch: normal` (CSS3).\n\n## Border properties\n\nWith borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...\n\n```css\nborder-width: 1px;\nborder-style: solid;\nborder-color: #000;\n```\n\n... can be simplified as:\n\n```css\nborder: 1px solid #000;\n```\n\n## Margin and padding properties\n\nShorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...\n\n```css\nmargin-top: 10px;\nmargin-right: 5px;\nmargin-bottom: 10px;\nmargin-left: 5px;\n```\n\n... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in \"trouble\").\n\n```css\nmargin: 10px 5px 10px 5px;\n```\n\nMargin shorthand rules for one, two, three and four value declarations are:\n\n- When **one** value is specified, it applies the same margin to **all four sides**.\n- When **two** values are specified, the first margin applies to the **top and bottom**, the second to the **left and right**.\n- When **three** values are specified, the first margin applies to the **top**, the second to the **left and right**, the third to the **bottom**.\n- When **four** values are specified, the margins apply to the **top**, **right**, **bottom**, and **left** in that order (clockwise).\n\n## The universal shorthand property\n\nCSS provides a universal shorthand property, {{cssxref(\"all\")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model.\n\nSee [Cascade and inheritance](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) or [Introducing the CSS Cascade](/en-US/docs/Web/CSS/Cascade) for more information about how inheritance works in CSS.\n\n## See also\n\n- {{css_key_concepts}}\n- Shorthand properties: {{cssxref(\"all\")}}, {{cssxref(\"animation\")}}, {{cssxref(\"background\")}}, {{cssxref(\"border\")}}, {{cssxref(\"border-block-end\")}}, {{cssxref(\"border-block-start\")}}, {{cssxref(\"border-bottom\")}}, {{cssxref(\"border-color\")}}, {{cssxref(\"border-image\")}}, {{cssxref(\"border-inline-end\")}}, {{cssxref(\"border-inline-start\")}}, {{cssxref(\"border-left\")}}, {{cssxref(\"border-radius\")}}, {{cssxref(\"border-right\")}}, {{cssxref(\"border-style\")}}, {{cssxref(\"border-top\")}}, {{cssxref(\"border-width\")}}, {{cssxref(\"column-rule\")}}, {{cssxref(\"columns\")}}, {{cssxref(\"flex\")}}, {{cssxref(\"flex-flow\")}}, {{cssxref(\"font\")}}, {{cssxref(\"gap\")}}, {{cssxref(\"grid\")}}, {{cssxref(\"grid-area\")}}, {{cssxref(\"grid-column\")}}, {{cssxref(\"grid-row\")}}, {{cssxref(\"grid-template\")}}, {{cssxref(\"list-style\")}}, {{cssxref(\"margin\")}}, {{cssxref(\"mask\")}}, {{cssxref(\"offset\")}}, {{cssxref(\"outline\")}}, {{cssxref(\"overflow\")}}, {{cssxref(\"padding\")}}, {{cssxref(\"place-content\")}}, {{cssxref(\"place-items\")}}, {{cssxref(\"place-self\")}}, {{cssxref(\"scroll-margin\")}}, {{cssxref(\"scroll-padding\")}}, {{cssxref(\"text-decoration\")}}, {{cssxref(\"text-emphasis\")}}, {{cssxref(\"transition\")}}\n" }, { "property": "sign_function", "document": "---\ntitle: sign()\nslug: Web/CSS/sign_function\ntags:\n - CSS\n - CSS Function\n - Sign-Related\n - Function\n - Layout\n - Reference\n - Web\n - sign\nbrowser-compat: css.types.sign\nspec-urls: https://drafts.csswg.org/css-values/#sign-funcs\n---\n{{CSSRef}}\n\nThe **`sign()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) contains one calculation, and returns `-1` if the numeric value of the argument is negative, `+1` if the numeric value of the argument is positive, `0⁺` if the numeric value of the argument is 0⁺, and `0⁻` if the numeric value of the argument is 0⁻.\n\n> **Note:** While [`abs()`](/en-US/docs/Web/CSS/abs()) returns the absolute value of the argument, `sign()` returns the sign of the argument.\n\n## Syntax\n\n```css\n/* property: sign(expression) */\ntop: sign( --value );\n```\n\nThe `sign()` function takes only one expression as its argument.\n\n### Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Background image position\n\nFor example, in {{cssxref(\"background-position\")}} positive percentages resolve to a negative length, and vice versa, if the background image is larger than the background area. Thus `sign(10%)` might return `1` or `-1`, depending on how the percentage is resolved! (Or even `0`, if it's resolved against a zero length.)\n\n```css\ndiv {\n background-position: sign(10%);\n}\n```\n\n### Position direction\n\nAnother usecase is to control the {{cssxref(\"position\")}} of the element. Either a positive or a negative value.\n\n```css\ndiv {\n position: absolute;\n top: calc( 100px * sign( var( --value ) ) );\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{CSSxRef(\"abs\")}}\n" }, { "property": "specificity", "document": "---\ntitle: Specificity\nslug: Web/CSS/Specificity\ntags:\n - CSS\n - Example\n - Guide\n - Reference\n - Web\nspec-urls: https://drafts.csswg.org/selectors/#specificity-rules\n---\n{{CSSRef}}\n\n**Specificity** is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of [CSS selectors](/en-US/docs/Web/CSS/Reference#selectors).\n\n## How is specificity calculated?\n\nSpecificity is a weight that is applied to a given CSS declaration, determined by the number of each [selector type](#selector_types) in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, [directly targeted elements](#directly_targeted_elements_vs._inherited_styles) will always take precedence over rules which an element inherits from its ancestor.\n\n> **Note:** [Proximity of elements](#tree_proximity_ignorance) in the document tree has no effect on the specificity.\n\n### Selector Types\n\nThe following list of selector types increases by specificity:\n\n1. [Type selectors](/en-US/docs/Web/CSS/Type_selectors) (e.g., `h1`) and pseudo-elements (e.g., `::before`).\n2. [Class selectors](/en-US/docs/Web/CSS/Class_selectors) (e.g., `.example`), attributes selectors (e.g., `[type=\"radio\"]`) and pseudo-classes (e.g., `:hover`).\n3. [ID selectors](/en-US/docs/Web/CSS/ID_selectors) (e.g., `#example`).\n\nUniversal selector ({{CSSxRef(\"Universal_selectors\", \"*\")}}), combinators ({{CSSxRef(\"Adjacent_sibling_combinator\", \"+\")}}, {{CSSxRef(\"Child_combinator\", \">\")}}, {{CSSxRef(\"General_sibling_combinator\", \"~\")}}, [\" \"](/en-US/docs/Web/CSS/Descendant_combinator), {{CSSxRef(\"Column_combinator\", \"||\")}}) and negation pseudo-class ({{CSSxRef(\":not\", \":not()\")}}) have no effect on specificity. (The selectors declared _inside_ `:not()` do, however.)\n\nFor more information, visit: [\"Specificity\" in \"Cascade and inheritance\"](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2), you can also visit: \n\nInline styles added to an element (e.g., `style=\"font-weight: bold;\"`) always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.\n\n### The !important exception\n\nWhen an `important` rule is used on a style declaration, this declaration overrides any other declarations. Although technically `!important` has nothing to do with specificity, it interacts directly with it. Using `!important,` however, is **bad practice** and should be avoided because it makes debugging more difficult by breaking the natural [cascading](/en-US/docs/Web/CSS/Cascade) in your stylesheets. When two conflicting declarations with the `!important` rule are applied to the same element, the declaration with a greater specificity will be applied.\n\n**Some rules of thumb:**\n\n- **Always** look for a way to use specificity before even considering `!important`\n- **Only** use `!important` on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).\n- **Never** use `!important` when you're writing a plugin/mashup.\n- **Never** use `!important` on site-wide CSS.\n\n**Instead of using `!important`, consider:**\n\n1. Make better use of the CSS cascade\n2. Use more specific rules. By indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority:\n\n ```html\n
      \n Text\n
      \n ```\n\n ```css\n div#test span { color: green; }\n div span { color: blue; }\n span { color: red; }\n ```\n\n No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)\n\n3. As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.\n\n ```css\n #myId#myId span { color: yellow; }\n .myClass.myClass span { color: orange; }\n ```\n\n#### How !important can be used:\n\n##### A) Overriding inline styles\n\nYour global CSS file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. Both inline styles and !important are considered bad practice, but sometimes you need the latter to override the former.\n\nIn this case, you could set certain styles in your global CSS file as !important, thus overriding inline styles set directly on elements.\n\n```html\n
      What color am I?
      \n```\n\n```css\n.foo[style*=\"color: red\"] {\n color: firebrick !important;\n}\n```\n\nMany JavaScript frameworks and libraries add inline styles. Using `!important` with a very targeted selector is one way to override these inline styles.\n\n##### B) Overriding high specificity\n\n```css\n#someElement p {\n color: blue;\n}\n\np.awesome {\n color: red;\n}\n```\n\nHow do you make `awesome` paragraphs always turn red, even ones inside `#someElement`? Without `!important`, the first rule will have more specificity and will win over the second rule.\n\n#### How to override `!important`\n\nA) Add another CSS rule with `!important`, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one. This works because in a specificity tie, the last rule defined wins.\n\nSome examples with a higher specificity:\n\n```css\ntable td { height: 50px !important; }\n.myTable td { height: 50px !important; }\n#myTable td { height: 50px !important; }\n```\n\nB) Or add the same selector after the existing one:\n\n```css\ntd { height: 50px !important; }\n```\n\nC) Or, preferably, rewrite the original rule to avoid the use of `!important` altogether.\n\n```css\n[id=\"someElement\"] p {\n color: blue;\n}\n\np.awesome {\n color: red;\n}\n```\n\nIncluding an id as part of an attribute selector instead of as an id selector gives it the same specificity as a class. Both selectors above now have the same weight. In a specificity tie, the last rule defined wins.\n\n#### For more information, visit:\n\n- \n- \n- \n- \n- \n\n### The :is() and :not() exceptions\n\nThe matches-any pseudo-class {{CSSxRef(\":is\", \":is()\")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(\":not\", \":not()\")}} are _not_ considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of [selector types](#selector_types).\n\nThis chunk of CSS ...\n\n```css\ndiv.outer p {\n color: orange;\n}\n\ndiv:not(.outer) p {\n color: blueviolet;\n}\n```\n\n... when used with the following HTML ...\n\n```html\n
      \n

      This is in the outer div.

      \n
      \n

      This text is in the inner div.

      \n
      \n
      \n```\n\n... appears on the screen like this:\n\n{{EmbedLiveSample(\"The_is_and_not_exceptions\")}}\n\n### The :where() exception\n\nThe specificity-adjustment pseudo-class {{CSSxRef(\":where\", \":where()\")}} {{Experimental_Inline}} always has its specificity replaced with zero.\n\nThis chunk of CSS ...\n\n```css\ndiv:where(.outer) p {\n color: orange;\n}\n\ndiv p {\n color: blueviolet;\n}\n```\n\n```css hidden\n#no-where-support {\n margin: 0.5em;\n border: 1px solid red;\n}\n\n#no-where-support:where(*) {\n display: none !important;\n}\n```\n\n... when used with the following HTML ...\n\n```html hidden\n
      \n⚠️ Your browser doesn't support the :where() pseudo-class.\n
      \n```\n\n```html\n
      \n

      This is in the outer div.

      \n
      \n

      This text is in the inner div.

      \n
      \n
      \n```\n\n... appears on the screen like this:\n\n{{EmbedLiveSample(\"The_where_exception\")}}\n\n### Form-based specificity\n\nSpecificity is based on the form of a selector. In the following case, the selector `*[id=\"foo\"]` counts as an attribute selector for the purpose of determining the selector's specificity, even though it selects an ID.\n\nThe following CSS styles ...\n\n```css\n*#foo {\n color: green;\n}\n\n*[id=\"foo\"] {\n color: purple;\n}\n```\n\n... when used with this markup ...\n\n```html\n

      I am a sample text.

      \n```\n\n... end up looking like this:\n\n{{EmbedLiveSample(\"Form-based_specificity\")}}\n\nThis is because it matches the same element but the ID selector has a higher specificity.\n\n### Tree proximity ignorance\n\nThe proximity of an element to other elements that are referenced in a given selector has no impact on specificity. The following style declaration ...\n\n```css\nbody h1 {\n color: green;\n}\n\nhtml h1 {\n color: purple;\n}\n```\n\n... with the following HTML ...\n\n```html\n\n \n

      Here is a title!

      \n \n\n```\n\n... will render as:\n\n{{EmbedLiveSample(\"Tree_proximity_ignorance\")}}\n\nThis is because the two declarations have equal [selector type](#selector_types) counts, but the `html h1` selector is declared last.\n\n### Directly targeted elements vs. inherited styles\n\nStyles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule. This CSS ...\n\n```css\n#parent {\n color: green;\n}\n\nh1 {\n color: purple;\n}\n```\n\n... with the following HTML ...\n\n```html\n\n \n

      Here is a title!

      \n \n\n```\n\n... will also render as:\n\n{{EmbedLiveSample(\"Directly_targeted_elements_vs._inherited_styles\")}}\n\nThis is because the `h1` selector targets the element specifically, but the green selector is only inherited from its parent.\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- Specificity Calculator: An interactive website to test and understand your own CSS rules - \n- CSS3 Selectors Specificity - [http://www.w3.org/TR/selectors/#specificity](https://www.w3.org/TR/selectors/#specificity)\n- {{CSS_Key_Concepts}}\n" }, { "property": "specified_value", "document": "---\ntitle: Specified value\nslug: Web/CSS/specified_value\ntags:\n - CSS\n - Guide\n - Reference\nspec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value\n---\n{{CSSRef}}\n\nThe **specified value** of a [CSS](/en-US/docs/Web/CSS) property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules:\n\n1. If the document's style sheet explicitly specifies a value for the property, the given value will be used.\n2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element.\n3. If none of the above pertain, the element's [initial value](/en-US/docs/Web/CSS/initial_value) will be used.\n\n## Examples\n\n### HTML\n\n```html\n

      My specified color is given explicitly in the CSS.

      \n\n
      The specified values of all my properties default to their\n initial values, because none of them are given in the CSS.
      \n\n
      \n

      The specified value of my font family is not given explicitly\n in the CSS, so it is inherited from my parent. However,\n the border is not an inheriting property.

      \n
      \n```\n\n### CSS\n\n```css\n.fun {\n border: 1px dotted pink;\n font-family: fantasy;\n}\n\np {\n color: green;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", 500, 220)}}\n\n## Specifications\n\n{{Specifications}}\n\n## See also\n\n- {{CSS_key_concepts}}\n" }, { "property": "symbols", "document": "---\ntitle: symbols()\nslug: Web/CSS/symbols\ntags:\n - CSS\n - CSS Counter Styles\n - Function\n - Reference\nbrowser-compat: css.properties.list-style-type.symbols\n---\n{{CSSRef}}\n\nThe **`symbols()`** CSS function lets you define counter styles inline, directly as the value of a property such as {{cssxref(\"list-style\")}}. Unlike {{cssxref(\"@counter-style\")}}, `symbols()` is _anonymous_ (i.e., it can only be used once). Although less powerful, it is shorter and easier to write than {{cssxref(\"@counter-style\")}}.\n\n## Syntax\n\n```css\nsymbols() = symbols( ? [ | ]+ );\n```\n\n`` can be one of the following:\n\n- `cyclic`: The system cycles through the given values in the order of their definition, and returns to the start when it reaches the end.\n- `numeric`: The system interprets the given values as the successive units of a place-value numbering system.\n- `alphabetic`: The system interprets the given values as the digits of an alphabetic numbering system, like a place-value numbering system but without `0`.\n- `symbolic`: The system cycles through the values, printing them an additional time at each cycle (one time for the first cycle, two times for the second, etc.).\n- `fixed`: The system cycles through the given values once, then falls back to Arabic numerals.\n\n## Examples\n\n### HTML\n\n```html\n
        \n
      1. One
        2. \n
      2. Two
        3. \n
      3. Three
        4. \n
      4. Four
        5. \n
      5. Five
        6. \n
      \n```\n\n### CSS\n\n```css\nol {\n list-style: symbols(cyclic \"*\" \"†\" \"‡\");\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Examples','100%',200)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"@counter-style\")}}\n- {{cssxref(\"list-style-type\")}} and the corresponding shorthand {{cssxref(\"list-style\")}}.\n" }, { "property": "syntax", "document": "---\ntitle: Syntax\nslug: Web/CSS/Syntax\ntags:\n - CSS\n - Guide\n - Reference\n - Web\n---\n{{CSSRef}}\n\nThe basic goal of the Cascading Stylesheet ([CSS](/en-US/docs/Web/CSS)) language is to allow a browser engine to paint elements of the page with specific features, like colors, positioning, or decorations. The _CSS syntax_ reflects this goal and its basic building blocks are:\n\n- The **property** which is an identifier, that is a human-readable _name_, that defines which feature is considered.\n- The **value** which describe how the feature must be handled by the engine. Each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the browser engine.\n\n## CSS declarations\n\nSetting CSS properties to specific values is the core function of the CSS language. A property and value pair is called a **declaration**, and any CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out, and to style it.\n\nBoth properties and values are case-insensitive by default in CSS. The pair is separated by a colon, '`:`' (`U+003A COLON`), and white spaces before, between, and after properties and values, but not necessarily inside, are ignored.\n\n![css syntax - declaration.png](css_syntax_-_declaration.png)\n\nThere are more than [100 different properties](/en-US/docs/Web/CSS/Reference) in CSS and a nearly infinite number of different values. Not all pairs of properties and values are allowed and each property defines what are the valid values. When a value is not valid for a given property, the declaration is deemed _invalid_ and is wholly ignored by the CSS engine.\n\n## CSS declaration blocks\n\nDeclarations are grouped in **blocks**, that is in a structure delimited by an opening brace, '`{`' (`U+007B LEFT CURLY BRACKET`), and a closing one, '`}`' (`U+007D RIGHT CURLY BRACKET`). Blocks sometimes can be nested, so opening and closing braces must be matched.\n\n![css syntax - block.png](css_syntax_-_block.png)\n\nSuch blocks are naturally called **declaration blocks** and declarations inside them are separated by a semi-colon, '`;`' (`U+003B SEMICOLON`). A declaration block may be empty, that is containing null declaration. White spaces around declarations are ignored. The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered _good style_ to do it as it prevents forgetting to add it when extending the block with another declaration.\n\nA CSS declaration block is visualized in the diagram below.\n\n![css syntax - declarations block.png](declaration-block.png)\n\n> **Note:** The content of a CSS declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be put inside an HTML {{htmlattrxref(\"style\")}} attribute.\n\n## CSS rulesets\n\nIf style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.\n\nCSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by one or more comma-separated [**selectors**](/en-US/docs/Web/CSS/CSS_Selectors), which are conditions selecting some elements of the page. A [selector group](/en-US/docs/Web/CSS/Selector_list) and an associated declarations block, together, are called a **ruleset**, or often a **rule**.\n\nA CSS ruleset (or rule) is visualized in the diagram below.\n\n![css syntax - ruleset.png](ruleset.png)\n\nAs an element of the page may be matched by several selectors, and therefore by several rules potentially containing a given property several times, with different values, the CSS standard defines which one has precedence over the other and must be applied: this is called the [cascade](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) algorithm.\n\n> **Note:** It is important to note that even if a ruleset characterized by a group of selectors is a kind of shorthand replacing rulesets with a single selector each, this doesn't apply to the validity of the ruleset itself.\n>\n> This leads to an important consequence: if one single basic selector is invalid, like when using an unknown pseudo-element or pseudo-class, the whole _selector_ is invalid and therefore the entire rule is ignored (as invalid too).\n\n## CSS statements\n\nRulesets are the main building blocks of a style sheet, which often consists of only a big list of them. But there is other information that a Web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more. It will use other and specific kinds of statements to do that.\n\nA **statement** is a building block that begins with any non-space characters and ends at the first closing brace or semi-colon (outside a string, non-escaped and not included into another {}, () or \\[] pair).\n\n![css syntax - statements Venn diag.png](css_syntax_-_statements_venn_diag.png)\n\nThere are two kinds of statements:\n\n- **Rulesets** (or _rules_) that, as seen, associate a collection of CSS declarations to a condition described by a [selector](/en-US/docs/Web/CSS/CSS_Selectors).\n- **At-rules** that start with an at sign, '`@`' (`U+0040 COMMERCIAL AT`), followed by an identifier and then continuing up to the end of the statement, that is up to the next semi-colon (;) outside of a block, or the end of the next block. Each type of [at-rules](/en-US/docs/Web/CSS/At-rule), defined by the identifier, may have its own internal syntax, and semantics of course. They are used to convey meta-data information (like {{ cssxref(\"@charset\") }} or {{ cssxref(\"@import\") }}), conditional information (like {{ cssxref(\"@media\") }} or {{ cssxref(\"@document\") }}), or descriptive information (like {{ cssxref(\"@font-face\") }}).\n\nAny statement which isn't a ruleset or an at-rule is invalid and ignored.\n\n### Nested statements\n\nThere is another group of statements – the **nested statements**. These are statements that can be used in a specific subset of at-rules – the _conditional group rules_. These statements only apply if a specific condition is matched: the `@media` at-rule content is applied only if the device on which the browser runs matches the expressed condition; the `@document` at-rule content is applied only if the current page matches some conditions, and so on. In CSS1 and CSS2.1, only _rulesets_ could be used inside conditional group rules. That was very restrictive and this restriction was lifted in [_CSS Conditionals Level 3_](/en-US/docs/Web/CSS/CSS_Conditional_Rules). Now, though still experimental and not supported by every browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.\n\n## See also\n\n- {{ CSS_key_concepts()}}\n" }, { "property": "tab-size", "document": "---\ntitle: tab-size\nslug: Web/CSS/tab-size\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.tab-size\n---\n{{CSSRef}}\n\nThe **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).\n\n{{EmbedInteractiveExample(\"pages/css/tab-size.html\")}}\n\n## Syntax\n\n```css\n/* values */\ntab-size: 4;\ntab-size: 0;\n\n/* values */\ntab-size: 10px;\ntab-size: 2em;\n\n/* Global values */\ntab-size: inherit;\ntab-size: initial;\ntab-size: revert;\ntab-size: revert-layer;\ntab-size: unset;\n```\n\n### Values\n\n- {{CSSxRef(\"<integer>\")}}\n - : A multiple of the advance width of the space character (U+0020) to be used as the width of tabs. Must be nonnegative.\n- {{CSSxRef(\"<length>\")}}\n - : The width of tabs. Must be nonnegative.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Expanding by character count\n\n```css\npre {\n tab-size: 4; /* Set tab size to 4 characters wide */\n}\n```\n\n### Collapse tabs\n\n```css\npre {\n tab-size: 0; /* Remove indentation */\n}\n```\n\n### Comparing to the default size\n\nThis example compares a default tab size with a custom tab size. Note that {{cssxref(\"white-space\")}} is set to `pre` to prevent the tabs from collapsing.\n\n#### HTML\n\n```html\n

      no tab

      \n

      default tab size of 8 characters wide

      \n

      custom tab size of 3 characters wide

      \n

         3 spaces, equivalent to the custom tab size

      \n```\n\n#### CSS\n\n```css\np {\n white-space: pre;\n}\n\n.custom {\n tab-size: 3;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Comparing_to_the_default_size')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref('white-space')}}\n- [Controlling size of a tab character (U+0009)](https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html), an email by Anne van Kesteren to the CSSWG.\n" }, { "property": "scrollbar-color", "document": "---\ntitle: scrollbar-color\nslug: Web/CSS/scrollbar-color\ntags:\n - CSS\n - CSS Property\n - Reference\n - css scrollbars\n - recipe:css-property\n - scrollbar-color\nbrowser-compat: css.properties.scrollbar-color\n---\n{{CSSRef}}\n\nThe **`scrollbar-color`** [CSS](/en-US/docs/Web/CSS) property sets the color of the scrollbar track and thumb.\n\nThe **track** refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.\n\nThe **thumb** refers to the moving part of the scrollbar, which usually floats on top of the track.\n\n## Syntax\n\n```css\n/* Keyword values */\nscrollbar-color: auto;\n\n/* values */\nscrollbar-color: rebeccapurple green; /* Two valid colors.\nThe first applies to the thumb of the scrollbar, the second to the track. */\n\n/* Global values */\nscrollbar-color: inherit;\nscrollbar-color: initial;\nscrollbar-color: revert;\nscrollbar-color: revert-layer;\nscrollbar-color: unset;\n```\n\n### Values\n\n- ``\n\n - : Defines the color of the scrollbar.\n\n \n \n \n \n \n \n \n \n \n \n \n
      auto\n Default platform rendering for the track portion of the scrollbar, in\n the absence of any other related scrollbar color properties.\n
      <color> <color>\n Applies the first color to the scrollbar thumb, the second to the\n scrollbar track.\n
      \n\n > **Note:** User Agents must apply any `scrollbar-color` value set on the root element to the viewport.\n\n## Accessibility concerns\n\nWhen using `scrollbar-color` property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See [Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1](https://www.w3.org/TR/WCAG20-TECHS/G183.html).\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{CSSSyntax}}\n\n## Examples\n\n### Coloring overflow scrollbars\n\n#### CSS\n\n```css\n.scroller {\n width: 300px;\n height: 100px;\n overflow-y: scroll;\n scrollbar-color: rebeccapurple green;\n}\n```\n\n#### HTML\n\n```html\n
      Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"Coloring_overflow_scrollbars\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [`scrollbar-width`](/en-US/docs/Web/CSS/scrollbar-width)\n- [`overflow`](/en-US/docs/Web/CSS/overflow)\n" }, { "property": "table-layout", "document": "---\ntitle: table-layout\nslug: Web/CSS/table-layout\ntags:\n - CSS\n - CSS Property\n - CSS Tables\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.table-layout\n---\n{{CSSRef}}\n\nThe **`table-layout`** CSS property sets the algorithm used to lay out {{htmlelement(\"table\")}} cells, rows, and columns.\n\n{{EmbedInteractiveExample(\"pages/css/table-layout.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\ntable-layout: auto;\ntable-layout: fixed;\n\n/* Global values */\ntable-layout: inherit;\ntable-layout: initial;\ntable-layout: revert;\ntable-layout: revert-layer;\ntable-layout: unset;\n```\n\n### Values\n\n- `auto`\n - : By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.\n- `fixed`\n\n - : Table and column widths are set by the widths of `table` and `col` elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.\n\n Under the \"fixed\" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the \"automatic\" layout method, but subsequent cell content might not fit in the column widths provided. Cells use the {{Cssxref(\"overflow\")}} property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won't overflow the cells.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Fixed-width tables with text-overflow\n\nThis example uses a fixed table layout, combined with the {{cssxref(\"width\")}} property, to restrict the table's width. The {{cssxref(\"text-overflow\")}} property is used to apply an ellipsis to words that are too long to fit. If the table layout were `auto`, the table would grow to accommodate its contents, despite the specified `width`.\n\n#### HTML\n\n```html\n\n \n \n \n \n
      EdWood
      AlbertSchweitzer
      JaneFonda
      WilliamShakespeare
      \n```\n\n#### CSS\n\n```css\ntable {\n table-layout: fixed;\n width: 120px;\n border: 1px solid red;\n}\n\ntd {\n border: 1px solid blue;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [``](/en-US/docs/Web/HTML/Element/table)\n" }, { "property": "text-align", "document": "---\ntitle: text-align\nslug: Web/CSS/text-align\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-align\n---\n{{CSSRef}}\n\nThe **`text-align`** [CSS](/en-US/docs/Web/CSS) property sets the horizontal alignment of the content inside a block element or table-cell box. This means it works like {{cssxref(\"vertical-align\")}} but in the horizontal direction.\n\n{{EmbedInteractiveExample(\"pages/css/text-align.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\ntext-align: start;\ntext-align: end;\ntext-align: left;\ntext-align: right;\ntext-align: center;\ntext-align: justify;\ntext-align: justify-all;\ntext-align: match-parent;\n\n/* Character-based alignment in a table column */\ntext-align: \".\";\ntext-align: \".\" center;\n\n/* Block alignment values (Non-standard syntax) */\ntext-align: -moz-center;\ntext-align: -webkit-center;\n\n/* Global values */\ntext-align: inherit;\ntext-align: initial;\ntext-align: revert;\ntext-align: revert-layer;\ntext-align: unset;\n```\n\nThe `text-align` property is specified in one of the following ways:\n\n- Using the keyword values `start`, `end`, `left`, `right`, `center`, `justify`, `justify-all`, or `match-parent`.\n- Using a `` value only, in which case the other value defaults to `right`.\n- Using both a keyword value and a [``](#string) value.\n\n### Values\n\n- `start`\n - : The same as `left` if direction is left-to-right and `right` if direction is right-to-left.\n- `end`\n - : The same as `right` if direction is left-to-right and `left` if direction is right-to-left.\n- `left`\n - : The inline contents are aligned to the left edge of the line box.\n- `right`\n - : The inline contents are aligned to the right edge of the line box.\n- `center`\n - : The inline contents are centered within the line box.\n- `justify`\n - : The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.\n- `justify-all` {{experimental_inline}}\n - : Same as `justify`, but also forces the last line to be justified.\n- `match-parent`\n - : Similar to `inherit`, but the values `start` and `end` are calculated according to the parent's {{cssxref(\"direction\")}} and are replaced by the appropriate `left` or `right` value.\n- {{cssxref(\"<string>\")}} {{experimental_inline}}\n - : When applied to a table cell, specifies the alignment character around which the cell's contents will align.\n\n## Accessibility concerns\n\nThe inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Start alignment\n\n#### HTML\n\n```html\n

      \n Integer elementum massa at nulla placerat varius.\n Suspendisse in libero risus, in interdum massa.\n Vestibulum ac leo vitae metus faucibus gravida ac in neque.\n Nullam est eros, suscipit sed dictum quis, accumsan a ligula.\n

      \n```\n\n#### CSS\n\n```css\n.example {\n text-align: start;\n border: solid;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Start_alignment\",\"100%\",\"100%\")}}\n\n### Centered text\n\n#### HTML\n\n```html\n

      \n Integer elementum massa at nulla placerat varius.\n Suspendisse in libero risus, in interdum massa.\n Vestibulum ac leo vitae metus faucibus gravida ac in neque.\n Nullam est eros, suscipit sed dictum quis, accumsan a ligula.\n

      \n```\n\n#### CSS\n\n```css\n.example {\n text-align: center;\n border: solid;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Centered_text\",\"100%\",\"100%\")}}\n\n### Example using \"justify\"\n\n#### HTML\n\n```html\n

      \n Integer elementum massa at nulla placerat varius.\n Suspendisse in libero risus, in interdum massa.\n Vestibulum ac leo vitae metus faucibus gravida ac in neque.\n Nullam est eros, suscipit sed dictum quis, accumsan a ligula.\n

      \n```\n\n#### CSS\n\n```css\n.example {\n text-align: justify;\n border: solid;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Example using \"justify\"',\"100%\",\"100%\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{Cssxref(\"margin\",\"margin: auto\")}}, {{Cssxref(\"margin-left\",\"margin-left: auto\")}}, {{Cssxref(\"vertical-align\")}}\n" }, { "property": "shape-image-threshold", "document": "---\ntitle: shape-image-threshold\nslug: Web/CSS/shape-image-threshold\ntags:\n - Boundaries\n - CSS\n - CSS Property\n - CSS Shapes\n - Float Area\n - Opacity\n - Property\n - Reference\n - Shape\n - recipe:css-property\n - shape-image-threshold\nbrowser-compat: css.properties.shape-image-threshold\n---\n{{CSSRef}}\n\nThe **`shape-image-threshold`** [CSS](/en-US/docs/Web/CSS) property sets the alpha channel threshold used to extract the shape using an image as the value for {{cssxref(\"shape-outside\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/shape-image-threshold.html\")}}\n\nAny pixels whose alpha component's value is greater than the threshold are considered to be part of the shape for the purposes of determining its boundaries. For example, a value of `0.5` means that the shape will enclose all the pixels that are more than 50% opaque.\n\n## Syntax\n\n```css\n/* value */\nshape-image-threshold: 0.7;\n\n/* Global values */\nshape-image-threshold: inherit;\nshape-image-threshold: initial;\nshape-image-threshold: revert;\nshape-image-threshold: revert-layer;\nshape-image-threshold: unset;\n```\n\n### Values\n\n- {{cssxref(\"<alpha-value>\")}}\n - : Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. Values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) are clamped to this range.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Aligning text to a gradient\n\nThis example creates a {{HTMLElement(\"div\")}} block with a gradient background image. The gradient is established as a CSS shape using `shape-outside`, so that pixels within the gradient which are at least 20% opaque (that is, those pixels with an alpha component greater than 0.2) are considered part of the shape.\n\n#### HTML\n\n```html\n
      \n\n

      \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi\n voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint\n facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat\n adipisci, libero quae nihil porro debitis laboriosam inventore animi\n impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque\n a mollitia dicta repudiandae illum exercitationem aliquam repellendus\n ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto\n nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit\n accusamus iusto dolore, at provident eius alias maxime pariatur non\n deleniti ipsum sequi rem eveniet laboriosam magni expedita?\n

      \n```\n\n#### CSS\n\n```css\n#gradient-shape {\n width: 150px;\n height: 150px;\n float: left;\n background-image: linear-gradient(30deg, black, transparent 80%,\n transparent);\n shape-outside: linear-gradient(30deg, black, transparent 80%,\n transparent);\n shape-image-threshold: 0.2;\n}\n```\n\nThe shape is established here using {{cssxref(\"background-image\")}} with a linear gradient rather than an image file. The same gradient is also used as the image from which the shape is derived for establishing the float area, using the {{cssxref(\"shape-outside\")}} property.\n\nThe 20% opacity threshold for treating gradient pixels as part of the shape is then established using `shape-image-threshold` with a value of `0.2`.\n\n#### Result\n\n{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes)\n- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes)\n- {{cssxref(\"<basic-shape>\")}}\n- {{cssxref(\"shape-outside\")}}\n- {{cssxref(\"shape-margin\")}}\n" }, { "property": "text-combine-upright", "document": "---\ntitle: text-combine-upright\nslug: Web/CSS/text-combine-upright\ntags:\n - CSS\n - CSS Property\n - CSS Writing Modes\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-combine-upright\n---\n{{CSSRef}}\n\nThe **`text-combine-upright`** [CSS](/en-US/docs/Web/CSS) property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.\n\nThis is used to produce an effect that is known as tate-chū-yoko (縦中横) in Japanese, or as 直書橫向 in Chinese.\n\n```css\n/* Keyword values */\ntext-combine-upright: none;\ntext-combine-upright: all;\n\n/* Digits values */\ntext-combine-upright: digits; /* fits 2 consecutive digits horizontally inside vertical text */\ntext-combine-upright: digits 4; /* fits up to 4 consecutive digits horizontally inside vertical text */\n\n/* Global values */\ntext-combine-upright: inherit;\ntext-combine-upright: initial;\ntext-combine-upright: revert;\ntext-combine-upright: revert-layer;\ntext-combine-upright: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : There is no special processing.\n- `all`\n - : Attempts to typeset all consecutive characters within the box horizontally, such that they take up the space of a single character within the vertical line of the box.\n- `digits ?`\n - : Attempts to display a sequence of consecutive ASCII digits (U+0030–U+0039) that has as many or fewer characters than the specified integer, such that it takes up the space of a single character within the vertical line box. If the integer is omitted, it computes to 2. Integers outside the range of 2-4 are invalid.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Example using \"digits\"\n\nThe digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers.\n\n#### HTML\n\n```html\n

      平成20年4月16日に

      \n```\n\n#### CSS\n\n```css\n.exampleText {\n writing-mode: vertical-lr;\n text-combine-upright: digits 2;\n font: 36px serif;\n}\n```\n\n#### Results\n\n{{EmbedLiveSample('Example using \"digits\"', 100, 350, \"tate-chu-yoko.png\")}}\n\n### Example using \"all\"\n\nThe all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.\n\n#### HTML\n\n```html\n

      民國105年4月29日

      \n```\n\n#### CSS\n\n```css\nhtml { writing-mode: vertical-rl; font: 24px serif }\n.num { text-combine-upright: all }\n```\n\n#### Results\n\n{{EmbedLiveSample('Example using \"all\"', 250, 300, \"text-combine-upright-all.png\")}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"writing-mode\")}}, {{cssxref(\"text-orientation\")}}\n" }, { "property": "text-decoration-color", "document": "---\ntitle: text-decoration-color\nslug: Web/CSS/text-decoration-color\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - CSS Text Decoration\n - HTML Colors\n - HTML Styles\n - Reference\n - Styling HTML\n - Styling text\n - color\n - colors\n - recipe:css-property\nbrowser-compat: css.properties.text-decoration-color\n---\n{{ CSSRef }}\n\nThe **`text-decoration-color`** [CSS](/en-US/docs/Web/CSS) property sets the color of decorations added to text by {{ cssxref(\"text-decoration-line\") }}.\n\nThe color applies to decorations, such as underlines, overlines, strikethroughs, and wavy lines like those used to mark misspellings, in the scope of the property's value.\n\n{{EmbedInteractiveExample(\"pages/css/text-decoration-color.html\")}}\n\nCSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the {{cssxref(\"text-decoration-line\")}} property), and specifying the line color (with `text-decoration-color`) on a per-element basis.\n\n## Syntax\n\n```css\n/* values */\ntext-decoration-color: currentColor;\ntext-decoration-color: red;\ntext-decoration-color: #00ff00;\ntext-decoration-color: rgba(255, 128, 128, 0.5);\ntext-decoration-color: transparent;\n\n/* Global values */\ntext-decoration-color: inherit;\ntext-decoration-color: initial;\ntext-decoration-color: revert;\ntext-decoration-color: revert-layer;\ntext-decoration-color: unset;\n```\n\n### Values\n\n- {{cssxref(\"<color>\")}}\n - : The color of the line decoration.\n\n## Accessibility concerns\n\nIt is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.\n\nColor alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enough to indicate a link has focus.\n\n- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n```html\n

      This paragraph has some erroneous text\n inside it that I want to call attention to.

      \n```\n\n```css\np {\n text-decoration-line: underline;\n text-decoration-color: cyan;\n}\n\ns {\n text-decoration-line: line-through;\n text-decoration-color: red;\n text-decoration-style: wavy;\n}\n```\n\n{{ EmbedLiveSample('Examples') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref(\"text-decoration\")}} shorthand property instead.\n- The {{cssxref(\"<color>\")}} data type\n- Other color-related properties: {{cssxref(\"background-color\")}}, {{cssxref(\"border-color\")}}, {{cssxref(\"outline-color\")}}, {{cssxref(\"text-decoration-color\")}}, {{cssxref(\"text-emphasis-color\")}}, {{cssxref(\"text-shadow\")}}, {{cssxref(\"caret-color\")}}, and {{cssxref(\"column-rule-color\")}}\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n" }, { "property": "text-decoration-line", "document": "---\ntitle: text-decoration-line\nslug: Web/CSS/text-decoration-line\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-decoration-line\n---\n{{CSSRef}}\n\nThe **`text-decoration-line`** [CSS](/en-US/docs/Web/CSS) property sets the kind of decoration that is used on text in an element, such as an underline or overline.\n\n{{EmbedInteractiveExample(\"pages/css/text-decoration-line.html\")}}\n\nWhen setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref(\"text-decoration\")}} shorthand property instead.\n\n## Syntax\n\n```css\n/* Single keyword */\ntext-decoration-line: none;\ntext-decoration-line: underline;\ntext-decoration-line: overline;\ntext-decoration-line: line-through;\ntext-decoration-line: blink;\n\n/* Multiple keywords */\ntext-decoration-line: underline overline; /* Two decoration lines */\ntext-decoration-line: overline underline line-through; /* Multiple decoration lines */\n\n/* Global values */\ntext-decoration-line: inherit;\ntext-decoration-line: initial;\ntext-decoration-line: revert;\ntext-decoration-line: revert-layer;\ntext-decoration-line: unset;\n```\n\nThe `text-decoration-line` property is specified as `none`, or **one or more** space-separated values from the list below.\n\n### Values\n\n- `none`\n - : Produces no text decoration.\n- `underline`\n - : Each line of text has a decorative line beneath it.\n- `overline`\n - : Each line of text has a decorative line above it.\n- `line-through`\n - : Each line of text has a decorative line going through its middle.\n- `blink` {{deprecated_inline}}\n - : The text blinks (alternates between visible and invisible). Conforming user agents may not blink the text. This value is **deprecated** in favor of [CSS animations](/en-US/docs/Web/CSS/animation).\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n```html\n

      Here's some text with wavy red underline!

      \n

      This text has lines both above and below it.

      \n```\n\n```css\n.wavy {\n text-decoration-line: underline;\n text-decoration-style: wavy;\n text-decoration-color: red;\n}\n\n.both {\n text-decoration-line: underline overline;\n}\n```\n\n{{ EmbedLiveSample('Examples', '', '', '') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref(\"text-decoration\")}} shorthand property instead, which also includes:\n - {{cssxref(\"text-decoration-style\")}}\n - {{cssxref(\"text-decoration-color\")}}\n - {{cssxref(\"text-decoration-thickness\")}}\n- {{cssxref(\"text-underline-offset\")}}\n" }, { "property": "text-decoration-skip-ink", "document": "---\ntitle: text-decoration-skip-ink\nslug: Web/CSS/text-decoration-skip-ink\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Layout\n - Reference\n - Web\n - recipe:css-property\n - text-decoration-skip-ink\nbrowser-compat: css.properties.text-decoration-skip-ink\n---\n{{CSSRef}}\n\nThe **`text-decoration-skip-ink`** [CSS](/en-US/docs/Web/CSS) property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.\n\n{{EmbedInteractiveExample(\"pages/css/text-decoration-skip-ink.html\")}}\n\n`text-decoration-skip-ink` is not part of the {{cssxref(\"text-decoration\")}} shorthand.\n\n## Syntax\n\n```css\n/* Single keyword */\ntext-decoration-skip-ink: none;\ntext-decoration-skip-ink: auto;\ntext-decoration-skip-ink: all;\n\n/* Global keywords */\ntext-decoration-skip-ink: inherit;\ntext-decoration-skip-ink: initial;\ntext-decoration-skip-ink: revert;\ntext-decoration-skip-ink: revert-layer;\ntext-decoration-skip-ink: unset;\n```\n\n### Values\n\n- `none`\n - : Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.\n- `auto`\n - : The default — the browser _may_ interrupt underlines and overlines so that they do not touch or closely approach a glyph. That is, they are interrupted where they would otherwise cross over a glyph.\n- `all`\n\n - : The browser _must_ interrupt underlines and overlines so that they do not touch or closely approach a glyph. This can be helpful with certain Chinese, Japanese, or Korean (CJK) fonts, where the `auto` behavior might not create interruptions.\n\n ![An example of \"text-decoration-skip-ink\".](decoration-skip-ink.png)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

      You should go on a quest for a cup of coffee.

      \n

      Or maybe you'd prefer some tea?

      \n

      この文は、 text-decoration-skip-ink: auto の使用例を示しています。

      \n

      この文は、 text-decoration-skip-ink: all の使用例を示しています。

      \n```\n\n### CSS\n\n```css\np {\n font-size: 1.5em;\n text-decoration: underline blue;\n text-decoration-skip-ink: auto; /* this is the default anyway */\n}\n\n.no-skip-ink {\n text-decoration-skip-ink: none;\n}\n\n.skip-ink-all{\n text-decoration-skip-ink: all;\n}\n```\n\n### Result\n\n{{EmbedLiveSample(\"Examples\", \"100%\", 250)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref('text-decoration')}}\n- {{cssxref('text-decoration-skip')}}\n" }, { "property": "text-decoration-style", "document": "---\ntitle: text-decoration-style\nslug: Web/CSS/text-decoration-style\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Layout\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-decoration-style\n---\n{{CSSRef}}\n\nThe **`text-decoration-style`** [CSS](/en-US/docs/Web/CSS) property sets the style of the lines specified by {{ cssxref(\"text-decoration-line\") }}. The style applies to all lines that are set with `text-decoration-line`.\n\n{{EmbedInteractiveExample(\"pages/css/text-decoration-style.html\")}}\n\nIf the specified decoration has a specific semantic meaning, like a line-through line meaning that some text has been deleted, authors are encouraged to denote this meaning using an HTML tag, like {{ HTMLElement(\"del\") }} or {{ HTMLElement(\"s\") }}. As browsers can disable styling in some cases, the semantic meaning won't disappear in such a situation.\n\nWhen setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref(\"text-decoration\")}} shorthand property instead.\n\n## Syntax\n\n```css\n/* Keyword values */\ntext-decoration-style: solid;\ntext-decoration-style: double;\ntext-decoration-style: dotted;\ntext-decoration-style: dashed;\ntext-decoration-style: wavy;\n\n/* Global values */\ntext-decoration-style: inherit;\ntext-decoration-style: initial;\ntext-decoration-style: revert;\ntext-decoration-style: revert-layer;\ntext-decoration-style: unset;\n```\n\n### Values\n\n- solid\n - : Draws a single line.\n- double\n - : Draws a double line.\n- dotted\n - : Draws a dotted line.\n- dashed\n - : Draws a dashed line.\n- wavy\n - : Draws a wavy line.\n- \\-moz-none{{ non-standard_inline }}\n - : Draws no line. Use {{ cssxref(\"text-decoration-line\") }}`: none` instead.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Setting a wavy underline\n\nThe following creates a red wavy underline:\n\n#### CSS\n\n```css\n.wavy {\n text-decoration-line: underline;\n text-decoration-style: wavy;\n text-decoration-color: red;\n}\n```\n\n#### HTML\n\n```html\n

      This text has a wavy red line beneath it.

      \n```\n\n#### Results\n\n{{ EmbedLiveSample('Setting_a_wavy_underline', '', '', '') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref(\"text-decoration\")}} shorthand property instead.\n- {{cssxref(\"text-decoration-line\")}}\n- {{cssxref(\"text-decoration-color\")}}\n- {{cssxref(\"text-decoration-thickness\")}}\n- {{cssxref(\"text-underline-offset\")}}\n" }, { "property": "text-decoration-thickness", "document": "---\ntitle: text-decoration-thickness\nslug: Web/CSS/text-decoration-thickness\ntags:\n - CSS\n - CSS Text Decoration\n - Property\n - Reference\n - recipe:css-property\n - text-decoration\n - text-decoration-thickness\nbrowser-compat: css.properties.text-decoration-thickness\n---\n{{CSSRef}}\n\nThe **`text-decoration-thickness`** [CSS](/en-US/docs/Web/CSS) property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.\n\n## Syntax\n\n```css\n/* Single keyword */\ntext-decoration-thickness: auto;\ntext-decoration-thickness: from-font;\n\n/* length */\ntext-decoration-thickness: 0.1em;\ntext-decoration-thickness: 3px;\n\n/* percentage */\ntext-decoration-thickness: 10%;\n\n/* Global values */\ntext-decoration-thickness: inherit;\ntext-decoration-thickness: initial;\ntext-decoration-thickness: revert;\ntext-decoration-thickness: revert-layer;\ntext-decoration-thickness: unset;\n```\n\n### Values\n\n- `auto`\n - : The browser chooses an appropriate width for the text decoration line.\n- `from-font`\n - : If the font file includes information about a preferred thickness, use that value. If the font file doesn't include this information, behave as if `auto` was set, with the browser choosing an appropriate thickness.\n- ``\n - : Specifies the thickness of the text decoration line as a {{cssxref('length')}}, overriding the font file suggestion or the browser default.\n- ``\n - : Specifies the thickness of the text decoration line as a {{cssxref('percentage')}} of **1em** in the current font. A percentage inherits as a relative value, and so therefore scales with changes in the font. The browser must use a minimum of 1 device pixel. For a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font size.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Varying thickness\n\n#### HTML\n\n```html\n

      Here's some text with a 1px red underline.

      \n

      This one has a 5px red underline.

      \n

      This uses the equivalent shorthand.

      \n```\n\n#### CSS\n\n```css\n.thin {\n text-decoration-line: underline;\n text-decoration-style: solid;\n text-decoration-color: red;\n text-decoration-thickness: 1px;\n}\n\n.thick {\n text-decoration-line: underline;\n text-decoration-style: solid;\n text-decoration-color: red;\n text-decoration-thickness: 5px;\n}\n\n.shorthand {\n text-decoration: underline solid red 5px;\n}\n```\n\n#### Results\n\n{{ EmbedLiveSample('Varying_thickness', '', '', '') }}\n\n## Specifications\n\n{{Specifications}}\n\n> **Note:** The property used to be called `text-decoration-width`, but was updated in 2019 to `text-decoration-thickness`.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"text-decoration\")}}\n- {{cssxref(\"text-underline-offset\")}}\n" }, { "property": "text-decoration", "document": "---\ntitle: text-decoration\nslug: Web/CSS/text-decoration\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.text-decoration\n---\n{{CSSRef}}\n\nThe **`text-decoration`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets the appearance of decorative lines on text. It is a shorthand for {{cssxref(\"text-decoration-line\")}}, {{cssxref(\"text-decoration-color\")}}, {{cssxref(\"text-decoration-style\")}}, and the newer {{cssxref(\"text-decoration-thickness\")}} property.\n\n{{EmbedInteractiveExample(\"pages/css/text-decoration.html\")}}\n\nText decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration. For example, in the markup `

      This text has some emphasized words in it.

      `, the style rule `p { text-decoration: underline; }` would cause the entire paragraph to be underlined. The style rule `em { text-decoration: none; }` would not cause any change; the entire paragraph would still be underlined. However, the rule `em { text-decoration: overline; }` would cause a second decoration to appear on \"some emphasized words\".\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`text-decoration-color`](/en-US/docs/Web/CSS/text-decoration-color)\n- [`text-decoration-line`](/en-US/docs/Web/CSS/text-decoration-line)\n- [`text-decoration-style`](/en-US/docs/Web/CSS/text-decoration-style)\n- [`text-decoration-thickness`](/en-US/docs/Web/CSS/text-decoration-thickness)\n\n## Syntax\n\n```css\ntext-decoration: underline;\ntext-decoration: overline red;\ntext-decoration: none;\n\n/* Global values */\ntext-decoration: inherit;\ntext-decoration: initial;\ntext-decoration: revert;\ntext-decoration: revert-layer;\ntext-decoration: unset;\n```\n\nThe `text-decoration` property is specified as one or more space-separated values representing the various longhand text-decoration properties.\n\n### Values\n\n- {{cssxref(\"text-decoration-line\")}}\n - : Sets the kind of decoration used, such as `underline` or `line-through`.\n- {{cssxref(\"text-decoration-color\")}}\n - : Sets the color of the decoration.\n- {{cssxref(\"text-decoration-style\")}}\n - : Sets the style of the line used for the decoration, such as `solid`, `wavy`, or `dashed`.\n- {{cssxref(\"text-decoration-thickness\")}}\n - : Sets the thickness of the line used for the decoration.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Demonstration of text-decoration values\n\n```css\n.under {\n text-decoration: underline red;\n}\n\n.over {\n text-decoration: wavy overline lime;\n}\n\n.line {\n text-decoration: line-through;\n}\n\n.plain {\n text-decoration: none;\n}\n\n.underover {\n text-decoration: dashed underline overline;\n}\n\n.thick {\n text-decoration: solid underline purple 4px;\n}\n\n.blink {\n text-decoration: blink;\n}\n```\n\n```html\n

      This text has a line underneath it.

      \n

      This text has a line over it.

      \n

      This text has a line going through it.

      \n

      This link will not be underlined,\n as links generally are by default. Be careful when removing\n the text decoration on anchors since users often depend on\n the underline to denote hyperlinks.

      \n

      This text has lines above and below it.

      \n

      This text has a really thick purple underline in supporting browsers.

      \n

      This text might blink for you,\n depending on the browser you use.

      \n```\n\n{{EmbedLiveSample('Examples','auto','320')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The individual text-decoration properties are {{cssxref(\"text-decoration-line\")}}, {{cssxref(\"text-decoration-color\")}}, {{cssxref(\"text-decoration-style\")}}, and {{cssxref(\"text-decoration-thickness\")}}.\n- The {{cssxref(\"text-decoration-skip-ink\")}}, {{cssxref(\"text-underline-offset\")}}, and {{cssxref(\"text-underline-position\")}} properties also affect text-decoration, but are not included in the shorthand.\n- The {{cssxref(\"list-style\")}} attribute controls the appearance of items in HTML {{HTMLElement(\"ol\")}} and {{HTMLElement(\"ul\")}} lists.\n" }, { "property": "text-emphasis-color", "document": "---\ntitle: text-emphasis-color\nslug: Web/CSS/text-emphasis-color\ntags:\n - CSS\n - CSS Property\n - CSS Styles\n - CSS Text Decoration\n - HTML Colors\n - Reference\n - Styling HTML\n - Text Emphasis\n - recipe:css-property\n - text-decoration-color\nbrowser-compat: css.properties.text-emphasis-color\n---\n{{CSSRef}}\n\nThe **`text-emphasis-color`** [CSS](/en-US/docs/Web/CSS) property sets the color of emphasis marks. This value can also be set using the {{cssxref(\"text-emphasis\")}} shorthand.\n\n```css\n/* Initial value */\ntext-emphasis-color: currentcolor;\n\n/* */\ntext-emphasis-color: #555;\ntext-emphasis-color: blue;\ntext-emphasis-color: rgba(90, 200, 160, 0.8);\ntext-emphasis-color: transparent;\n\n/* Global values */\ntext-emphasis-color: inherit;\ntext-emphasis-color: initial;\ntext-emphasis-color: revert;\ntext-emphasis-color: revert-layer;\ntext-emphasis-color: unset;\n```\n\n## Syntax\n\n### Values\n\n- ``\n - : Defines the color of the emphasis marks. If no color is present, it defaults to `currentcolor`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Emphasis with a color and custom character\n\n#### CSS\n\n```css\nem {\n text-emphasis-color: green;\n text-emphasis-style: \"*\";\n}\n```\n\n#### HTML\n\n```html\n

      Here's an example:

      \n\nThis has emphasis marks!\n```\n\n#### Result\n\n{{EmbedLiveSample(\"Emphasis_with_a_color_and_custom_character\", 450, 100)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The {{cssxref(\"<color>\")}} data type\n- The other emphasis mark related properties: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, and {{cssxref(\"text-emphasis-position\")}}.\n- Other color-related properties: {{cssxref(\"color\")}}, {{cssxref(\"background-color\")}}, {{cssxref(\"border-color\")}}, {{cssxref(\"outline-color\")}}, {{cssxref(\"text-emphasis-color\")}}, {{cssxref(\"text-shadow\")}}, {{cssxref(\"caret-color\")}}, and {{cssxref(\"column-rule-color\")}}\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n" }, { "property": "text-emphasis-style", "document": "---\ntitle: text-emphasis-style\nslug: Web/CSS/text-emphasis-style\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-emphasis-style\n---\n{{CSSRef}}\n\nThe **`text-emphasis-style`** [CSS](/en-US/docs/Web/CSS) property sets the appearance of emphasis marks. It can also be set, and reset, using the {{cssxref(\"text-emphasis\")}} shorthand.\n\n```css\n/* Initial value */\ntext-emphasis-style: none; /* No emphasis marks */\n\n/* values */\ntext-emphasis-style: 'x';\ntext-emphasis-style: '点';\ntext-emphasis-style: '\\25B2';\ntext-emphasis-style: '*';\ntext-emphasis-style: 'foo'; /* Should NOT be used. It may be computed to or rendered as 'f' only */\n\n/* Keyword values */\ntext-emphasis-style: filled;\ntext-emphasis-style: open;\ntext-emphasis-style: dot;\ntext-emphasis-style: circle;\ntext-emphasis-style: double-circle;\ntext-emphasis-style: triangle;\ntext-emphasis-style: filled sesame;\ntext-emphasis-style: open sesame;\n\n/* Global values */\ntext-emphasis-style: inherit;\ntext-emphasis-style: initial;\ntext-emphasis-style: revert;\ntext-emphasis-style: revert-layer;\ntext-emphasis-style: unset;\n```\n\n## Syntax\n\n### Values\n\n- `none`\n - : No emphasis marks.\n- `filled`\n - : The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.\n- `open`\n - : The shape is hollow.\n- `dot`\n - : Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).\n- `circle`\n - : Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`).\n- `double-circle`\n - : Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).\n- `triangle`\n - : Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).\n- `sesame`\n - : Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`).\n- ``\n - : Display the given string as marks. Authors should not specify more than one _character_ in ``. The UA may truncate or ignore strings consisting of more than one grapheme cluster.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic example\n\n```css\nh2 {\n -webkit-text-emphasis-style: sesame;\n text-emphasis-style: sesame;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The related properties {{cssxref('text-emphasis-color')}}, {{cssxref('text-emphasis')}}.\n- The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.\n" }, { "property": "text-emphasis-position", "document": "---\ntitle: text-emphasis-position\nslug: Web/CSS/text-emphasis-position\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-emphasis-position\n---\n{{CSSRef}}\n\nThe **`text-emphasis-position`** [CSS](/en-US/docs/Web/CSS) property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased.\n\n```css\n/* Initial value */\ntext-emphasis-position: over right;\n\n/* Keywords value */\ntext-emphasis-position: over left;\ntext-emphasis-position: under right;\ntext-emphasis-position: under left;\n\ntext-emphasis-position: left over;\ntext-emphasis-position: right under;\ntext-emphasis-position: left under;\n\n/* Global values */\ntext-emphasis-position: inherit;\ntext-emphasis-position: initial;\ntext-emphasis-position: revert;\ntext-emphasis-position: revert-layer;\ntext-emphasis-position: unset;\n```\n\n## Syntax\n\n### Values\n\n- `over`\n - : Draws marks over the text in horizontal writing mode.\n- `under`\n - : Draws marks under the text in horizontal writing mode.\n- `right`\n - : Draws marks to the right of the text in vertical writing mode.\n- `left`\n - : Draws marks to the left of the text in vertical writing mode.\n\n## Description\n\nThe preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is `over right`. In Chinese, on the other hand, the preferred position is `under right`. The informative table below summarizes the preferred emphasis mark positions for Chinese, Mongolian and Japanese:\n\n
      \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
      \n Preferred emphasis mark and ruby position\n
      LanguagePreferred positionIllustration
      HorizontalVertical
      Japaneseoverright\n \n \n \n
      Korean
      Mongolian
      Chineseunderright\n \n
      \n\n> **Note:** The `text-emphasis-position` cannot be set, and therefore are not reset either, using the {{cssxref(\"text-emphasis\")}} shorthand property.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Preferring ruby over emphasis marks\n\nSome editors prefer to hide emphasis marks when they conflict with ruby. In HTML, this can be done with the following style rule:\n\n```css\nruby {\n text-emphasis: none;\n}\n```\n\n### Preferring emphasis marks over ruby\n\nSome other editors prefer to hide ruby when they conflict with emphasis marks. In HTML, this can be done with the following pattern:\n\n```css\nem {\n text-emphasis: dot; /* Set text-emphasis for elements */\n}\n\nem rt {\n display: none; /* Hide ruby inside elements */\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The longhand properties {{cssxref(\"text-emphasis-style\")}}, {{cssxref(\"text-emphasis-color\")}}, and the corresponding shorthand property {{cssxref(\"text-emphasis\")}}.\n" }, { "property": "text-emphasis", "document": "---\ntitle: text-emphasis\nslug: Web/CSS/text-emphasis\ntags:\n - CSS\n - CSS Property\n - CSS Text Decoration\n - Reference\n - recipe:css-shorthand-property\nbrowser-compat: css.properties.text-emphasis\n---\n{{CSSRef}}\n\nThe **`text-emphasis`** [CSS](/en-US/docs/Web/CSS) property applies emphasis marks to text (except spaces and control characters). It is a [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) for {{cssxref(\"text-emphasis-style\")}} and {{cssxref(\"text-emphasis-color\")}}.\n\n{{EmbedInteractiveExample(\"pages/css/text-emphasis.html\")}}\n\nThe `text-emphasis` property is quite different from {{cssxref(\"text-decoration\")}}. The `text-decoration` property does not inherit, and the decoration specified is applied across the whole element. However, text-emphasis does inherit, which means it is possible to change emphasis marks for descendants.\n\nThe size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and `text-emphasis` may affect line height when the current leading is not enough for the marks.\n\n> **Note:** `text-emphasis` doesn't reset the value of {{cssxref(\"text-emphasis-position\")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, use the property {{cssxref(\"text-emphasis-position\")}}.\n\n## Constituent properties\n\nThis property is a shorthand for the following CSS properties:\n\n- [`text-emphasis-color`](/en-US/docs/Web/CSS/text-emphasis-color)\n- [`text-emphasis-style`](/en-US/docs/Web/CSS/text-emphasis-style)\n\n## Syntax\n\n```css\n/* Initial value */\ntext-emphasis: none; /* No emphasis marks */\n\n/* value */\ntext-emphasis: 'x';\ntext-emphasis: '点';\ntext-emphasis: '\\25B2';\ntext-emphasis: '*' #555;\ntext-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */\n\n/* Keywords value */\ntext-emphasis: filled;\ntext-emphasis: open;\ntext-emphasis: filled sesame;\ntext-emphasis: open sesame;\n\n/* Keywords value combined with a color */\ntext-emphasis: filled sesame #555;\n\n/* Global values */\ntext-emphasis: inherit;\ntext-emphasis: initial;\ntext-emphasis: revert;\ntext-emphasis: revert-layer;\ntext-emphasis: unset;\n```\n\n### Values\n\n- `none`\n - : No emphasis marks.\n- `filled`\n - : The shape is filled with solid color. If neither `filled` nor `open` is present, this is the default.\n- `open`\n - : The shape is hollow.\n- `dot`\n - : Display small circles as marks. The filled dot is `'•'` (`U+2022`), and the open dot is `'◦'` (`U+25E6`).\n- `circle`\n - : Display large circles as marks. The filled circle is `'●'` (`U+25CF`), and the open circle is `'○'` (`U+25CB`). This is the default shape in horizontal writing modes when no other shape is given.\n- `double-circle`\n - : Display double circles as marks. The filled double-circle is `'◉'` (`U+25C9`), and the open double-circle is `'◎'` (`U+25CE`).\n- `triangle`\n - : Display triangles as marks. The filled triangle is `'▲'` (`U+25B2`), and the open triangle is `'△'` (`U+25B3`).\n- `sesame`\n - : Display sesames as marks. The filled sesame is `'﹅'` (`U+FE45`), and the open sesame is `'﹆'` (`U+FE46`). This is the default shape in vertical writing modes when no other shape is given.\n- ``\n - : Display the given string as marks. Authors should not specify more than one _character_ in ``. The UA may truncate or ignore strings consisting of more than one grapheme cluster.\n- ``\n - : Defines the color of the mark. If no color is present, it defaults to `currentcolor`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### A heading with emphasis shape and color\n\nThis example draws a heading with triangles used to emphasize each character.\n\n#### CSS\n\n```css\nh2 {\n text-emphasis: triangle #D55;\n}\n```\n\n#### HTML\n\n```html\n

      This is important!

      \n```\n\n#### Result\n\n{{EmbedLiveSample(\"A_heading_with_emphasis_shape_and_color\", 500, 90)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.\n- The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.\n" }, { "property": "text-align-last", "document": "---\ntitle: text-align-last\nslug: Web/CSS/text-align-last\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-align-last\n---\n{{CSSRef}}\n\nThe **`text-align-last`** CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.\n\n{{EmbedInteractiveExample(\"pages/css/text-align-last.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\ntext-align-last: auto;\ntext-align-last: start;\ntext-align-last: end;\ntext-align-last: left;\ntext-align-last: right;\ntext-align-last: center;\ntext-align-last: justify;\n\n/* Global values */\ntext-align-last: inherit;\ntext-align-last: initial;\ntext-align-last: revert;\ntext-align-last: revert-layer;\ntext-align-last: unset;\n```\n\n### Values\n\n- `auto`\n - : The affected line is aligned per the value of {{cssxref(\"text-align\")}}, unless {{cssxref(\"text-align\")}} is `justify`, in which case the effect is the same as setting `text-align-last` to `start`.\n- `start`\n - : The same as `left` if direction is left-to-right and `right` if direction is right-to-left.\n- `end`\n - : The same as `right` if direction is left-to-right and `left` if direction is right-to-left.\n- `left`\n - : The inline contents are aligned to the left edge of the line box.\n- `right`\n - : The inline contents are aligned to the right edge of the line box.\n- `center`\n - : The inline contents are centered within the line box.\n- `justify`\n - : The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Justifying the last line\n\n```html hidden\n

      Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.

      \n```\n\n#### CSS\n\n```css\np {\n font-size: 1.4em;\n text-align: justify;\n text-align-last: center;\n}\n```\n\n#### Results\n\n{{EmbedLiveSample('Justifying_the_last_line','560')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"text-align\")}}\n" }, { "property": "text-indent", "document": "---\ntitle: text-indent\nslug: Web/CSS/text-indent\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Indent\n - Layout\n - Reference\n - recipe:css-property\n - text-indent\nbrowser-compat: css.properties.text-indent\n---\n{{CSSRef}}\n\nThe **`text-indent`** CSS property sets the length of empty space (indentation) that is put before lines of text in a block.\n\n{{EmbedInteractiveExample(\"pages/css/text-indent.html\")}}\n\nHorizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box.\n\n## Syntax\n\n```css\n/* values */\ntext-indent: 3mm;\ntext-indent: 40px;\n\n/* value\n relative to the containing block width */\ntext-indent: 15%;\n\n/* Keyword values */\ntext-indent: 5em each-line;\ntext-indent: 5em hanging;\ntext-indent: 5em hanging each-line;\n\n/* Global values */\ntext-indent: inherit;\ntext-indent: initial;\ntext-indent: revert;\ntext-indent: revert-layer;\ntext-indent: unset;\n```\n\n### Values\n\n- {{cssxref(\"<length>\")}}\n - : Indentation is specified as an absolute {{cssxref(\"<length>\")}}. Negative values are allowed. See {{cssxref(\"<length>\")}} values for possible units.\n- {{cssxref(\"<percentage>\")}}\n - : Indentation is a {{cssxref(\"<percentage>\")}} of the containing block's width.\n- `each-line` {{experimental_inline}}\n - : Indentation affects the first line of the block container as well as each line after a _forced line break_, but does not affect lines after a _soft wrap break_.\n- `hanging` {{experimental_inline}}\n - : Inverts which lines are indented. All lines _except_ the first line will be indented.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple indent\n\n#### HTML\n\n```html\n

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      \n

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      \n```\n\n#### CSS\n\n```css\np {\n text-indent: 5em;\n background: powderblue;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Simple_indent','100%','100%') }}\n\n### Skipping indentation on the first paragraph\n\nA common typographic practice when paragraph indentation is present is to skip the indentation for the first paragraph. As the _The Chicago Manual of Style_ puts it, \"the first line of text following a subhead may begin flush left or be indented by the usual paragraph indention.\"\n\nTreating first paragraphs differently from subsequent paragraphs can be done using the [adjacent sibling combinator](/en-US/docs/Web/CSS/Adjacent_sibling_combinator), as in the following example:\n\n#### HTML\n\n```html\n

      Lorem ipsum

      \n\n

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu\nvenenatis quam. Vivamus euismod eleifend metus vitae pharetra. In vel tempor metus.\nDonec dapibus feugiat euismod. Vivamus interdum tellus dolor. Vivamus blandit eros\net imperdiet auctor. Mauris sapien nunc, condimentum a efficitur non, elementum ac\nsapien. Cras consequat turpis non augue ullamcorper, sit amet porttitor dui\ninterdum.

      \n\n

      Sed laoreet luctus erat at rutrum. Proin velit metus, luctus in sapien in,\ntincidunt mattis ex. Praesent venenatis orci at sagittis eleifend. Nulla facilisi.\nIn feugiat vehicula magna iaculis vehicula. Nulla suscipit tempor odio a semper.\nDonec vitae dapibus ipsum. Donec libero purus, convallis eu efficitur id, pulvinar\nelementum diam. Maecenas mollis blandit placerat. Ut gravida pellentesque nunc, in\neleifend ante convallis sit amet.

      \n\n

      Donec ullamcorper elit nisl

      \n\n

      Donec ullamcorper elit nisl, sagittis bibendum massa gravida in. Fusce\ntempor in ante gravida iaculis. Integer posuere tempor metus. Vestibulum lacinia,\nnunc et dictum viverra, urna massa aliquam tellus, id mollis sem velit vestibulum\nnulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames\nac turpis egestas. Donec vulputate leo ut iaculis ultrices. Cras egestas rhoncus\nlorem. Nunc blandit tempus lectus, rutrum hendrerit orci eleifend id. Ut at quam\nvelit.

      \n\n

      Aenean rutrum tempor ligula, at luctus ligula auctor vestibulum. Sed\nsollicitudin velit in leo fringilla sollicitudin. Proin eu gravida arcu. Nam\niaculis malesuada massa, eget aliquet turpis sagittis sed. Sed mollis tellus ac\ndui ullamcorper, nec lobortis diam pellentesque. Quisque dapibus accumsan libero,\nsed euismod ipsum ullamcorper sed.

      \n```\n\n#### CSS\n\n```css\np {\n text-align: justify;\n margin: 1em 0 0 0;\n}\np + p {\n text-indent: 2em;\n margin: 0;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Skipping_indentation_on_the_first_paragraph','','500px') }}\n\n### Percentage indent\n\n#### HTML\n\n```html\n

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      \n

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy\n nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

      \n```\n\n#### CSS\n\n```css\np {\n text-indent: 30%;\n background: plum;\n}\n```\n\n#### Result\n\n{{ EmbedLiveSample('Percentage_indent','100%','100%') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Learn to style HTML using CSS](/en-US/docs/Learn/CSS)\n- Related CSS properties:\n\n - [`text-justify`](/en-US/docs/Web/CSS/text-justify)\n - [`text-orientation`](/en-US/docs/Web/CSS/text-orientation)\n - [`text-overflow`](/en-US/docs/Web/CSS/text-overflow)\n - [`text-rendering`](/en-US/docs/Web/CSS/text-rendering)\n - [`text-transform`](/en-US/docs/Web/CSS/text-transform)\n - {{cssxref('hanging-punctuation')}}\n\n- [CSS Text Decoration](/en-US/docs/Web/CSS/CSS_Text_Decoration) CSS module\n- [CSS Text module](/en-US/docs/Web/CSS/CSS_Text)\n" }, { "property": "text-orientation", "document": "---\ntitle: text-orientation\nslug: Web/CSS/text-orientation\ntags:\n - CSS\n - CSS Property\n - CSS Writing Modes\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-orientation\n---\n{{CSSRef}}\n\nThe **`text-orientation`** [CSS](/en-US/docs/Web/CSS) property sets the orientation of the text characters in a line. It only affects text in vertical mode (when {{cssxref(\"writing-mode\")}} is not `horizontal-tb`). It is useful for controlling the display of languages that use vertical script, and also for making vertical table headers.\n\n{{EmbedInteractiveExample(\"pages/css/text-orientation.html\")}}\n\n## Syntax\n\n```css\n/* Keyword values */\ntext-orientation: mixed;\ntext-orientation: upright;\ntext-orientation: sideways-right;\ntext-orientation: sideways;\ntext-orientation: use-glyph-orientation;\n\n/* Global values */\ntext-orientation: inherit;\ntext-orientation: initial;\ntext-orientation: revert;\ntext-orientation: revert-layer;\ntext-orientation: unset;\n```\n\nThe `text-orientation` property is specified as a single keyword from the list below.\n\n### Values\n\n- `mixed`\n - : Rotates the characters of horizontal scripts 90° clockwise. Lays out the characters of vertical scripts naturally. Default value.\n- `upright`\n - : Lays out the characters of horizontal scripts naturally (upright), as well as the glyphs for vertical scripts. Note that this keyword causes all characters to be considered as left-to-right: the used value of {{cssxref(\"direction\")}} is forced to be `ltr`.\n- `sideways`\n - : Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.\n- `sideways-right`\n - : An alias to `sideways` that is kept for compatibility purposes.\n- `use-glyph-orientation`\n - : On SVG elements, this keyword leads to use the value of the deprecated SVG properties `glyph-orientation-vertical` and `glyph-orientation-horizontal`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### HTML\n\n```html\n

      Lorem ipsum dolet semper quisquam.

      \n```\n\n### CSS\n\n```css\np {\n writing-mode: vertical-rl;\n text-orientation: upright;\n}\n```\n\n### Result\n\n{{EmbedLiveSample('Examples')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- The other vertical-script related CSS properties: {{cssxref(\"writing-mode\")}}, {{cssxref(\"text-combine-upright\")}}, and {{cssxref(\"unicode-bidi\")}}.\n- [CSS Logical properties](/docs/Web/CSS/CSS_Logical_Properties)\n- [Styling vertical text (Chinese, Japanese, Korean and Mongolian)](https://www.w3.org/International/articles/vertical-text/)\n- Extensive browsers support test results: \n" }, { "property": "text-justify", "document": "---\ntitle: text-justify\nslug: Web/CSS/text-justify\ntags:\n - CSS\n - CSS Property\n - CSS Text\n - Reference\n - recipe:css-property\n - text-justify\nbrowser-compat: css.properties.text-justify\n---\n{{CSSRef}}\n\nThe **`text-justify`** CSS property sets what type of justification should be applied to text when {{cssxref(\"text-align\")}}`: justify;` is set on an element.\n\n## Syntax\n\n```css\ntext-justify: none;\ntext-justify: auto;\ntext-justify: inter-word;\ntext-justify: inter-character;\ntext-justify: distribute; /* Deprecated value */\n\n/* Global values */\ntext-justify: inherit;\ntext-justify: initial;\ntext-justify: revert;\ntext-justify: revert-layer;\ntext-justify: unset;\n```\n\n### Values\n\n- `none`\n - : The text justification is turned off. This has the same effect as not setting {{cssxref(\"text-align\")}} at all, although it is useful if you need to turn justification on and off for some reason.\n- `auto`\n - : The browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., English, CJK languages, etc.). This is the default justification used if `text-justify` is not set at all.\n- `inter-word`\n - : The text is justified by adding space between words (effectively varying {{cssxref(\"word-spacing\")}}), which is most appropriate for languages that separate words using spaces, like English or Korean.\n- `inter-character`\n - : The text is justified by adding space between characters (effectively varying {{cssxref(\"letter-spacing\")}}), which is most appropriate for languages like Japanese.\n- `distribute` {{deprecated_inline}}\n - : Exhibits the same behavior as `inter-character`; this value is kept for backwards compatibility.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Demonstration of the different values of text-justify\n\n```html hidden\n

      text-justify: none —
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

      \n

      text-justify: auto —
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

      \n

      text-justify: distribute —
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

      \n

      text-justify: inter-word —
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

      \n

      text-justify: inter-character —
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.

      \n```\n\n```css\np {\n font-size: 1.5em;\n border: 1px solid black;\n padding: 10px;\n width: 95%;\n margin: 10px auto;\n text-align: justify;\n}\n\n.none {\n text-justify: none;\n}\n\n.auto {\n text-justify: auto;\n}\n\n.dist {\n text-justify: distribute;\n}\n\n.word {\n text-justify: inter-word;\n}\n\n.char {\n text-justify: inter-character;\n}\n```\n\n{{EmbedLiveSample(\"Examples\",\"100%\",400)}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"text-align\")}}\n" }, { "property": "text-overflow", "document": "---\ntitle: text-overflow\nslug: Web/CSS/text-overflow\ntags:\n - CSS\n - CSS Property\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-overflow\n---\n{{CSSRef}}\n\nThe **`text-overflow`** [CSS](/en-US/docs/Web/CSS) property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n{{EmbedInteractiveExample(\"pages/css/text-overflow.html\")}}\n\nThe `text-overflow` property doesn't force an overflow to occur. To make text overflow its container you have to set other CSS properties: {{cssxref(\"overflow\")}} and {{cssxref(\"white-space\")}}. For example:\n\n```css\noverflow: hidden;\nwhite-space: nowrap;\n```\n\nThe `text-overflow` property only affects content that is overflowing a block container element in its _inline_ progression direction (not text overflowing at the bottom of a box, for example).\n\n## Syntax\n\nThe `text-overflow` property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.\n\n```css\ntext-overflow: clip;\ntext-overflow: ellipsis ellipsis;\ntext-overflow: ellipsis \" [..]\";\n\n/* Global values */\ntext-overflow: inherit;\ntext-overflow: initial;\ntext-overflow: revert;\ntext-overflow: revert-layer;\ntext-overflow: unset;\n```\n\n- one of the keyword values: `clip`, `ellipsis`, `fade`\n- the function `fade()`, which is passed a {{cssxref(\"<length>\")}} or a {{cssxref(\"<percentage>\")}} to control the fade distance\n- a ``.\n\n### Values\n\n- `clip`\n - : The default for this property. This keyword value will truncate the text at the limit of the [content area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify `text-overflow` as an empty string, if that is supported in your target browsers: `text-overflow: '';`.\n- `ellipsis`\n - : This keyword value will display an ellipsis (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) to represent clipped text. The ellipsis is displayed inside the [content area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.\n- `` {{experimental_inline}}\n - : The {{cssxref(\"<string>\")}} to be used to represent clipped text. The string is displayed inside the [content area](/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.\n- `fade` {{experimental_inline}}\n - : This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.\n- `fade( | )` {{experimental_inline}}\n\n - : This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.\n\n The argument determines the distance over which the fade effect is applied. The {{cssxref(\"<percentage>\")}} is resolved against the width of the line box. Values lower than `0` are clipped to `0`. Values greater than the width of the line box are clipped to the width of the line box.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### One-value syntax\n\nThis example shows different values for `text-overflow` applied to a paragraph, for left-to-right and right-to-left text.\n\n#### HTML\n\n```html\n\n
      \n

      Left to right text

      \n 
      clip
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n 
      ellipsis
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n 
      \" [..]\"
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n
      \n\n
      \n

      Right to left text

      \n 
      clip
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n 
      ellipsis
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n 
      \" [..]\"
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n
      \n```\n\n#### CSS\n\n```css\np {\n width: 200px;\n border: 1px solid;\n padding: 2px 5px;\n\n /* Both of the following are required for text-overflow */\n white-space: nowrap;\n overflow: hidden;\n}\n\n.overflow-clip {\n text-overflow: clip;\n}\n\n.overflow-ellipsis {\n text-overflow: ellipsis;\n}\n\n.overflow-string {\n text-overflow: \" [..]\";\n}\n\nbody {\n display: flex;\n justify-content: space-around;\n}\n\n.ltr > p {\n direction: ltr;\n}\n\n.rtl > p {\n direction: rtl;\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('One-value_syntax', 600, 320)}}\n\n### Two-value syntax\n\nThis example shows the two-value syntax for `text-overflow`, where you can define different overflow behavior for the start and end of the text.\nTo show the effect we have to scroll the line so the start of the line is also hidden.\n\n#### HTML\n\n```html\n
      clip clip
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n
      clip ellipsis
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n
      ellipsis ellipsis
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n
      ellipsis \" [..]\"
      \n

      Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      \n```\n\n#### CSS\n\n```css\np {\n width: 200px;\n border: 1px solid;\n padding: 2px 5px;\n\n /* Both of the following are required for text-overflow */\n white-space: nowrap;\n overflow: scroll;\n}\n\n.overflow-clip-clip {\n text-overflow: clip clip;\n}\n\n.overflow-clip-ellipsis {\n text-overflow: clip ellipsis;\n}\n\n.overflow-ellipsis-ellipsis {\n text-overflow: ellipsis ellipsis;\n}\n\n.overflow-ellipsis-string {\n text-overflow: ellipsis \" [..]\";\n}\n```\n\n#### JavaScript\n\n```js\n// Scroll each paragraph so the start is also hidden\nconst paras = document.querySelectorAll(\"p\");\n\nfor (let para of paras) {\n para.scroll(100, 0);\n}\n```\n\n#### Result\n\n{{EmbedLiveSample('Two-value_syntax', 600, 360)}}\n\n## Specifications\n\n{{Specifications}}\n\nA previous version of this interface reached the _Candidate Recommendation_ status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the _Working Draft_ level, explaining why browsers implemented this property unprefixed, though not at the CR state.\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS properties: {{cssxref(\"overflow\")}}, {{cssxref(\"white-space\")}}\n- CSS properties that control line breaks in words: {{cssxref(\"overflow-wrap\")}}, {{cssxref(\"word-break\")}}\n" }, { "property": "text-rendering", "document": "---\ntitle: text-rendering\nslug: Web/CSS/text-rendering\ntags:\n - CSS\n - CSS Property\n - Legibility\n - Ligatures\n - Precision\n - Reference\n - SVG\n - Text\n - Text Features\n - Text Rendering\n - recipe:css-property\nbrowser-compat: css.properties.text-rendering\n---\n{{CSSRef}}\n\nThe **`text-rendering`** CSS property provides information to the rendering engine about what to optimize for when rendering text.\n\nThe browser makes trade-offs among speed, legibility, and geometric precision.\n\n```css\n/* Keyword values */\ntext-rendering: auto;\ntext-rendering: optimizeSpeed;\ntext-rendering: optimizeLegibility;\ntext-rendering: geometricPrecision;\n\n/* Global values */\ntext-rendering: inherit;\ntext-rendering: initial;\ntext-rendering: revert;\ntext-rendering: revert-layer;\ntext-rendering: unset;\n```\n\n> **Note:** The `text-rendering` property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.\n\nOne very visible effect is `optimizeLegibility`, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's _Calibri_, _Candara_, _Constantia_, and _Corbel_, or the _DejaVu_ font family).\n\n## Syntax\n\n### Values\n\n- `auto`\n - : The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.\n- `optimizeSpeed`\n - : The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.\n- `optimizeLegibility`\n - : The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.\n- `geometricPrecision`\n\n - : The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.\n\n In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.\n\n But the `geometricPrecision` property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.\n\n > **Note:** WebKit precisely applies the specified value, but Gecko treats the value the same as `optimizeLegibility`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Automatic application of optimizeLegibility\n\nThis demonstrates how `optimizeLegibility` is used by browsers automatically when the `font-size` is smaller than `20px`.\n\n#### HTML\n\n```html\n

      LYoWAT - ff fi fl ffl

      \n

      LYoWAT - ff fi fl ffl

      \n```\n\n#### CSS\n\n```css\n.small { font: 19.9px \"Constantia\", \"Times New Roman\", \"Georgia\", \"Palatino\", serif; }\n.big { font: 20px \"Constantia\", \"Times New Roman\", \"Georgia\", \"Palatino\", serif; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('Automatic_application_of_optimizeLegibility') }}\n\n### optimizeSpeed vs optimizeLegibility\n\nThis example shows the difference between the appearance of `optimizeSpeed` and `optimizeLegibility` (in your browser; other browsers may vary).\n\n#### HTML\n\n```html\n

      LYoWAT - ff fi fl ffl

      \n

      LYoWAT - ff fi fl ffl

      \n```\n\n#### CSS\n\n```css\np { font: 1.5em \"Constantia\", \"Times New Roman\", \"Georgia\", \"Palatino\", serif }\n\n.speed { text-rendering: optimizeSpeed; }\n.legibility { text-rendering: optimizeLegibility; }\n```\n\n#### Result\n\n{{ EmbedLiveSample('optimizeSpeed_vs_optimizeLegibility') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Drawing text in a ``](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)\n- [CSS Text Decoration](/en-US/docs/Web/CSS/CSS_Text_Decoration) CSS module\n- Related CSS properties\n\n - [`text-decoration`](/en-US/docs/Web/CSS/text-decoration) (and its longhand properties, such as [`text-decoration-line`](/en-US/docs/Web/CSS/text-decoration-line), [`text-decoration-style`](/en-US/docs/Web/CSS/text-decoration-style), and [`text-decoration-thickness`](/en-US/docs/Web/CSS/text-decoration-thickness))\n - [`text-emphasis`](/en-US/docs/Web/CSS/text-emphasis) (and its longhand properties, including [`text-emphasis-color`](/en-US/docs/Web/CSS/text-emphasis-color), [`text-emphasis-position`](/en-US/docs/Web/CSS/text-emphasis-position), and [`text-emphasis-style`](/en-US/docs/Web/CSS/text-emphasis-style))\n - [`text-shadow`](/en-US/docs/Web/CSS/text-shadow)\n - [`text-transform`](/en-US/docs/Web/CSS/text-transform)\n\n- The [SVG](/en-US/docs/Web/SVG) {{SVGAttr(\"text-rendering\")}} attribute\n- [SVG and CSS](/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS)\n" }, { "property": "text-shadow", "document": "---\ntitle: text-shadow\nslug: Web/CSS/text-shadow\ntags:\n - CSS\n - CSS Property\n - CSS Styles\n - CSS Text Decoration\n - HTML Colors\n - HTML Styles\n - Reference\n - Styles\n - Styling HTML\n - color\n - recipe:css-property\nbrowser-compat: css.properties.text-shadow\n---\n{{CSSRef}}\n\nThe **`text-shadow`** CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its [`decorations`](/en-US/docs/Web/CSS/text-decoration). Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.\n\n{{EmbedInteractiveExample(\"pages/css/text-shadow.html\")}}\n\n## Syntax\n\n```css\n/* offset-x | offset-y | blur-radius | color */\ntext-shadow: 1px 1px 2px black;\n\n/* color | offset-x | offset-y | blur-radius */\ntext-shadow: #fc0 1px 0 10px;\n\n/* offset-x | offset-y | color */\ntext-shadow: 5px 5px #558abb;\n\n/* color | offset-x | offset-y */\ntext-shadow: white 2px 5px;\n\n/* offset-x | offset-y\n/* Use defaults for color and blur-radius */\ntext-shadow: 5px 10px;\n\n/* Global values */\ntext-shadow: inherit;\ntext-shadow: initial;\ntext-shadow: revert;\ntext-shadow: revert-layer;\ntext-shadow: unset;\n```\n\nThis property is specified as a comma-separated list of shadows.\n\nEach shadow is specified as two or three `` values, followed optionally by a `` value. The first two `` values are the `` and `` values. The third, optional, `` value is the ``. The`` value is the shadow's color.\n\nWhen more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.\n\nThis property applies to both {{cssxref(\"::first-line\")}} and {{cssxref(\"::first-letter\")}} [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements).\n\n### Values\n\n- {{cssxref(\"<color>\")}}\n - : Optional. The color of the shadow. It can be specified either before or after the offset values. If unspecified, the color's value is left up to the user agent, so when consistency across browsers is desired you should define it explicitly.\n- ` `\n - : Required. These {{cssxref(\"<length>\")}} values specify the shadow's distance from the text. `` specifies the horizontal distance; a negative value places the shadow to the left of the text. `` specifies the vertical distance; a negative value places the shadow above the text. If both values are `0`, the shadow is placed directly behind the text, although it may be partly visible due to the effect of ``.\n- ``\n - : Optional. This is a {{cssxref(\"<length>\")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to `0`.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Simple shadow\n\n```css\n.red-text-shadow {\n text-shadow: red 0 -2px;\n}\n```\n\n```html\n

      Sed ut perspiciatis unde omnis iste\n natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam, eaque ipsa quae ab illo inventore.

      \n```\n\n{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}\n\n### Multiple shadows\n\n```css\n.white-text-with-blue-shadow {\n text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;\n color: white;\n font: 1.5em Georgia, serif;\n}\n```\n\n```html\n

      Sed ut perspiciatis unde omnis iste\n natus error sit voluptatem accusantium doloremque laudantium,\n totam rem aperiam, eaque ipsa quae ab illo inventore.

      \n```\n\n{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n### Quantum CSS notes\n\n- Gecko has a bug whereby {{cssxref(\"transition\")}}s will not work when transitioning from a `text-shadow` with a color specified to a `text-shadow` without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as [Quantum CSS](https://wiki.mozilla.org/Quantum) or [Stylo](https://wiki.mozilla.org/Quantum/Stylo), planned for release in Firefox 57).\n\n## See also\n\n- {{cssxref(\"box-shadow\")}}\n- The {{cssxref(\"<color>\")}} data type (for specifying the shadow color)\n- [Applying color to HTML elements using CSS](/en-US/docs/Web/HTML/Applying_color)\n" }, { "property": "shape", "document": "---\ntitle: \nslug: Web/CSS/shape\ntags:\n - CSS\n - CSS Data Type\n - CSS Function\n - Data Type\n - Deprecated\n - Layout\n - Reference\n - Web\nbrowser-compat: css.types.shape\n---\n{{CSSRef}}{{deprecated_header}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) defines the specific form (shape) of a region. The region represents the part of an element to which the {{cssxref(\"clip\")}} property applies.\n\n> **Note:** `` and `rect()` work in conjunction with {{cssxref(\"clip\")}}, which has been deprecated in favor of {{cssxref(\"clip-path\")}}. When possible, use `clip-path` and the {{cssxref(\"<basic-shape>\")}} data type instead.\n\n## Syntax\n\nThe `` data type is specified using the `rect()` function, which produces a region in the form of a rectangle.\n\n`rect()`\n\n```css\nrect(top, right, bottom, left)\n```\n\n#### Values\n\n![](rect.png)\n\n- _top_\n - : Is a {{cssxref(\"length\")}} representing the offset for the top of the rectangle relative to the top border of the element's box.\n- _right_\n - : Is a {{cssxref(\"length\")}} representing the offset for the right of the rectangle relative to the left border of the element's box.\n- _bottom_\n - : Is a {{cssxref(\"length\")}} representing the offset for the bottom of the rectangle relative to the top border of the element's box.\n- _left_\n - : Is a {{cssxref(\"length\")}} representing the offset for the left of the rectangle relative to the left border of the element's box.\n\n## Interpolation\n\nWhen animated, values of the `` data type are interpolated over their `top`, `right`, `bottom`, and `left` components, each treated as a real, floating-point number. The speed of the interpolation is determined by the [timing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.\n\n## Example\n\n### Example demonstrating correct use of the rect() function\n\n```css\nimg.clip04 {\n clip: rect(10px, 20px, 20px, 10px);\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- Related CSS property: {{ cssxref(\"clip\") }}\n- The [`-moz-image-rect()`](/en-US/docs/Web/CSS/-moz-image-rect) function has similar coordinate values to `rect()`.\n" }, { "property": "text-size-adjust", "document": "---\ntitle: text-size-adjust\nslug: Web/CSS/text-size-adjust\ntags:\n - CSS\n - CSS Mobile Text Size Adjustment\n - CSS Property\n - Experimental\n - NeedsExample\n - Reference\n - recipe:css-property\nbrowser-compat: css.properties.text-size-adjust\n---\n{{CSSRef}}{{SeeCompatTable}}\n\nThe **`text-size-adjust`** [CSS](/en-US/docs/Web/API/CSS) property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.\n\n```css\n/* Keyword values */\ntext-size-adjust: none;\ntext-size-adjust: auto;\n\n/* value */\ntext-size-adjust: 80%;\n\n/* Global values */\ntext-size-adjust: inherit;\ntext-size-adjust: initial;\ntext-size-adjust: revert;\ntext-size-adjust: revert-layer;\ntext-size-adjust: unset;\n```\n\nBecause many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a {{glossary(\"viewport\")}} that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.\n\nSince text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The `text-size-adjust` property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.\n\n## Syntax\n\nThe `text-size-adjust` property is specified as `none`, `auto`, or a ``.\n\n### Values\n\n- `none`\n - : Disables the browser's inflation algorithm.\n- `auto`\n - : Enables the browser's inflation algorithm. This value is used to cancel a `none` value previously set with CSS.\n- ``\n - : Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Basic disabling usage\n\nAs hinted at above, on a properly designed responsive site the `text-size-adjust` behavior is not needed, so developers can elect to turn it off by specifying a value of none:\n\n```css\np {\n -webkit-text-size-adjust: none;\n text-size-adjust: none;\n}\n```\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- [Apple's documentation](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW16)\n- [Gecko's behavior description](https://dbaron.org/log/20111126-font-inflation), by L. David Baron\n- [Microsoft's documentation]()\n" }, { "property": "text-transform", "document": "---\ntitle: text-transform\nslug: Web/CSS/text-transform\ntags:\n - CSS\n - CSS Property\n - Layout\n - Reference\n - Text\n - recipe:css-property\nbrowser-compat: css.properties.text-transform\n---\n{{CSSRef}}\n\nThe **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n{{EmbedInteractiveExample(\"pages/css/text-transform.html\")}}\n\nThe `text-transform` property takes into account language-specific case mapping rules such as the following:\n\n- In Turkic languages, like Turkish (`tr`), Azerbaijani (`az`), Crimean Tatar (`crh`), Volga Tatar (`tt`), and Bashkir (`ba`), there are two kinds of `i`, with and without the dot, and two case pairings: `i`/`İ` and `ı`/`I`.\n- In German (`de`), the `ß` becomes `SS` in uppercase.\n- In Dutch (`nl`), the `ij` digraph becomes `IJ`, even with `text-transform: capitalize`, which only puts the first letter of a word in uppercase.\n- In Greek (`el`), vowels lose their accent when the whole word is in uppercase (`ά`/`Α`), except for the disjunctive eta (`ή`/`Ή`). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (`άι`/`ΑΪ`).\n- In Greek (`el`), the lowercase sigma character has two forms: `σ` and `ς`. `ς` is used only when sigma terminates a word. When applying `text-transform: lowercase` to an uppercase sigma (`Σ`), the browser needs to choose the right lowercase form based on context.\n- in Irish (`ga`), certain prefixed letters remain in lowercase when the base initial is capitalized, so for example `text-transform: uppercase` will change `ar aon tslí` to `AR AON tSLÍ` and not, as one might expect, `AR AON TSLÍ` (Firefox only). In some cases, a hyphen is also removed upon uppercasing: `an t-uisce` transforms to `AN tUISCE` (and the hyphen is correctly reinserted by `text-transform: lowercase`).\n\nThe language is defined by the [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) HTML attribute or the [`xml:lang`](/en-US/docs/Web/SVG/Attribute/xml:lang) XML attribute.\n\n> **Note:** Support for language-specific cases varies between browsers, so check the [browser compatibility table](#browser_compatibility).\n\n## Syntax\n\n```css\n/* Keyword values */\ntext-transform: none;\ntext-transform: capitalize;\ntext-transform: uppercase;\ntext-transform: lowercase;\ntext-transform: full-width;\ntext-transform: full-size-kana;\n\n/* Global values */\ntext-transform: inherit;\ntext-transform: initial;\ntext-transform: revert;\ntext-transform: revert-layer;\ntext-transform: unset;\n```\n\n- `capitalize`\n\n - : Is a keyword that converts the first _letter_ of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text). A letter is defined as a character that is part of Unicode's Letter or Number general categories {{experimental_inline}}; thus, any punctuation marks or symbols at the beginning of a word are ignored.\n\n > **Note:** Authors should not expect `capitalize` to follow language-specific title casing conventions (such as skipping articles in English).\n\n > **Note:** The `capitalize` keyword was under-specified in CSS 1 and CSS 2.1. This resulted in differences between browsers in the way the first letter was calculated (Firefox considered `-` and `_` as letters, but other browsers did not. Both Webkit and Gecko incorrectly considered letter-based symbols like `ⓐ` to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases.) By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The `capitalize` line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.\n\n- `uppercase`\n - : Is a keyword that converts all characters to uppercase.\n- `lowercase`\n - : Is a keyword that converts all characters to lowercase.\n- `none`\n - : Is a keyword that prevents the case of all characters from being changed.\n- `full-width`\n - : Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).\n- `full-size-kana`\n - : Generally used for {{htmlelement(\"ruby\")}} annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.\n\n## Accessibility concerns\n\nLarge sections of text set with a `text-transform` value of `uppercase` may be difficult for people with cognitive concerns such as Dyslexia to read.\n\n- [MDN Understanding WCAG, Guideline 1.4 explanations](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)\n- [W3C Understanding WCAG 2.1](https://www.w3.org/TR/WCAG21/#visual-presentation)\n\n## Formal definition\n\n{{CSSInfo}}\n\n## Formal syntax\n\n{{csssyntax}}\n\n## Examples\n\n### Example using \"none\"\n\n```html\n

      Initial String\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n

      text-transform: none\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n```\n\n```css\nspan {\n text-transform: none;\n}\nstrong { float: right; }\n```\n\nThis demonstrates no text transformation.\n\n{{ EmbedLiveSample('Example using \"none\"', '100%', '100px') }}\n\n### Example using \"capitalize\" (general)\n\n```html\n

      Initial String\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n

      text-transform: capitalize\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n```\n\n```css\nspan {\n text-transform: capitalize;\n}\nstrong { float: right; }\n```\n\nThis demonstrates text capitalization.\n\n{{ EmbedLiveSample('Example using \"capitalize\" (general)', '100%', '100px') }}\n\n### Example using \"capitalize\" (punctuation)\n\n```html\n

      Initial String\n (this) \"is\" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!\n

      \n

      text-transform: capitalize\n (this) \"is\" [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!\n

      \n```\n\n```css\nspan {\n text-transform: capitalize;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.\n\n{{ EmbedLiveSample('Example using \"capitalize\" (punctuation)', '100%', '100px') }}\n\n### Example using \"capitalize\" (Symbols)\n\n```html\n

      Initial String\n ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl\n

      \n

      text-transform: capitalize\n ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl\n

      \n```\n\n```css\nspan {\n text-transform: capitalize;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.\n\n{{ EmbedLiveSample('Example using \"capitalize\" (symbols)', '100%', '100px') }}\n\n### Example using \"capitalize\" (Dutch ij digraph)\n\n```html\n

      Initial String\n The Dutch word: \"ijsland\" starts with a digraph.\n

      \n

      text-transform: capitalize\n The Dutch word: \"ijsland\" starts with a digraph.\n

      \n```\n\n```css\nspan {\n text-transform: capitalize;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how the Dutch _ij_ digraph must be handled like one single letter.\n\n{{ EmbedLiveSample('Example using \"capitalize\" (Dutch ij digraph)', '100%', '100px') }}\n\n### Example using \"uppercase\" (general)\n\n```html\n

      Initial String\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n

      text-transform: uppercase\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n```\n\n```css\nspan {\n text-transform: uppercase;\n}\nstrong { float: right; }\n```\n\nThis demonstrates transforming the text to uppercase.\n\n{{ EmbedLiveSample('Example using \"uppercase\" (general)', '100%', '100px') }}\n\n### Example using \"uppercase\" (Greek vowels)\n\n```html\n

      Initial String\n Θα πάμε στο \"Θεϊκό φαΐ\" ή στη \"Νεράιδα\"\n

      \n

      text-transform: uppercase\n Θα πάμε στο \"Θεϊκό φαΐ\" ή στη \"Νεράιδα\"\n

      \n```\n\n```css\nspan {\n text-transform: uppercase;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how Greek vowels except disjunctive _eta_ should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.\n\n{{ EmbedLiveSample('Example using \"uppercase\" (Greek vowels)', '100%', '100px') }}\n\n### Example using \"lowercase\" (general)\n\n```html\n

      Initial String\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n

      text-transform: lowercase\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n

      \n```\n\n```css\nspan {\n text-transform: lowercase;\n}\nstrong { float: right; }\n```\n\nThis demonstrates transforming the text to lowercase.\n\n{{ EmbedLiveSample('Example using \"lowercase\" (general)', '100%', '100px') }}\n\n### Example using \"lowercase\" (Greek Σ)\n\n```html\n

      Initial String\n Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.\n

      \n

      text-transform: lowercase\n Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.\n

      \n```\n\n```css\nspan {\n text-transform: lowercase;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how the Greek character sigma (`Σ`) is transformed into the regular lowercase sigma (`σ`) or the word-final variant (`ς`), according the context.\n\n{{ EmbedLiveSample('Example using \"lowercase\" (Greek Σ)', '100%', '100px') }}\n\n### Example using \"lowercase\" (Lithuanian)\n\n```html\n

      Initial String\n Ĩ is a Lithuanian LETTER as is J́\n

      \n

      text-transform: lowercase\n Ĩ is a Lithuanian LETTER as is J́\n

      \n```\n\n```css\nspan {\n text-transform: lowercase;\n}\nstrong { float: right; }\n```\n\nThis demonstrates how the Lithuanian letters `Ĩ` and `J́` retain their dot when transformed to lowercase.\n\n{{ EmbedLiveSample('Example using \"lowercase\" (Lithuanian)', '100%', '100px') }}\n\n### Example using \"full-width\" (general)\n\n```html\n

      Initial String\n 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!\"#$%&()*+,-./:;<=>?@{|}~\n

      \n

      text-transform: full-width\n 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!\"#$%&()*+,-./:;<=>?@{|}~\n

      \n```\n\n```css\nspan {\n text-transform: full-width;\n}\nstrong { width: 100%; float: right; }\n```\n\nSome characters exist in two formats: normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.\n\n{{ EmbedLiveSample('Example using \"full-width\" (general)', '100%', '175px') }}\n\n### Example using \"full-width\" (Japanese half-width katakana)\n\n```html\n

      Initial String\n ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強\n

      \n

      text-transform: full-width\n ｳｪﾌﾞﾌﾟﾛｸﾞﾗﾐﾝｸﾞの勉強\n

      \n```\n\n```css\nspan {\n text-transform: full-width;\n}\nstrong { width: 100%; float: right; }\n```\n\nThe Japanese half-width katakana was used to represent katakana in 8-bit character codes. Unlike regular (full-width) katakana characters, a letter with dakuten (voiced sound mark) is represented as two code points, the body of letter and dakuten. The `full-width` combines these into a single code point when converting these characters into full-width.\n\n{{ EmbedLiveSample('Example using \"full-width\" (Japanese half-width katakana)', '100%', '175px') }}\n\n### Example using \"full-size-kana\"\n\n```html\n

      ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ

      \n

      ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ

      \n

      \n```\n\n```css\np:nth-of-type(2) {\n text-transform: full-size-kana;\n}\n```\n\n{{ EmbedLiveSample('Example using \"full-size-kana\"', '100%', '175px') }}\n\n## Specifications\n\n{{Specifications}}\n\n## Browser compatibility\n\n{{Compat}}\n\n## See also\n\n- {{cssxref(\"font-variant\")}}\n" }, { "property": "time-percentage", "document": "---\ntitle: \nslug: Web/CSS/time-percentage\ntags:\n - CSS\n - CSS Data Type\n - Data Type\n - Reference\n - time-percentage\n - units\n - values\nbrowser-compat: css.types.time-percentage\n---\n{{CSSRef}}\n\nThe **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref(\"time\")}} or a {{Cssxref(\"percentage\")}}.\n\n## Syntax\n\nRefer to the documentation for {{Cssxref(\"time\")}} and {{Cssxref(\"percentage\")}} for details of the individual syntaxes allowed by this type.\n\n## Examples\n\n### Use in calc()\n\nWhere a `` is specified as an allowable type, this means that the percentage resolves to a time and therefore can be used in a {{Cssxref(\"calc\", \"calc()\")}} expression.\n\n### Valid percentages\n\n```plain example-good\n50%\n+50% Optional plus sign\n-50% Negative percentages are not valid for all properties that accept percentages\n```\n\n### Invalid percentages\n\n```plain example-bad\n50 % Space not allowed between the number and the percentage sign\n```\n\n### Valid times\n\n```plain example-good\n12s Positive integer\n-456ms Negative integer\n4.3ms Non-integer\n14mS The unit is case-insensitive, although capital letters are not recommended.\n+0s Zero with a leading + and a unit\n-0ms Zero with a leading - and a unit\n```\n\n### Invalid times\n\n```plain example-bad\n0 Although unitless zero is allowed for s, it's invalid for