border-block-start - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...logical block-start border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. ...
... shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element. v...
...And 16 more matches

border-image-slice - CSS: Cascading Style Sheets
zones 5-8 are edge regions. ...
... zones 5-8 are edge regions. ...
... zones 5-8 are edge regions. ...
...And 16 more matches

border-bottom-width - CSS: Cascading Style Sheets
the border-bottom-width css property sets the width of the bottom border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the foll...
...m-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single ...
...ine the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...
...And 15 more matches

border-inline-start - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the individual logical inline-start border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...logical inline-start border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. ...
...y is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1px; border-inline-start: 2px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-end, which define the other borders of the element. ...
...And 15 more matches

Backgrounds and borders - Learn web development
previous overview: building blocks next in this lesson, we will take a look at some of the creative things you can do with css backgrounds and borders. from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes. styling backgrounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background proper...
...text to be legible for your visitors. if specifying an image, and text will be placed on top of that image, you should also specify a background-color that will allow the text to be legible if the image does not load. screen readers cannot parse background images, therefore they should be purely decoration; any important content should be part of the html page and not contained in a background. ...
...and text will be placed on top of that image, you should also specify a background-color that will allow the text to be legible if the image does not load. screen readers cannot parse background images, therefore they should be purely decoration; any important content should be part of the html page and not contained in a background. borders when learning about the box model, we discovered how borders affect the size of our box. ...
...And 13 more matches

border-block - CSS: Cascading Style Sheets
the border-block css property is a shorthand property for setting the individual logical block border property values in a single place in the style sheet. border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once. the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...er-block-style, and border-block-color setting both the start and end in the block dimension at once. the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end. ...
...see color. ...
...And 13 more matches

border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...l logical block-end border property values in a single place in the style sheet. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. ...
... this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element. ...
...And 12 more matches

border-image-repeat - CSS: Cascading Style Sheets
the border-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...order-image-repeat css property defines how the edge regions of a source image are adjusted to fit the dimensions of an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; border-image-repeat: space; /* vertical | horizontal */ border-image-repeat: round stretch; /* global values */ border-image-repeat: inherit; border-image-repeat: initial; border-image-repeat: unset; the border-image-repeat property may be specified using one or two values chosen from the list of values below. ...
...t; the border-image-repeat property may be specified using one or two values chosen from the list of values below. when one value is specified, it applies the same behavior on all four sides. when two values are specified, the first applies to the top and bottom, the second to the left and right. values stretch the source image's edge regions are stretched to fill the gap between each border. repeat 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. round 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. space the source image's edge regions are tiled (repeated) to fill the gap between each border. extra...
...And 12 more matches

border-left - CSS: Cascading Style Sheets
the border-left shorthand css property set an element's left border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-left always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-left-style: dotted; border-left: thick green; ... is actually the same as ... border-left-style: dotted; border-left: none thick green; ... and the value of border-left-style given before border-left is ignored. ...
...f the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-left-style: dotted; border-left: thick green; ... is actually the same as ... border-left-style: dotted; border-left: none thick green; ... and the value of border-left-style given before border-left is ignored. since the default value of border-left-style is none, not specifying the border-style part results in no border. ...
...order-left: thick green; ... is actually the same as ... border-left-style: dotted; border-left: none thick green; ... and the value of border-left-style given before border-left is ignored. since the default value of border-left-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-left-color border-left-style border-left-width syntax border-left: 1px; border-left: 2px dotted; border-left: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-left-width. <br-style> see border-left-style. <color> see border-left-color. formal definition initial valu...
...And 12 more matches

border-top - CSS: Cascading Style Sheets
the border-top shorthand css property sets all the properties of an element's top border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-top always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-top-style: dotted; border-top: thick green; ... is actually the same as ... border-top-style: dotted; border-top: none thick green; ... and the value of border-top-style given before border-top is ignored. ...
... all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-top-style: dotted; border-top: thick green; ... is actually the same as ... border-top-style: dotted; border-top: none thick green; ... and the value of border-top-style given before border-top is ignored. since the default value of border-top-style is none, not specifying the border-style part results in no border. ...
...ted; border-top: thick green; ... is actually the same as ... border-top-style: dotted; border-top: none thick green; ... and the value of border-top-style given before border-top is ignored. since the default value of border-top-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-top-color border-top-style border-top-width syntax border-top: 1px; border-top: 2px dotted; border-top: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-top-width. <br-style> see border-top-style. <color> see border-top-color. formal definition initial valueas each ...
...And 12 more matches

mask-border - CSS: Cascading Style Sheets
the mask-border css shorthand property lets you create a mask along the edge of an element's border. constituent properties this property is a shorthand for the following css properties: mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width syntax /* source | slice */ mask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image. see mask-border-source. ...
...ask-border: url('border-mask.png') 25; /* source | slice | repeat */ mask-border: url('border-mask.png') 25 space; /* source | slice | width */ mask-border: url('border-mask.png') 25 / 35px; /* source | slice | width | outset | repeat | mode */ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha; values <'mask-border-source'> the source image. see mask-border-source. <'mask-border-slice'> the dimensions for slicing the source image into regions. up to four values may be specified. see mask-border-slice. <'mask-border-width'> the width of the border mask. up to four values may be specified. see mask-border-width. <'mask-border-outset'> the distance of the border mask from the element's outside edge. up to four values may be specified. see mask-border-outset. <'mask-bo...
...e mask-border-slice. <'mask-border-width'> the width of the border mask. up to four values may be specified. see mask-border-width. <'mask-border-outset'> the distance of the border mask from the element's outside edge. up to four values may be specified. see mask-border-outset. <'mask-border-repeat'> 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 mask-border-repeat. <'mask-border-mode'> defines whether the source image is treated as a luminance mask or alpha mask. see mask-border-mode. ...
...And 12 more matches

HTMLImageElement.border - Web APIs
the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be. a value of 0, the default, indicates that no border should be drawn. you should not use this property! ...
... the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be. a value of 0, the default, indicates that no border should be drawn. you should not use this property! ...
... the obsolete htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be. a value of 0, the default, indicates that no border should be drawn. you should not use this property! ...
...And 11 more matches

border-bottom-right-radius - CSS: Cascading Style Sheets
the border-bottom-right-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...eractive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...And 11 more matches

border-inline-color - CSS: Cascading Style Sheets
see color. ...
...see color. ...
...see color. ...
...And 11 more matches

border-right - CSS: Cascading Style Sheets
the border-right shorthand css property sets the properties of an element's right border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-right always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-right-style: dotted; border-right: thick green; ... is actually the same as ... border-right-style: dotted; border-right: none thick green; ... and the value of border-right-style given before border-right is ignored. since the default value of bor...
...t specified. it sets those that are not specified to their default values. this means that ... border-right-style: dotted; border-right: thick green; ... is actually the same as ... border-right-style: dotted; border-right: none thick green; ... and the value of border-right-style given before border-right is ignored. since the default value of border-right-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-right-color border-right-style border-right-width syntax border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values ...
...lts in no border. constituent properties this property is a shorthand for the following css properties: border-right-color border-right-style border-right-width syntax border-right: 1px; border-right: 2px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-right-width. <br-style> see border-right-style. <color> see border-right-color. formal definition initial valueas each of the properties of the shorthand:border-right-width: mediumborder-right-style: noneborder-right-color: currentcolorapplies toall elements. ...
...And 11 more matches

mask-border-outset - CSS: Cascading Style Sheets
each value is a <length> or <number>. negative values are invalid. when one value is specified, it applies the same outset to all four sides. ...
...each value is a <length> or <number>. negative values are invalid. when one value is specified, it applies the same outset to all four sides. ...
...each value is a <length> or <number>. negative values are invalid. when one value is specified, it applies the same outset to all four sides. ...
...And 11 more matches

mask-border-repeat - CSS: Cascading Style Sheets
when one value is specified, it applies the same behavior on all four sides. when two values are specified, the first applies to the top and bottom, the second to the left and right. ...
... when one value is specified, it applies the same behavior on all four sides. when two values are specified, the first applies to the top and bottom, the second to the left and right. ...
... when one value is specified, it applies the same behavior on all four sides. when two values are specified, the first applies to the top and bottom, the second to the left and right. ...
...And 11 more matches

CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or resized), or modifying them in other ways. these styles can also decorate borders with lines or images, and make them square or rounded. ...
...s. these styles can also decorate borders with lines or images, and make them square or rounded. ...
... styles can also decorate borders with lines or images, and make them square or rounded. ...
...And 10 more matches

border-bottom-left-radius - CSS: Cascading Style Sheets
the border-bottom-left-radius css property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a borde...
...e or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...unded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...And 10 more matches

border-bottom - CSS: Cascading Style Sheets
the border-bottom shorthand css property sets an element's bottom border. it sets the values of border-bottom-width, border-bottom-style and border-bottom-color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-bottom-style: dotted; border-bottom: thick green; ... is actually the same as ... border-bottom-style: dotted; border-bottom: none thick green; ... ...
...th all shorthand properties, border-bottom always sets the values of all of the properties that it can set, even if they are not specified. it sets those that are not specified to their default values. this means that ... border-bottom-style: dotted; border-bottom: thick green; ... is actually the same as ... border-bottom-style: dotted; border-bottom: none thick green; ... and the value of border-bottom-style given before border-bottom is ignored. since the default value of border-bottom-style is none, not specifying the border-style part results in no border. ...
...: thick green; ... is actually the same as ... border-bottom-style: dotted; border-bottom: none thick green; ... and the value of border-bottom-style given before border-bottom is ignored. since the default value of border-bottom-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-bottom-color border-bottom-style border-bottom-width syntax border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-bottom-width. <br-style> see border-bottom-style. <color> see border-bottom-color. formal definit...
...And 10 more matches

border-image-width - CSS: Cascading Style Sheets
the border-image-width css property sets the width of an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
...e. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
... stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if this property's value is greater than the element's border-width, the border image will extend beyond the padding (and/or content) edge. ...
...And 10 more matches

border-top-right-radius - CSS: Cascading Style Sheets
the border-top-right-radius css property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...eractive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e or an ellipse, or if one of the value is 0 no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...And 10 more matches

border-block-color - CSS: Cascading Style Sheets
see color. ...
...see color. ...
...see color. ...
...And 9 more matches

ResizeObserverEntry.borderBoxSize - Web APIs
for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. ...
...for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. ...
...for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. ...
...And 8 more matches

border-bottom-style - CSS: Cascading Style Sheets
the border-bottom-style css property sets the line style of an element's bottom border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: the specification doesn't define how borders of different styles connect in the corners. ...
... the line style of an element's bottom border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: the specification doesn't define how borders of different styles connect in the corners. ...
...nt's bottom border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: the specification doesn't define how borders of different styles connect in the corners. ...
...And 7 more matches

border-image-outset - CSS: Cascading Style Sheets
the border-image-outset css property sets the distance by which an element's border image is set out from its border box. the parts of the border image that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...that are rendered outside the element's border box with border-image-outset do not trigger overflow scrollbars and don't capture mouse events. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...x with border-image-outset do not trigger overflow scrollbars and don't capture mouse events. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 7 more matches

border-top-left-radius - CSS: Cascading Style Sheets
the border-top-left-radius css property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...eractive-examples and send us a pull request. the rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. ...
...e or an ellipse, or if one of the value is 0,no rounding is done and the corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...And 7 more matches

border-block-start-width - CSS: Cascading Style Sheets
the border-block-start-width css property defines the width of the logical block-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...dth, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. ...
.... syntax /* <'border-width'> values */ border-block-start-width: 5px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. see border-width. ...
...And 6 more matches

border-inline-end-width - CSS: Cascading Style Sheets
the border-inline-end-width css property defines the width of the logical inline-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...dth, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. ...
...t. syntax /* <'border-width'> values */ border-inline-end-width: 2px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border. see border-width. ...
...And 6 more matches

border-block-end-width - CSS: Cascading Style Sheets
the border-block-end-width css property defines the width of the logical block-end border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...dth, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-end-width: 5px; border-block-end-width: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogic...
...th: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...
...And 5 more matches

border-block-start-color - CSS: Cascading Style Sheets
the border-block-start-color css property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...op-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-block-start-color: blue; border-block-start-color: #4c5d21; related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. ...
...ike to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-block-start-color: blue; border-block-start-color: #4c5d21; related properties are border-block-end-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. ...
...And 5 more matches

border-collapse - CSS: Cascading Style Sheets
the border-collapse css property sets whether cells inside a <table> have shared or separate borders. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
...repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
...o contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below. ...
...And 5 more matches

Table Cellmap - Border Collapse - Archive of obsolete content
the width is stored in pixel coordinates. ...
...the width is stored in pixel coordinates. ...
...the width is stored in pixel coordinates. ...
...And 4 more matches

-moz-border-bottom-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-bottom-colors css property sets a list of colors for the bottom border. /* single <color> value */ -moz-border-bottom-colors: #f0f0f0; /* multiple <color> values */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valu...
...ngle css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the bottom border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> =...
...e> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 4 more matches

-moz-border-left-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-left-colors css property sets a list of colors for the left border. /* single <color> value */ -moz-border-left-colors: #f0f0f0; /* multiple <color> values */ -moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-left-colors: inherit; -moz-border-left-colors: initial; -moz-border-left-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifieda...
...ngle css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the left border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <...
...e> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 4 more matches

-moz-border-right-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border. /* single <color> value */ -moz-border-right-colors: #f0f0f0; /* multiple <color> values */ -moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-right-colors: inherit; -moz-border-right-colors: initial; -moz-border-right-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas spe...
...ngle css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the right border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = ...
...e> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 4 more matches

-moz-border-top-colors - Archive of obsolete content
in mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border. /* single <color> value */ -moz-border-top-colors: #f0f0f0; /* multiple <color> values */ -moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* global values */ -moz-border-top-colors: inherit; -moz-border-top-colors: initial; -moz-border-top-colors: unset; when an element has a border that is larger than a single css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimatio...
...ngle css pixel, each line of pixels uses the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the top border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <r...
...e> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 4 more matches

border-block-width - CSS: Cascading Style Sheets
the border-block-width css property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-block-width: 5px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinherite...
...ck-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. ...
...ith border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. ...
...And 4 more matches

border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the size...
...lipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. ...
...efer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 4 more matches

border-inline-start-width - CSS: Cascading Style Sheets
the border-inline-start-width css property defines the width of the logical inline-start border of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...dth, border-right-width, border-bottom-width, or border-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-start-width: 5px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslo...
...width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. ...
...And 4 more matches

border-top-style - CSS: Cascading Style Sheets
the border-top-style css property sets the line style of an element's top border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the specification doesn't define how borders of different styles connect in the corners. ...
...ty sets the line style of an element's top border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the specification doesn't define how borders of different styles connect in the corners. ...
...f an element's top border. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the specification doesn't define how borders of different styles connect in the corners. ...
...And 4 more matches

border-block-end-color - CSS: Cascading Style Sheets
the border-block-end-color css property defines the color of the logical block-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...see color. ...
...rder-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-block-end-color: yellow; border-block-end-color: #f5f6f7; related properties are border-block-start-color, border-inline-start-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> the color of the border. see color. ...
...And 3 more matches

border-inline-width - CSS: Cascading Style Sheets
the border-inline-width css property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-inline-width: 5px 10px; border-inline-width: 5px; border-inline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies ...
...nline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. ...
...t with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. ...
...And 3 more matches

border-left-color - CSS: Cascading Style Sheets
the border-left-color css property sets the color of an element's left border. it can also be set with the shorthand css properties border-color or border-left. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent; /* global values */ border-left-color: inherit; border-left-color: initial; border-left-color: unset; the border-left-color property is specified as a single value. values <color> ...
... formal definition initial valuecurrentcolorapplies toall elements. ...
... rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 3 more matches

border-right-color - CSS: Cascading Style Sheets
the border-right-color css property sets the color of an element's right border. it can also be set with the shorthand css properties border-color or border-right. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <color> values */ border-right-color: red; border-right-color: #ffbb00; border-right-color: rgb(255, 0, 0); border-right-color: hsla(100%, 50%, 25%, 0.75); border-right-color: currentcolor; border-right-color: transparent; /* global values */ border-right-color: inherit; border-right-color: initial; border-right-color: unset; the border-right-color property is specified as a single value. values...
... formal definition initial valuecurrentcolorapplies toall elements. ...
... rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 3 more matches

mask-border-slice - CSS: Cascading Style Sheets
the mask-border-slice css property divides the image set by mask-border-source into regions. these regions are used to form the components of an element's mask border. syntax /* all sides */ mask-border-slice: 30%; /* vertical | horizontal */ mask-border-slice: 10% 30%; /* top | horizontal | bottom */ mask-border-slice: 30 30% 45; /* top | right | bottom | left */ mask-border-slice: 7 12 14 5; /* using the `fill` keyword */ mask-border-slice: 10% fill 7 12; /* global values */ mask-border-slice: inherit; mask-border-slice: initial; mask-border-slice: unset; the mask-border-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. negative values are invalid; values greater than their corresponding dimension are clamped t...
...age regions, respectively. description the 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. the above diagram illustrates the location of each region. zones 1-4 are corner regions. ...
... four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is used like a background image if the keyword fill is set. the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border. formal definition initial value0applies toall elements; in svg, it applies to cont...
...And 3 more matches

border-block-end-style - CSS: Cascading Style Sheets
the border-block-end-style css property defines the style of the logical block-end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...yle, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-end-style: dashed; border-block-end-style: dotted; border-block-end-style: groove; related properties are border-block-start-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies to...
...block-end-style: groove; related properties are border-block-start-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

border-block-start-style - CSS: Cascading Style Sheets
the border-block-start-style css property defines the style of the logical block start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...yle, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-block-start-style: dashed; border-block-start-style: dotted; border-block-start-style: groove; related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplie...
...block-start-style: groove; related properties are border-block-end-style, border-inline-start-style, and border-inline-end-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

border-bottom-color - CSS: Cascading Style Sheets
the border-bottom-color css property sets the color of an element's bottom border. it can also be set with the shorthand css properties border-color or border-bottom. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...css property sets the color of an element's bottom border. it can also be set with the shorthand css properties border-color or border-bottom. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <color> values */ border-bottom-color: red; border-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single value. values <color> ...
...r-bottom-color: #ffbb00; border-bottom-color: rgb(255, 0, 0); border-bottom-color: hsla(100%, 50%, 25%, 0.75); border-bottom-color: currentcolor; border-bottom-color: transparent; /* global values */ border-bottom-color: inherit; border-bottom-color: initial; border-bottom-color: unset; the border-bottom-color property is specified as a single value. values <color> the color of the bottom border. formal definition initial valuecurrentcolorapplies toall elements. it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it. note which side of the box is <span class="redtext">red</span>.</p> </div> c...
...And 2 more matches

border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes the...
...lipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. ...
...efer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 2 more matches

border-image-source - CSS: Cascading Style Sheets
the border-image-source css property sets the source image used to create an element's border image. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the border-image-slice property is used to divide the source image into regions, which are then dynamically applied to the final border image. syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the app...
... dynamically applied to the final border image. syntax /* keyword value */ border-image-source: none; /* <image> values */ border-image-source: url(image.jpg); border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the appearance defined by border-style is displayed instead. <image> image reference to use for the border. formal definition initial valuenoneapplies toall elements, except internal table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <im...
... candidate recommendation initial definition ...
...And 2 more matches

border-inline-start-color - CSS: Cascading Style Sheets
the border-inline-start-color css property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...see color. ...
...rder-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-inline-start-color: red; border-inline-start-color: #ee4141; related properties are border-block-start-color, border-block-end-color, and border-inline-end-color, which define the other border colors of the element. values <'color'> the color of the border. see color. ...
...And 2 more matches

border-inline-start-style - CSS: Cascading Style Sheets
the border-inline-start-style css property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...yle, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. ...
...border-style'> values */ border-inline-start-style: dashed; border-inline-start-style: dotted; border-inline-start-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-end-style, which define the other border styles of the element. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete values <'border-style'> the line style of the border. see border-style. ...
...And 2 more matches

border-left-width - CSS: Cascading Style Sheets
the border-left-width css property sets the width of the left border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: ...
...border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single ...
...ine the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...
...And 2 more matches

border-right-width - CSS: Cascading Style Sheets
the border-right-width css property sets the width of the right border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following value...
...-right-width: 10em; border-right-width: 3vmax; border-right-width: 6px; /* global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single ...
...ine the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...
...And 2 more matches

border-spacing - CSS: Cascading Style Sheets
the border-spacing css property sets the distance between the borders of adjacent <table> cells. this property applies only when border-collapse is separate. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table. ...
...lease clone https://github.com/mdn/interactive-examples and send us a pull request. the border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table. note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing. ...
...the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table. note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing. syntax /* <length> */ border-spacing: 2px; /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em; /* global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or two values. when one <length> value is specified, it defines both the horizontal and vertical spacings between cells. when two <length> values are spec...
...And 2 more matches

border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes t...
...lipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. ...
...efer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 2 more matches

border-start-start-radius - CSS: Cascading Style Sheets
the border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percenta...
...lipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. ...
...efer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse. the behavior on internal table elements is undefined for the moment.. ...
...And 2 more matches

border-top-color - CSS: Cascading Style Sheets
the border-top-color css property sets the color of an element's top border. it can also be set with the shorthand css properties border-color or border-top. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <color> values */ border-top-color: red; border-top-color: #ffbb00; border-top-color: rgb(255, 0, 0); border-top-color: hsla(100%, 50%, 25%, 0.75); border-top-color: currentcolor; border-top-color: transparent; /* global values */ border-top-color: inherit; border-top-color: initial; border-top-color: unset; the border-top-color property is specified as a single value. values <color> the color of ...
... formal definition initial valuecurrentcolorapplies toall elements. ...
... rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...And 2 more matches

border-top-width - CSS: Cascading Style Sheets
the border-top-width css property sets the width of the top border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin ...
...es */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single ...
...ine the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document. formal definition initial valuemediumapplies toall elements. ...
...And 2 more matches

border-block-style - CSS: Cascading Style Sheets
the border-block-style css property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial val...
...d; border-block-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. ...
...border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. ...
...border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specification. editor's draft initial definition ...

border-inline-end-color - CSS: Cascading Style Sheets
the border-inline-end-color css property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...op-color, border-right-color, border-bottom-color, or border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax border-inline-end-color: rebeccapurple; border-inline-end-color: #663399; related properties are border-block-start-color, border-block-end-color, and border-inline-start-color, which define the other border colors of the element. initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color values <'color'> the color of the border. see color. form...
..., and border-inline-start-color, which define the other border colors of the element. initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color values <'color'> the color of the border. see color. ...
...> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification. editor's draft initial definition ...

border-inline-end-style - CSS: Cascading Style Sheets
the border-inline-end-style css property defines the style of the logical inline end border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...yle, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-style'> values */ border-inline-end-style: dashed; border-inline-end-style: dotted; border-inline-end-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneapplies ...
...inline-end-style: groove; related properties are border-block-start-style, border-block-end-style, and border-inline-start-style, which define the other border styles of the element. values <'border-style'> the line style of the border. see border-style. ...
...the line style of the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification. editor's draft initial definition ...

mask-border-mode - CSS: Cascading Style Sheets
formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere. ...
... formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere. ...
... candidate recommendation initial definition ...
...lements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this 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: mask-border-mode: luminance; mask-border-mode: alpha; specifications specification status comment css masking module level 1the definition of 'mask-border-mode' in that specification. candidate recommendation initial definition ...

border-inline-style - CSS: Cascading Style Sheets
the border-inline-style css property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-inline-style: dashed; border-inline-style: dotted; border-inline-style: groove; the border style in the other dimension can be set with border-block-style, which sets border-block-start-style, and border-block-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial valuenoneap...
...ted; border-inline-style: groove; the border style in the other dimension can be set with border-block-style, which sets border-block-start-style, and border-block-end-style. syntax values <'border-style'> the line style of the border. see border-style. ...
...f the border. see border-style. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-style' in that specification. editor's draft initial definition ...

mask-border-source - CSS: Cascading Style Sheets
the mask-border-source css property sets the source image used to create an element's mask border. the mask-border-slice property is used to divide the source image into regions, which are then dynamically applied to the final mask border. syntax /* keyword value */ mask-border-source: none; /* <image> values */ mask-border-source: url(image.jpg); mask-border-source: linear-gradient(to top, red, yellow); /* global values */ mask-border-source: inherit; mask-border-source: initial; mask-border-source: unset; values none no mask border is used. <image> image reference to use for the mask border. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifie...
...ngular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples basic usage this 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. mask-border-source: url(image.jpg); chromium-based browsers support an outdated version of this property — mask-box-image-source — with a prefix: -webkit-mask-box-image-source: url(image.jpg); note: the 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. specifications ...
...property — mask-box-image-source — with a prefix: -webkit-mask-box-image-source: url(image.jpg); note: the 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. specifications specification status comment css masking module level 1the definition of 'mask-border-source' in that specification. candidate recommendation initial definition ...

Test your skills: backgrounds and borders - Learn web development
this aim of this skill test is to get you working with css backgrounds and borders using the skills you have learned in the previous lesson. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. backgrounds and borders 1 in this task we want you to add a background, border, and some simple styling to a page header: give the box a 5px black solid border, with rounded corners of 10px. add a background image (use the url balloons.jpg) and size it so that it covers the box. give the <h2> a semi-transparent black background color...
...nd image (use the url balloons.jpg) and size it so that it covers the box. give the <h2> a semi-transparent black background color, and make the text white. the finished example should look like the image below. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5px lightblue border, and round the top left corner 20px and the bottom right corner 40px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right. make sure that the heading text do...

HTMLTableElement.border - Web APIs
the htmltableelement.border property represents the border width of the <table> element. syntax htmltableelement.border = border; var border = htmltableelement.border; border is a string representing the width of the border in pixels. example // set the width of a table border to 2 pixels var t = document.getelementbyid('tablea'); t.border = '2'; specification w3c dom 2 html specification htmltableelement .border. this attribute is deprecated in html 4.0. ...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
his first example, i am using flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...ng flexbox to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...f boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...And 44 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
with 3 column tracks and 3 row tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...ow tracks. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...s in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...And 42 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
y onto a created grid, the css grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...s grid layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...tains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...And 37 more matches

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
is. when we use these properties, we are changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...ies, we are changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...ent of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...And 34 more matches

The box model - Learn web development
on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the box will become as wide as its container, filling up 100% of the space available. the width and height properties are respected. ...
... the <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default. ...
...ine, elements such as headings (e.g. <h1>) and <p> all use block as their outer display type by default. if a box has an outer display type of inline, then: the box will not break onto a new line. the width and height properties will not apply. vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. the <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default. the type of box applied to an element is defined by display property values such as block and inline, and relates to the outer value of display. aside: inner and outer display types at this point,...
...And 31 more matches

CSS property compatibility table for form controls - Learn web development
be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not s...
...be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property...
...roperty n t note css box model width yes yes height partial[1][2] yes webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields. therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. ...
...And 31 more matches

Basic Concepts of grid layout - CSS: Cascading Style Sheets
n element. as soon as we do this, all direct children of that element become grid items. in this example, i have a containing div with a class of wrapper and, inside are five child elements. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> i make the .wrapper a grid container. .wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items. in a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, a...
...ty, then defining the size of the column tracks. i have now created a grid with three 200-pixel-wide column tracks. the child items will be laid out on this grid one in each grid cell. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit. grid also introduces an additional length unit to help us create flexible grid tracks. the new fr uni...
... unit represents a fraction of the available space in the grid container. the next grid definition would create three equal width tracks that grow and shrink according to the available space. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks. the available space is split into four. two parts are given to the first tr...
...And 31 more matches

Box-shadow generator - CSS: Cascading Style Sheets
lass="ui-slider-input" data-topic="spread" data-unit="px"></div> </div> </div> </div> <div id="element_properties" class="category"> <div class="title"> class element properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> border </div> <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> </div> <div id="z-index" class="slidergroup"> <div class="ui-slider-name"> z-index </div> <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> <div class="ui-...
...a-topic="height" data-type="add"></div> <div class="ui-slider-input" data-topic="height" data-unit="px"></div> </div> </div> </div> <div id="output" class="category"> <div id="menu" class="menu"></div> <div class="title"> css code </div> <div class="group" style="border-top-left-radius: 0;"> <div class="output" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[&quot;&quot;] position=[absolute] width ...
...ld { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { w...
...And 30 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather t...
...the different writing modes found around the world. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...nd around the world. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...And 25 more matches

Grid template areas - CSS: Cascading Style Sheets
sing line numbers specified on the items themselves, i create the whole layout on the grid container. ...
...n the items themselves, i create the whole layout on the grid container. ...
...e the whole layout on the grid container. ...
...And 21 more matches

Color picker tool - CSS: Cascading Style Sheets
<div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-s...
... hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { backgroun...
...: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb ...
...And 20 more matches

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
or. then we'll wrap things up with a brief discussion of how to use color wisely: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities. things that can have color at the element level, everything in html can have color applied to it. instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. for each, we'll see a list of the css properties that apply color to them. at a fundamental level, the color property defines the foreground color of an html element's content and the background-color property defines the element's background color. these can be used on just about any element. text whenever an element is rendered, these properties are used to determine the color...
...imarily when drawing text for east asian languages. caret-color the color to use when drawing the caret (sometimes referred to as the text input cursor) within the element. this is only useful in elements that are editable, such as <input> and <textarea> or elements whose html contenteditable attribute is set. boxes every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have. borders see the section borders for a list of the css properties you can use to set the colors of a box's borders. background-color the background color to use in areas of the element that have no foreground content. column-rule-color the color to use when drawing the line separating columns of text. outline-color the color to use when ...
...or a list of the css properties you can use to set the colors of a box's borders. background-color the background color to use in areas of the element that have no foreground content. column-rule-color the color to use when drawing the line separating columns of text. outline-color the color to use when drawing an outline around the outside of the element. this outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). it's generally used as a focus indicator, to show which element will receive input events. borders any element can have a border drawn around it. a basic element border is a line drawn around the edges of the element's content. see box properties in the box model to learn about the relationship bet...
...And 20 more matches

Shorthand properties - CSS: Cascading Style Sheets
perties 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. ...
...rent types, as the order has no importance, but this does not work as easily when several properties can have identical values. ...
...can have identical values. handling of these cases are grouped in several categories: shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges: the 1-value syntax: border-width: 1em — the unique value represents all edges the 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. ...
...And 17 more matches

Index - Web APIs
dom level 2 style recommendation, these interfaces forms now a specification, css object model (cssom) which aims at superseding it. 397 css painting api api, css, css paint api, houdini, painting, reference the css painting api — part of the css houdini umbrella of apis — allows developers to write javascript functions that can draw directly into an element's background, border, or content. 398 using the css painting api css, css paint api, canvas, houdini, learn the css paint api is designed to enable developers to programmatically define images which can then be used anywhere a css image can be invoked, such as css background-image, border-image, mask-image, etc. 399 css properties and values api houdini the css properties and...
...g the cssgroupingrule interface represents any css at-rule that contains other rules nested within it. 406 cssimagevalue api, css typed object model api, cssimagevalue, experimental, houdini, interface, reference the cssimagevalue interface of the css typed object model api represents values for properties that take an image, for example background-image, list-style-image, or border-image-source. the 407 csskeyframerule api, css animations, cssom, experimental, interface, reference the csskeyframerule interface describes an object representing a set of style for a given keyframe. it corresponds to the contains of a single keyframe of a @keyframes at-rule. it implements the cssrule interface with a type value of 8 (cssrule.keyframe_rule). 408 c...
...property of the element interface gets and sets the value of the class attribute of the specified element. 1103 element.clientheight api, cssom view, needsmarkupwork, property, reference the element.clientheight read-only property is zero for elements with no css or inline layout boxes; otherwise, it's the inner height of an element in pixels. it includes padding but excludes borders, margins, and horizontal scrollbars (if present). 1104 element.clientleft api, cssom view, needsagnostify, needsmarkupwork, property, reference the width of the left border of an element in pixels. it includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rende...
...And 16 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
s it should become clearer and easier to work with. naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. to demonstrate i’ll use the simple layout created in the guide on line-based placement. this time i’ll create the grid using named lines. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container...
...uoted. while you can choose any name, if you append -start and -end to the lines around an area, as i have in the example above, grid will create you a named area of the main name used. taking the above example, i have content-start and content-end both for rows and for columns. this means i get a grid area named content, and could place something in that area should i wish to. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content. .wrapper { display: grid; gr...
...is gives us column and row lines: hd-start hd-end sd-start sd-end main-start main-end ft-start ft-end you can see the named lines in the image, note that some lines have two names - for example sd-end and main-start refer to the same column line. to position overlay using these implicit named lines is the same as positioning an item using lines that we have named. ...
...And 16 more matches

Grids - Learn web development
ontainer { display: grid; grid-template-columns: 200px 200px 200px; } add the 2nd declaration to your css rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid. ...
... add the 2nd declaration to your css rule, then reload the page, and you should see that the items have rearranged themselves one into each cell of the created grid. ...
...x fr units and fixed length tracks — in such a case the space needed for the fixed tracks is taken away before the space is distributed to the other tracks. simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div class="container"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> </div> note: the fr unit distributes available space, not all space. therefore if one of your t...
...And 15 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
es precedence. in the example below, i have a simple media object. in a non-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...t, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...And 15 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
<div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-s...
... -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { backgroun...
...: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { ...
...And 15 more matches

Introduction to CSS layout - Learn web development
l appear to stretch to the height of the tallest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. ...
...f the tallest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items. these properties, amon...
...and fill the container, rather than leaving space at the end. if there is more space then the items will become wider; if there is less space they will become narrower. in addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is. ...
...And 13 more matches

::-ms-fill-lower - Archive of obsolete content
ding to values less than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...
...han the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...
...ected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-fill-upper - Archive of obsolete content
g to values greater than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...
...han the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...
...ected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-reveal - Archive of obsolete content
l button is usually displayed at the edge of the password field. the ::-ms-reveal pseudo-element is specific to internet explorer 10 and later. allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
...isplayed at the edge of the password field. the ::-ms-reveal pseudo-element is specific to internet explorer 10 and later. allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
... password field. the ::-ms-reveal pseudo-element is specific to internet explorer 10 and later. allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-thumb - Archive of obsolete content
moves within the track of a slider control to alter its numerical value. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...
...k of a slider control to alter its numerical value. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...
...ter its numerical value. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-ticks-after - Archive of obsolete content
three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...arks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...erience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-ticks-before - Archive of obsolete content
three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...rks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...rience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-track - Archive of obsolete content
create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
...tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
...er experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
...And 12 more matches

::-ms-value - Archive of obsolete content
eudo-element is a microsoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control. allowable properties only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...
...rosoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control. allowable properties only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...
...es rules to the value of a text or password <input> control or the content of a <select> control. allowable properties only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...
...And 12 more matches

Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
... grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
... grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
...And 12 more matches

filter - CSS: Cascading Style Sheets
included in the css standard are several functions that achieve predefined effects. you can also reference an svg filter with a url to an svg filter element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...tyle="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204,...
...> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204,...
...And 12 more matches

UI pseudo-classes - Learn web development
want a response): </label> <input id="email" name="email" type="email"> </div> <div><button>submit</button></div> </fieldset> </form> here, the first name and last name are required, but the email address is optional. you can match these two states using the :required and :optional pseudo-classes. for example, if we apply the following css to the above html: input:required { border: 1px solid black; } input:optional { border: 1px solid silver; } the required controls would have a black border, and the optional control will have a silver border, like so: you can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you by default. the above form isn't bad, but it isn't great either. for a start, we are sign...
...you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. ...
...we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check o...
...And 11 more matches

CSS Logical Properties and Values - CSS: Cascading Style Sheets
e dimension the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...on parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
... the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...And 11 more matches

box-sizing - CSS: Cascading Style Sheets
element is calculated. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default in the css box model, the width and height you assign to an element is applied only to the element's content box. ...
...end us a pull request. by default in the css box model, the width and height you assign to an element is applied only to the element's content box. if the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. this means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. for example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. the box-sizing property can be used to adjust this behavior: content-box gives you the default css box-sizing behavior. if you set an element's width to 100 pixel...
...5%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. the box-sizing property can be used to adjust this behavior: content-box gives you the default css box-sizing behavior. if you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px. border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. if you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. this typical...
...And 11 more matches

::-ms-check - Archive of obsolete content
ement is supported only in internet explorer and microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
...ly in internet explorer and microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
... microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
...And 10 more matches

Client-side form validation - Learn web development
at allows you to choose whether you prefer a banana or a cherry. this example involves a simple text <input> with an associated <label> and a submit <button>. find the source code on github at fruit-start.html and a live example below. <form> <label for="choose">would you prefer a banana or cherry?</label> <input id="choose" name="i_like"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } to begin, make a copy of fruit-start.html in a new directory on your hard drive. the required attribute the simplest html5 validation feature is the required attribute. to make an input mandatory, add this attribute to the element. when this attribute is set, the element matches the :required ui pseudo-class and the form won't su...
...t is empty. while empty, the input will also be considered invalid, matching the :invalid ui pseudo-class. add a required attribute to your input, as shown below. <form> <label for="choose">would you prefer a banana or cherry? (required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid. we also added a background gradient when the input is required and invalid. try out the new behavior in the example belo...
...t we don't cover here. for a complete list and many examples, consult our regular expressions documentation. let's implement an example. update your html to add a pattern attribute like this: <form> <label for="choose">would you prefer a banana or a cherry?</label> <input id="choose" name="i_like" required pattern="[bb]anana|[cc]herry"> <button>submit</button> </form> input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; } this gives us the following update — try it out: note: you can find this example live on github as fruit-pattern.html (see also the source code.) in this example, the <input> element accepts one of four possible values: the strings "banana", "banana", "cherry", or "cherry". regular expressions are case-sensitive, but we've m...
...And 10 more matches

Element.getClientRects() - Web APIs
the getclientrects() method of the element interface returns a collection of domrect objects that indicate the bounding rectangles for each css border box in a client. syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the element. each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport. for tables with captions, the caption is included even though it's outside the border box of the table. when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes ...
...he "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any). originally, microsoft intended this method to return a textrectangle object for each line of text. however, the cssom working draft specifies that it returns a domrect for each border box. for an inline element, the two definitions are the same. but for a block element, mozilla will return only a single rectangle. firefox 3.5 note firefox 3.5 adds width and height properties to the textrectangle object. the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles. the returned...
...en into account when computing the rectangles. the returned rectangles do not include the bounds of any child elements that might happen to overflow. for html <area> elements, svg elements that do not render anything themselves, display:none elements, and generally any elements that are not directly rendered, an empty list is returned. rectangles are returned even for css boxes that have empty border-boxes. the left, top, right, and bottom coordinates can still be meaningful. fractional pixel offsets are possible. examples these examples draw client rects in various colors. note that the javascript function that paints the client rects is connected to the markup via the class withclientrectsoverlay. html example 1: this html creates three paragraphs with a <span> inside, each embedded in...
...And 9 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
a sidebar at a certain breakpoint and then bring in a three-column layout for wider screens. i am going to create this layout using the named template areas that we learned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...t we learned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...And 9 more matches

clip-path - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ing-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below. values <clip-source> a <url> referencing an svg <clippath> element. <basic-shape> a shape whose size and position is defined by the <geometry-box> value. if no geometry box is specified, the border-box will be used as the reference box. <geometry-box> if specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. the geometry box can be one of the following values: margin-box uses the margin ...
... padding-box uses the padding box as the reference box. ...
...And 9 more matches

Index - Archive of obsolete content
summary! 391 finding the code to modify add-ons, extensions now that we've found the file to edit, we need to find the specific code within that file. again, the dom inspector makes this easy. the "document - dom nodes" pane on the left-hand side of the inspector window displays a tree representation of the browser window's xul file. when you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the browser window. 392 finding the file to modify add-ons, extensions now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, et...
...other window. 645 supporting private browsing mode private browsing firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. this includes cookies, history information, download information, and so forth. 646 table cellmap gecko the table layout use the cellmap for two purposes: 647 table cellmap - border collapse this document describes the additional information that is stored for border collapse tables in the cellmap. 648 table layout regression tests gecko, outdated_articles changes in layout, parser and content code can have unintended side effects, also known as regressions. it is good style to check for these unwanted regressions and fixing them before checki...
... element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. 1854 groupbox xul elements, xul reference the groupbox is used to group related elements together. if a caption element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. 1855 hbox xul elements, xul reference a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizonta...
...And 8 more matches

::-ms-browse - Archive of obsolete content
s the button that opens the file picker of <input type="file">. permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
...ns the file picker of <input type="file">. permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
...t type="file">. permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
...And 8 more matches

::-ms-clear - Archive of obsolete content
pe="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...
...e="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...
..."> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...
...And 8 more matches

::-ms-expand - Archive of obsolete content
es the drop-down menu. typically it is a triangle that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...
.... typically it is a triangle that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...
...e that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...
...And 8 more matches

Positioning - Learn web development
, rems, %, etc. if you now save and refresh, you'll get a result something like this: <h1>relative positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">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.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elements <span>wrap onto a new line if possible — like ...
...line as one another, and adjacent text nodes, if there is space on the same line. ...
...ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the...
...And 8 more matches

create fancy boxes - Learn web development
o working code; it's challenging because of annoying constraints and crazy freedom in the use of css. let's do some fancy boxes. before we start getting into the practical side of it, make sure you are familiar with the css box model. it's also a good idea, but not a prerequisite, to be familiar with some css layout basics. on the technical side, creating fancy boxes are all about mastering css border and background properties and how to apply them to a given box. but beyond the technics its also all about unleashing your creativity. it will not be done in one day, and some web developers spend their whole life having fun with it. we are about to see many examples, but we will always work on the most simple piece of html possible, a simple element: <div class="fancy">hi! i want to be fancy.<...
...e in one day, and some web developers spend their whole life having fun with it. ...
...adding, border, etc. its background properties: background, background-color, background-image, background-position, background-size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius larger than the actual size of the box. making circles <div class="fancy">hi! i want to be fancy.</div> this is something that is both very simple and very fun. the border-radius property is made to create a rounded corner applied to...
...And 8 more matches

Styling web forms - Learn web development
their equivalent input types! there's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. this decision is yours to make, as the designer of your site, or web application. box sizing all text fields have complete support for every property related to the css box model, such as width, height, padding, margin, and border. as before, however, browsers rely on the system default styles when displaying these widgets. it's up to you to define how you wish to blend them into your content. if you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size. this is because each widget has their own rules for border, padding and margin. to give the sam...
...gets, you'll face a little difficulty if you want to give them a consistent size. this is because each widget has their own rules for border, padding and margin. to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of th...
...nshot is that the radio and checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. by default it is always positioned over the top border of its <fieldset> parent, near the top left corner. to position it somewhere else, for example inside the fieldset somewhere, or near the bottom left corner, you need to rely on positioning. take the following example: to position the legend in this manner, we used the following css (other declarations removed for brevity): fieldset { position: relative; } legend { position: absolute; ...
...And 8 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
ixed with -webkit-. most -webkit- prefixed properties also work with an -apple- prefix. a few are prefixed with -epub-. webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
... -webkit- prefixed properties also work with an -apple- prefix. a few are prefixed with -epub-. webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
...also work with an -apple- prefix. a few are prefixed with -epub-. webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
...And 8 more matches

<color> - CSS: Cascading Style Sheets
radient>, the current css spec states that transparent should be calculated in the alpha-premultiplied color space. however, be aware that older browsers may treat it as black with an alpha value of 0. historical note: transparent wasn't a true color in css level 2 (revision 1). it was a special keyword that could be used instead of a regular <color> value on two css properties: background and border. it was essentially added to allow developers to override an inherited solid color. with the advent of alpha channels in css colors level 3, transparent was redefined as a true color. it can now be used wherever a <color> value can be used. currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the color value on properties that do ...
...color> value can be used. currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the color value on properties that do not receive it by default. if currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property. currentcolor example html <div style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue. <div style="background:currentcolor; height:9px;"></div> this block is surrounded by a blue border. </div> result rgb colors the rgb color model defines a given color according to its red, green, and blue components. an optional alpha component represents the color's transparency. syntax rgb colors can be expressed through b...
...ht background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions of the css color module. they are now deprecated. for use on public web pages. activeborder active window border. activecaption active window caption. should be used with captiontext as foreground color. appworkspace background color of multiple document interface. background desktop background. buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color ...
...And 8 more matches

background-clip - CSS: Cascading Style Sheets
the background-clip css property sets whether an element's background extends underneath its border box, padding box, or content box. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. if the element has no background-image or background-color, this property will only have a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference. note: because the root element has a different background painting area, the background-clip property has no effect when specified on it. see "the backgrounds of special elements." n...
...lement’s first html <body> child element. the used values of that <body> element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. it is recommended that authors of html documents specify the canvas background for the <body> element rather than the html element. syntax /* keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering). padding-box the background extends to the outside edge of the padding. no background is ...
...lip: padding-box; background-clip: content-box; background-clip: text; /* global values */ background-clip: inherit; background-clip: initial; background-clip: unset; values border-box the background extends to the outside edge of the border (but underneath the border in z-ordering). padding-box the background extends to the outside edge of the padding. no background is drawn beneath the border. content-box the background is painted within (clipped to) the content box. text the background is painted within (clipped to) the foreground text. ...
...And 7 more matches

Organizing your CSS - Learn web development
or something that we want to change. avoid overly-specific selectors if you create very specific selectors you will often find that you need to duplicate chunks of your css to apply the same rules to another element. for example, you might have something like the below selector, which applies the rule to a <p> with a class of box inside an <article> with a class of main. ...
...f box inside an <article> with a class of main. article.main p.box { border: 1px solid #ccc; } if you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. instead, you could use the selector .box to apply your rule to any element that has the class box: .box { border: 1px solid #ccc; } there will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice. break large stylesheets into multiple smaller ones in particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones ...
... if you are not taking an oocss approach you might create custom css for the different places this pattern is used, for example creating a class called comment with a bunch of rules for the component parts, then a class called list-item with almost the same rules as the comment class except for some tiny differences. ...
...And 6 more matches

Styling tables - Learn web development
r files. ...
... html by placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped! ...
...umn width follows the width of its heading, making for a nice way to size your table columns. chris coyier discusses this technique in more detail in fixed table layouts. we've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need some more work to get it looking good on narrow screen widths). ...
...And 6 more matches

Floats - Learn web development
uam tincidunt eget purus in interdum. ...
...nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. ...
...bortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case). any content that comes below the floated element in the normal layout flow...
...And 6 more matches

How CSS is structured - Learn web development
in the example above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet" href="st...
...ternal stylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful. for example, perhaps you're working with a content management system where you are blocked from modifying external css files. but for sites with more than on...
... edits to multiple web pages. inline styles inline styles are css declarations that affect a single html element, contained within a style attribute. the implementation of an inline style in an html document might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible. it is the opposite of a best practice. first, it is the least efficient implementation of css for maintenance. one styling change might require multiple edits within in a single web page. second, inline css also mixes (css) presentational co...
...And 6 more matches

Styling links - Learn web development
them in some other way. make them react in some way when hovered/focused, and in a slightly different way when activated. the default styles can be turned off/changed using the following css properties: color for the text color. cursor for the mouse pointer style — you shouldn't turn this off unless you've got a very good reason. outline for the text outline (an outline is similar to a border, the only difference being that border takes up space in the box and an outline doesn't; it just sits over the top of the background). the outline is a useful accessibility aid, so think carefully before turning it off; you should at least double up the styles given to the link hover state on the focus state too. note: you are not just limited to the above properties to style your links — yo...
...ber the order, you could try using a mnemonic like love fears hate. ...
...te. ...
...And 6 more matches

Advanced form styling - Learn web development
e future browser vendors may come to a consensus to drop the prefix. the above code is good for future-proofing against such an eventuality. the following live example shows you what they look like in your system — default on the left, and with the above css applied on the right (find it here also if you want to test it on other systems). in most cases, the effect is to remove the stylized border, which makes css styling a bit easier, but isn't really essential. in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful. we'll look at those now. taming search boxes <input type="search"> is basically just a text input, so why is appearance: none; useful here? the answer is that in chromium-based browsers on macos, search boxes have some styling restrictions ...
...friend appearance: none;, which disables the default aqua appearance: input[type="search"] { -webkit-appearance: none; appearance: none; } in the example below, you can see two identical styled search boxes. the right one has appearance: none; applied, and the left one doesn't. if you look at it in macos chrome you'll see that the left one isn't sized properly. interestingly, setting border/background on the search field also fixes this problem, as it disables or "breaks" the aqua appearance too. the following styled search doesn't have appearance: none; applied, but it doesn't suffer from the same problem in macos chrome as the previous example. note: you may have noticed that in the search field, the "x" delete icon disappears when the input loses focus in edge and chrome, but...
...dset> </form> now, let's style these with a custom checkbox design. ...
...And 6 more matches

Example 1 - Learn web development
select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inli...
...t(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,...
...rder-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="...
...And 6 more matches

Styling Vue components with CSS - Learn web development
this folder get processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
...good to know that when including such code in the assets folder it will be processed automatically. ...
....5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -...
...And 6 more matches

Introduction to the CSS basic box model - CSS: Cascading Style Sheets
the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. ...
... the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. ...
...width, min-width, max-width, height, min-height, and max-height properties. the padding area, bounded by the padding edge, extends the content area to include the element's padding. its dimensions are the padding-box width and the padding-box height. the thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties. ...
...And 6 more matches

mask-clip - CSS: Cascading Style Sheets
the mask-clip css property determines the area which is affected by a mask. the painted content of an element must be restricted to this area. /* <geometry-box> values */ mask-clip: content-box; mask-clip: padding-box; mask-clip: border-box; mask-clip: margin-box; mask-clip: fill-box; mask-clip: stroke-box; mask-clip: view-box; /* keyword values */ mask-clip: no-clip; /* non-standard keyword values */ -webkit-mask-clip: border; -webkit-mask-clip: padding; -webkit-mask-clip: content; -webkit-mask-clip: text; /* multiple values */ mask-clip: padding-box, no-clip; mask-clip: view-box, fill-box, border-box; /* global values */ mask-clip: inherit; mask-clip: initial; mask-clip: unset; syntax one or more of the keyword values listed below, separated by commas. values content-box the pai...
... margin-box the painted content is clipped to the margin box. fill-box the painted content is clipped to the object bounding box. stroke-box the painted content is clipped to the stroke bounding box. ...
... margin-box the painted content is clipped to the margin box. fill-box the painted content is clipped to the object bounding box. stroke-box the painted content is clipped to the stroke bounding box. view-box uses the nearest svg viewport as reference box. ...
...And 6 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
">june 3, 2010</time></td> <td>0.00</td> </tr> <tr> <td>edvard galinski</td> <td>533175</td> <td><time datetime="2011-01-13">january 13, 2011</time></td> <td>37.00</td> </tr> <tr> <td>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> css this simple css just adds a solid black border around the table and around each of its cells, including those specified using both <th> and <td>. that way, both header and data cells are easily demarcated. table { border: 1px solid black; } th, td { border: 1px solid black; } result row and column spanning now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "join...
.../tr> </table> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. the css is unchanged from before. table { border: 1px solid black; } th, td { border: 1px solid black; } explicitly specifying table content groups before really getting into styling this table, let's take a moment to add row and column groups to help make our css easier. html the html is where the action is here, and the action is pretty simple. <table> <thead> <tr> <th rowspan="2">name</th> <th rowspan="2">id</th> ...
.../table> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. once again, we haven't touched the css. table { border: 1px solid black; } th, td { border: 1px solid black; } result the output is entirely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css. any styles applied to the <tr> element will affect the cells within the row unless overridden...
...And 6 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
oat: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left. this way they end up side-by-side, and their proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. ...
... floating the columns all left. this way they end up side-by-side, and their proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. ...
...by-side, and their proportions remain the same as the browser window size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } this basically means that width and height will now set the dimensions of an element all the way up to and including the border, not just the content. so if you set width: 40%, the box width will always be 40% of its parent, and any padding and border widths set on the box will be subtracted from the content width, not added to it. ...
...And 6 more matches

Modifying the Page Hosted by a Tab - Archive of obsolete content
, load one or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web content. here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just dr...
...lid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just draws a red border around the page. then open any web page in the browser window, and click the button . you should see a red border appear around the page, like this: keeping content scripts in a separate file in the example above, we've passed in content script as a string. unless script is extremely simple, maintain the script as a separate file in add-on's data directory. this makes the code easier to mai...
...cript, port is a property of the global self object. in the add-on script, tab.attach() returns a worker object containing the port property you use to send messages to the content script. let's rewrite the example above to pass a message from the add-on to the content script. ...
...And 5 more matches

Creating a Skin - Archive of obsolete content
we want to make. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1px solid white; border-bottom: 1px solid #666666; border-left: 1px solid white; border-right: 1px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color. you can see this blue behind the tab strip and along the bottom of the window. four elements,...
...you can see this if you look closely. the background color of the caption has also been changed to match the background. the first rule above (for 'window > box') specifies that the child box of the window has a different color. this probably isn't the best way to do this. ...
...e class. let's do this. that way, we can modify the xul without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. ...
...And 5 more matches

Browser Feature Detection - Archive of obsolete content
e true dom css 1 support for properties/methods in document.body.style name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 background true true true backgroundattachment true true true backgroundcolor true true true backgroundimage true true true backgroundrepeat true true true border true true true borderspacing true false true borderstyle true true true bordertop true true true borderright true true true borderbottom true true true borderleft true true true bordertopwidth true true true borderrightwidth true true true ...
... true true true borderspacing true false true borderstyle true true true bordertop true true true borderright true true true borderbottom true true true borderleft true true true bordertopwidth true true true borderrightwidth true true true borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true color true true true display true true true cssfloat true false true font true true true fontfamily true true true fontsize true ...
... true true true whitespace true true true width true true true wordspacing true true true dom css 2 support for properties/methods in document.body.style</caption> name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 azimuth true false false backgroundposition true true true bordercollapse true true true borderspacing true false true bordertopcolor true true true borderrightcolor true true true borderbottomcolor true true true borderleftcolor true true true bordertopstyle true true true borderrightstyle true true true borderbottomst...
...And 5 more matches

CSS - Archive of obsolete content
normally, a ...
...normally, a ...
...normally, a ...
...And 5 more matches

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
ile as the fish themselves, it was necessary to strip out all of the tables, font tags, and other non-validating stuff. at the end of it, there were a series of div elements that contained a picture of the fish, the name of the fish, and one or more paragraphs of text about the fish. here's a typical (and short) example. <div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h3>clown trigger</h3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general. he's much better now. </p> </div> basically, that's all that was needed. the reason for the class value being card is that the original idea was to style each fish's description like a trading card. although this design approach ...
...come this error in document flow wasn't worth the effort. the layout wasn't bad if the fish weren't laid out next to each other, so i moved on. floating fish with the cards set up to float, the next step was to place the images appropriately. this involved floating the image inside the floated div. it just seemed like a fish cam page should have a lot of floating for some reason. ...
.... floating fish with the cards set up to float, the next step was to place the images appropriately. this involved floating the image inside the floated div. it just seemed like a fish cam page should have a lot of floating for some reason. i also added a border to the image, so that it would have a nice frame. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; border: 1px solid #339;} that done, it was time to style the fish names. these are enclosed in h3 elements, so the field was pretty wide open in terms of what we could do. since the image was floated, any background or border we set on the h3 would "slide under" the image; this is an expected effect with floated elements. rather than try to fight it or push the image below the h3's element box, i let...
...And 5 more matches

Beginning our React todo list - Learn web development
a string literal. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...
...e in the way checked is. ...
....5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { ...
...And 5 more matches

Starting our Svelte Todo list app - Learn web development
them in its compiler, and most of them have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our markup let's make the todo list look a little better. ...
...ink. styling our markup let's make the todo list look a little better. ...
....5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { ...
...And 5 more matches

CSSStyleDeclaration.setProperty() - Web APIs
ue undefined exceptions domexception (nomodificationallowederror): if the property or declaration block is read only. if priority can be omitted, javascript has a special simpler syntax for setting a css property on a style declaration object: style.csspropertyname = 'value'; examples in this example we have three buttons, which can be pressed to dynamically alter our box paragraph's border, background color, and text color to random values (see the live example at the end of this section). we know that the rule we want to alter to do this is contained inside the second stylesheet applied to the page, so we grab a reference to it using document.stylesheets[1]. we then loop through the different rules contained inside the stylesheet, which are contained in the array found at stylesh...
...ylerule.selectortext property is equal to the selector .box p, which indicates it is the one we want. if so, we store a reference to this cssstylerule object in a variable. we then use three functions to generate random values for the properties in question, and update the rule with these values. ...
...ctortext property is equal to the selector .box p, which indicates it is the one we want. if so, we store a reference to this cssstylerule object in a variable. we then use three functions to generate random values for the properties in question, and update the rule with these values. ...
...And 5 more matches

WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
... the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
...xt.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
...And 5 more matches

Shapes from box values - CSS: Cascading Style Sheets
a straightforward way to create a shape is to use a value from the css box model. this article explains how to do this. the box values allowable as a shape value are: content-box padding-box border-box margin-box the border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape. css box model the values listed above correspond to the various parts of the css box model. a box in css has content, padding, border, and margin. ...
...n your page with a curved border, and your shape can follow the created shape. css box model the values listed above correspond to the various parts of the css box model. a box in css has content, padding, border, and margin. by using box values for shapes we can wrap our content around the edges defined by these values. in all of the examples below i am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow. margin-box the margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should border-radius have been used in defining the element. in the example below, we have a circular purple item which is a <div> with a height, width, and background colour. the bo...
...ys in which content will flow. margin-box the margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should border-radius have been used in defining the element. in the example below, we have a circular purple item which is a <div> with a height, width, and background colour. the border-radius property has been used to create a circle by setting border-radius: 50%. as the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it. border-box the border-box value is the shape defined by the outside border edge. this shape follows all of the normal border radius shaping rules for the outside of the border. you still have a border, even if you have not used the css border property. in t...
...And 5 more matches

Mozilla CSS extensions - CSS: Cascading Style Sheets
roperties, values, pseudo-elements and pseudo-classes, at-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) 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 elements. ...
...ments and pseudo-classes, at-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) 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 elements. ...
...t-rules, and media queries. these extensions are prefixed with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) 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 elements. ...
...And 5 more matches

mask-origin - CSS: Cascading Style Sheets
the mask-origin css property sets the origin of a mask. /* keyword values */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box; /* multiple values */ mask-origin: padding-box, content-box; mask-origin: view-box, fill-box, border-box; /* non-standard keyword values */ -webkit-mask-origin: content; -webkit-mask-origin: padding; -webkit-mask-origin: border; /* global values */ mask-origin: inherit; mask-origin: initial; mask-origin: unset; for 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 mask-image css property. for elements rendered as multipl...
...s which boxes box-decoration-break operates upon to determine the mask positioning area. syntax one or more of the keyword values listed below, separated by commas. values content-box the position is relative to the content box. padding-box 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. border-box the position is relative to the border box. margin-box the position is relative to the margin box. fill-box the position is relative to the object bounding box. stroke-box the position is relative to the stroke bounding box. view-box uses the nearest svg viewport as reference box. if a viewbox attribute is specified for the element creating the svg viewport, the reference box is posi...
...the nearest svg viewport as reference box. if a 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. content same as content-box. padding same as padding-box. ...
...And 5 more matches

shape-outside - CSS: Cascading Style Sheets
xt around complex objects rather than simple boxes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
..., which define the float area for float elements. the float area determines the shape around which inline content (float elements) wrap. values none the float area is unaffected. inline content wraps around the element's margin box, like usual. <shape-box> the float area is computed according to the shape of a float element's edges (as defined by the css box model). ...
...und which inline content (float elements) wrap. values none the float area is unaffected. inline content wraps around the element's margin box, like usual. <shape-box> the float area is computed according to the shape of a float element's edges (as defined by the css box model). this can be margin-box, border-box, padding-box, or content-box. the shape includes any curvature created by the border-radius property (behavior which is similar to background-clip). margin-box defines the shape enclosed by the outside margin edge. the corner radii of this shape are determined by the corresponding border-radius and 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 c...
...And 5 more matches

Cascade and inheritance - Learn web development
can always look up the details if you forget! even experienced developers don't remember all the details. the below video shows how you can use the firefox devtools to inspect a page's cascade, specificity, and more: understanding inheritance we'll start with inheritance. in the example below we have a <ul>, with two levels of unordered lists nested inside it. ...
... controlling inheritance css provides four special universal property values for controlling inheritance. ...
... color. the color has applied to the direct children, but also the indirect children — the immediate child <li>s, and those inside the first nested list. we have then added a class of special to the second nested list and applied a different color to it. this then inherits down through its children. things like widths (as mentioned above), margins, padding, and borders do not inherit. if a border were to be inherited by the children of our list, every single list and list item would gain a border — probably not an effect we would ever want! which properties are inherited by default and which aren't is largely down to common sense. controlling inheritance css provides four special universal property values for controlling inheritance. every css property accepts these values. inheri...
...And 4 more matches

How to build custom form controls - Learn web development
ee to experiment and see what you can come up with. .select { /* the computations are made assuming 1em == 16px which is the default value in most browsers. if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* this (10px) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for browsers that do not support linear gradients. */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 5...
...re using the :after pseudo-element. it could also be implemented using a simple background image on the select class. ...
...simple background image on the select class. ...
...And 4 more matches

Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
next, we created the <tbody> element, which is a child of the <table> element. next, we used a loop to create the <tr> elements, which are children of the <tbody> element. for each <tr> element, we used a loop to create the <...
... next, we created the <tbody> element, which is a child of the <table> element. next, we used a loop to create the <tr> elements, which are children of the <tbody> element. for each <tr> element, we used a loop to create the <td> elements, which are children of <tr> elements.
...sing tbl.appendchild(tblbody); next, we attach the <table> element to its parent <body> element using body.appendchild(tbl); remember this technique. you will use it frequently in programming for the w3c dom. first, you create elements from the top down; then you attach the children to the parents from the bottom up. here's the html markup generated by the javascript code: ... <table border="2"> <tbody> <tr><td>cell is row 0 column 0</td><td>cell is row 0 column 1</td></tr> <tr><td>cell is row 1 column 0</td><td>cell is row 1 column 1</td></tr> </tbody> </table> ... here's the dom object tree generated by the code for the <table> element and its child elements: you can build this table and its internal child elements by using just a few dom methods. remember to keep in mind the...
...And 4 more matches

Element.clientTop - Web APIs
note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). ...
... note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). ...
... note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). ...
...And 4 more matches

CSS Properties Reference - CSS: Cascading Style Sheets
s. the reference articles also include examples on how to use all the properties. ...
...erence articles also include examples on how to use all the properties. ...
...also include examples on how to use all the properties. ...
...And 4 more matches

background-origin - CSS: Cascading Style Sheets
the background-origin css property sets the background's origin: from the border start, inside the border, or inside the padding. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that background-origin is ignored when background-attachment is fixed. ...
...art, inside the border, or inside the padding. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that background-origin is ignored when background-attachment is fixed. syntax /* keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* global values */ background-origin: inherit; background-origin: initial; background-origin: unset; the background-origin property is specified as one of the keyword values listed below. values border-box the background is positioned relative to the border box. padding-box the background is positioned relative to the...
... positioned relative to the border box. padding-box the background is positioned relative to the padding box. content-box the background is positioned relative to the content box. formal definition initial valuepadding-boxapplies toall elements. ...
...And 4 more matches

clear - CSS: Cascading Style Sheets
oved below (cleared) floating elements that precede it. the clear property applies to floating and non-floating elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. the non-floated block's top margin collapses. vertical margins between two floated elements on the other hand will not collapse. when applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. this affects the position of later floats, since later flo...
...ght | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. ...
...ear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. s...
...And 4 more matches

position - CSS: Cascading Style Sheets
the w3c definition), which is the containing block of the document's root element. html <h1>absolute positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">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.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elements <span>wrap onto a new line if possible — like ...
...as one another, and adjacent text nodes, if there is space on the same line. ...
... inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other t...
...And 4 more matches

<table>: The Table element - HTML: Hypertext Markup Language
yed on the right side of the document. set margin-left and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute. bgcolor the background color of the table. it is a 6-digit hexadecimal rgb code, prefixed by a '#'. one of the predefined color kewords can also be used. to achieve a similar effect, use the css background-color property. border this integer attribute defines, in pixels, the size of the frame surrounding the table. if set to 0, the frame attribute is set to void. to achieve a similar effect, use the css border shorthand property. cellpadding this attribute defines the space between the content of a cell and its border, displayed or not. if the cellpadding's length is defined in pixels, this pixel-sized spa...
...d or not. if the cellpadding's length is defined in pixels, this pixel-sized space will be applied to all four sides of the cell's content. if the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the...
...s attribute defines the size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. to achieve a similar effect, apply the border-spacing property to the <table> element. border-spacing does not have any effect if border-collapse is set to collapse. frame this enumerated attribute defines which side of the frame surrounding the table must be displayed. to achieve a similar effect, use the border-style and border-width properties. rules this enumerated attribute defines where rules, i.e. lines, should appea...
...And 4 more matches

CSS3 - Archive of obsolete content
ules, not necessary all with the same level number. at each point of time, a snapshot of the css standard can be defined, listing css2.1 and the mature modules. the w3 consortium periodically publishes such snapshots, like in 2007, 2010, 2015, 2017, and 2018. though today no module with a level greater than 3 is standardized, this will change in the future. some modules, like selectors 4 or css borders and backgrounds level 4 already have an editor's draft, though they haven't yet reached the first published working draft status. css modules status completed modules a few css modules already became a standard as a w3c recommendation. these should be no more changes. css color module level 3 recommendation since june 7th, 2011 adds the opacity property, and the hsl...
...ecommendation, proposed recommendation or recommendation. these can be used without prefix and are pretty stable, though a few features can still be dropped at the candidate recommendation stage. these modules extend and amend the css2.1 specification which build the core of the specification. together with it, they are the current snapshot of the css specification. css backgrounds and borders module level 3 candidate recommendation adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones. support for multiple background images. the background-repeat space and round values, and for the 2-value syntax of this css property. the background-attachment local value. the css background-origin, background-size,...
... adds: support, on backgrounds, for any type of <image>, and not only for uri() defined ones. support for multiple background images. the background-repeat space and round values, and for the 2-value syntax of this css property. the background-attachment local value. the css background-origin, background-size, and background-clip properties. support for curved border corners, with the css border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties. support for the use of an <image> as the border with the css border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties. support for shadows of the element with ...
...And 3 more matches

Building accessible custom components in XUL - Archive of obsolete content
abel value="breakfast" flex="1"/> <label value="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
...ue="lunch" flex="1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
... value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
...And 3 more matches

Common Firefox theme issues and solutions - Archive of obsolete content
is disabled. to test this please go to bug 324777 using the default theme and activate the "click me" link. the url bar of the resulting popup window is disabled. address bar "door hangers" door hanger sync panel not styled the sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a website needs to be styled to match rest of panel including border. this issue also applies to the edit bookmark panel, which is activated by double clicking on the bookmark star in the url bar. for details, please see bug 708797. "about" pages about:addons disabled add-on icons are not grey scale in tools > add-ons, the icons of disabled icons need to be converted to grey scale. to accomplish this copy the file chrome://mozapps/skin/extensions/extensions.sv...
... in most themes this issue specifically affects the breadcrumbs toolbar of the style insp...
...rumbs-button[checked] > .inspector-breadcrumbs-id { .inspector-breadcrumbs-id, .inspector-breadcrumbs-classes { style inspector breadcrumb button backgrounds are not consistent between pre-ff14 and ff14+ the use of the styling rule fill in -moz-border-image is incompatible with versions of firefox older than firefox14, however, its use is needed for firefox 14 and later. ...
...And 3 more matches

background-size - Archive of obsolete content
assume it's the same as safari, since they just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in some european countries). user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported? i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit. some example code? user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on t...
... -moz-border-image should not inherit. some example code? ...
...more complex example (screenshot), and the same page without the -moz-border-image image rule (screenshot). user:robertc 2009-08-09 this is only an issue with <body> and <html>. <body>'s background extends per css spec to <html>. since you have a 8px default margin on <body> and your <body>'s content is smaller than the viewport's height, you see what you see. styles like this should work: body { border:0; margin:0; padding:0.6em } /* or for less content, if body is small */ html, body { height:100%; } body { border:0; margin:0; padding:0.6em } furthermore, you may simplify things a bit if you apply the background and border-image styles to <html> rather than <body>. user:jürgen jeka 2009-08-12 ok, probably my understanding of css inheritance isn't all it should be. i tried locating the part...
...And 3 more matches

Debugging CSS - Learn web development
xactly what the browser is rendering at any given time, so it gives you an insight into what is really going on. inspecting the applied css select an element on your page, either by right/ctrl-clicking on it and selecting inspect, or selecting it from the html tree on the left of the devtools display. try selecting the element with the class of box1; this is the first element on the page with a bordered box drawn around it. if you look at the rules view to the right of your html, you should be able to see the css properties and values applied to that element. you will see the rules directly applied to class box1 and also the css that is being inherited by the box from its ancestors, in this case to <body>. this is useful if you are seeing some css being applied that you didn't expect. perha...
...ement. also useful is the ability to expand out shorthand properties. in our example the margin shorthand is used. click on the little arrow to expand the view, showing the different longhand properties and their values. you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. uncheck a rule's checkbox, for example border-radius, and the css will stop applying. you can use this to do an a/b comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in ...
...using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values. perhaps you want to see if another color looks better, or wish to tweak the size of something? devtools can save you a lot of time editing a stylesheet and reloading the page. with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhaps you have realised that you don't want your box to inherit the <body> element's font size, and want to set its own specific size? you ...
...And 3 more matches

Beginner's guide to media queries - Learn web development
walkthrough takes you through this approach with a very simple layout. in a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same. walkthrough: a simple mobile-first layout our starting point is an html document with some css applied to add background colors to the various parts of the layout. ...
...ment with some css applied to add background colors to the various parts of the layout. ...
...this is an important first step and one which ensures that if the content were to be read out by a screen read...
...And 3 more matches

Supporting older browsers - Learn web development
rid layout will see the row of boxes as a floated layout. a floated item that becomes a grid item loses the float behaviour, which means that by turning the wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...iner, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <div class="wrapper"> <div class="item">item one</div> <div class="item">item two</div> <div class="item">item three</div> </div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout. fallba...
...ted items to make the columns more like the grid display, stretching to fill the container. in the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. in grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the size we want once the grid layout is introduced. ...
...And 3 more matches

The Firefox codebase: CSS Guidelines
ottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or relate...
...he css variable(s) and then think of how the css variable could improve that css. ...
...alization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right. example: use margin-inline-start: 3px; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :-moz-locale-dir(ltr|rtl) (for xul files) or :dir(ltr|rtl) (for html files). remember that while a tab content's scrollbar still shows on the right in rtl, an overflow scrollbar will show on the left. write padding: 0 3px 4px; instead of padding: 0 3p...
...And 3 more matches

Mozilla Quirks Mode Behavior
n layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 1049). add padding if the very first node in an li is another ul or ol (bug 98636). obsolete since gecko 50 list bullets do not inherit the font size of the list (bug 97351). removed in firefox 50 (bug 648331). don't inherit font properties into tables except for font-family. make table borders gray rather than using the foreground color. collapse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts like an inline, not a block. give floated ...
...ins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts like an inline, not a block. give floated img a 3px margin (bug 58899). residual style tags' size info does not take precedence over heading tags' size (bug 77352). use box-sizing:border-box for most input types and textarea. give form a margin-bottom:1em (bug 41806). in quirks mode css class and id names are case insensitive. in standards mode they are case sensitive. (this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other...
...e (see bug 43086). to correspond, their width is computed as though only the remaining available space is the containing block width (bug 99461). in quirks mode colspan="0" and rowspan="0" are intentionally not handled as described in html4 (bug 9879). hspace and vspace are supported on table only in quirks mode (bug 41893). proposed to remove: bug 725646. ...
...And 3 more matches

DataTransfer.clearData() - Web APIs
ble="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...
...it to the drop zone and then release the selection to move the element. ...
... event.datatransfer.cleardata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = e...
...And 3 more matches

Element.scrollHeight - Web APIs
-only property is a measurement of the height of an element's content, including content not visible on the screen due to overflow. the scrollheight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. the height is measured in the same way as clientheight: it includes the element's padding, but not its border, margin or horizontal scrollbar (if present). it can also include the height of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for vertical scrollbar, its scrollheight is equal to clientheight this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax elemscrollheight = element.sc...
...agna 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. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom problems and solutions determine if an element has been totally scrolled the following equivalence returns true if an element is at the end of its scroll, false if it isn't. element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.getcomp...
...toque penatibus et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
...And 3 more matches

HTMLElement.offsetLeft - Web APIs
the htmlelement.offsetleft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the htmlelement.offsetparent node. for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element relative to the offsetparent. however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and off...
...ped text. syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels from the closest relatively positioned parent element. ...
...m the closest relatively positioned parent element. example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span. <div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span. ...
...And 3 more matches

Pinch zoom gestures - Web APIs
toward each other, changes the target element's background color to lightblue. the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the target element's background color to pink. define touch target the application uses <div> to define the pointers' target areas. <style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases. this application uses two global variables to cache the event state. // global vars to cache event state var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: poi...
...s increasing (signifying a pinch out or zoom in), the element's background color is changed to pink, and if the distance between the pointers is decreasing (a pinch in or zoom out), the background color is changed to lightblue. in a more sophisticated application, pinch in or pinch out determination could be used to apply application-specific semantics. when this event is processed, the target's border is set to dashed to provide a clear visual indication the element has received a move event. function pointermove_handler(ev) { // this function implements a 2-pointer horizontal pinch/zoom gesture. // // if the distance between the two pointers has increased (zoom in), // the target element's background is changed to "pink" and if the // distance is decreasing (zoom out), the color is chan...
...as received a move event. function pointermove_handler(ev) { // this function implements a 2-pointer horizontal pinch/zoom gesture. // // if the distance between the two pointers has increased (zoom in), // the target element's background is changed to "pink" and if the // distance is decreasing (zoom out), the color is changed to "lightblue". ...
...And 3 more matches

Resize Observer API - Web APIs
s to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser window size is not changed. the resize observer api provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond to changes in the size of an element’s content or border box in a performant way. it provides a javascript solution to the often-discussed lack of element queries in the web platform. usage is simple, and pretty much the same as other observers, such as performance observer or intersection observer — you create a new resizeobserver object using the resizeobserver() constructor, then use resizeobserver.observe() to make it look for changes to a speci...
...sions and allowing you to do anything you like in response to those changes. interfaces resizeobserver provides the ability to register new observers and to start and stop observing elements. resizeobserverentry describes a single element which has been resized, identifying the element and its new size. ...
...as been resized, identifying the element and its new size. examples you find a couple of simple examples on our github repo: resize-observer-border-radius.html (see source): a simple example with a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners, whereas the above solution gives you nice square corners that scale with the box size. resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width. this shows that you can r...
...And 3 more matches

WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
...ernalformat, format, type, htmlimageelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlcanvaselement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlvideoelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, imagebitmap? ...
...ormat, type, htmlcanvaselement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlvideoelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, imagebitmap? ...
...And 3 more matches

box-decoration-break - CSS: Cascading Style Sheets
agments should be rendered when broken across multiple lines, columns, or pages. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the specified value will impact the appearance of the following properties: background border border-image box-shadow clip-path margin padding syntax /* keyword values */ box-decoration-break: slice; box-decoration-break: clone; /* global values */ box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset; the box-decoration-break property is specified as one of the keyword values listed below. values slice the element is initially rendered ...
...he rendering for this hypothetical box is sliced into pieces for each line/column/page. note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. see the css specification for details. clone each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. the border-radius, border-image, and box-shadow are applied to each fragment independently. the background is also drawn independently for each fragment, which means that a background image with background-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas s...
...<span class="example">the<br>quick<br>orange fox</span> ... results in: adding box-decoration-break: clone to the above styles: -webkit-box-decoration-break: clone; box-decoration-break: clone; ... results in: you can try the two inline examples above in your browser. here's an e...
...And 3 more matches

Forms related code snippets - Archive of obsolete content
ventlistener("load", buildcalendars, false) : window.attachevent ? attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...endars, false) : window.attachevent ? attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...deventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...And 2 more matches

In-Depth - Archive of obsolete content
eheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizontal, scrollbartrack-vertical, scrollbarthumb-vertical, scrollbarthumb-horizontal, scrollbarbutton-right, scrollbarbutton-down, scrollbarbutton-left, scrollbarbutton-up, scrollbargripper-vertical, scrollbargripper-horizontal -moz-border-bottom-colors defines a series of colours. each colour is one pixel in the border. if you want the border to be 3 pixels wide you define each colour separated by a space. example: -moz-border-top-colors: threeddarkshadow threedshadow transparent; -moz-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-l...
...e pixel in the border. if you want the border to be 3 pixels wide you define each colour separated by a space. example: -moz-border-top-colors: threeddarkshadow threedshadow transparent; -moz-border-right-colors: threeddarkshadow threedshadow transparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-left-colors: threeddarkshadow threedshadow transparent; -moz-border-top-colors see -moz-border-bottom-colors above. -moz-border-left-colors see -moz-border-bottom-colors above. -moz-border-right-colors see -moz-border-bottom-colors above. -moz-border-radius rounds the corners of a box. if you specify one px/% value, it will apply it to all the corners, or you can specify 4 values (separated by a space) and have each corner different. ...
...ransparent; -moz-border-top-colors see -moz-border-bottom-colors above. -moz-border-left-colors see -moz-border-bottom-colors above. -moz-border-right-colors see -moz-border-bottom-colors above. -moz-border-radius rounds the corners of a box. if you specify one px/% value, it will apply it to all the corners, or you can specify 4 values (separated by a space) and have each corner different. -moz-border-radius-topleft the same as -moz-border-radius but only applies to the top left corner. an example of where this would be used is on tabs. -moz-border-radius-topright the same as -moz-border-radius but only applies to the top right corner. an example of where this would be used is on tabs. -moz-border-radius-bottomleft the same as -moz-border-radius but only applies to the bottom left corner. an e...
...And 2 more matches

jspage - Archive of obsolete content
ml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling;(n)?l.parentnode.insertbefore(m,n):l.parentnode.appendchild(m);},bottom:function(m,l){l.appendchild(m); },top...
...e in element.shortstyles[f]){a.push(this.getstyle(e));}return a.join(" ");}a=this.getcomputedstyle(g);}if(a){a=string(a);var c=a.match(/rgba?\([\d\s,]+\)/); if(c){a=a.replace(c[0],c[0].rgbtohex());}}if(browser.engine.presto||(browser.engine.trident&&!$chk(parseint(a,10)))){if(g.test(/^(height|width)$/)){var b=(g=="width")?["left","right"]:["top","bottom"],d=0; b.each(function(h){d+=this.getstyle("border-"+h+"-width").toint()+this.getstyle("padding-"+h).toint();},this);return this["offset"+g.capitalize()]-d+"px"; }if((browser.engine.presto)&&string(a).test("px")){return a;}if(g.test(/(border(.+)width|margin|padding)/)){return"0px";}}return a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=th...
...tyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",fontsize:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={margin:{},padding:{},border:{},borderwidth:{},borderstyle:{},bordercolor:{}};["top","right","bottom","left"].each(function(g){var f=el...
...And 2 more matches

Table Layout Strategy - Archive of obsolete content
not shown correctly due to technical constraints on wiki content. you can help by editing this page and adding screenshots or links to example pages. width = "0*" assume that you would like to give all the space to the second column in a table. ...
...hoice is leave the first cell auto and specify 100%on the second one (this works cross-browser) <tbody></tbody>foobar <table width="200px" border> <tbody> <tr><td>foo</td><td width="100%">bar</td></tr> </tbody> </table> the conflict free solution, the column should have the minimum width. ...
...olution, the column should have the minimum width. so we specify it (this breaks in some other browsers) <col width="0*"><col><tbody></tbody>foobar <table border width="200px"> <col width="0*"><col> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> this shrink wrapping width has usually the suffix 0proportional effective columns <tbody></tbody>foobarbazzap <table width="200px" border> <tbody> <tr><td>foo</td><td colspan="2" width="120px">bar</td></tr> <tr><td>baz</td><td>zap</td></tr> </tbody> </table> the colspan here is bogus, so the third column should not get any width. one would expect the first column to be 80 px and the second to be 120 px . the advantage of this limiting to numeffcols is that we don't poke the cellmap for nonexisting cells. overspeficied perc...
...And 2 more matches

Example Sticky Notes - Archive of obsolete content
the others are only needed if you plan to handle xul (xml...
...='something' will lead to circular setter call and stack overflow. --> <getter><![cdata[ var st = this.innerhtml || ''; if (st != '') { var re = /<\/?[^>]+>/gi; return st.replace(re,''); } else { return ''; } ]]></getter> <setter><![cdata[ // "val" in setter contains the assignment value. // here we simply echoing it back: return val; ]]></setter> </property> <method name="setborder"> <!-- new method for the bound element. unlike virtual property it is called in function context: this.setborder(arg) you also may define any amount of named arguments using <parameter name="argumentname"/> --> <parameter name="arg"/> <body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers. mouse events sent to bindings ar...
...<body><![cdata[ this.style.border = arg; ]]></body> </method> </implementation> <handlers> <!-- event handlers. mouse events sent to bindings are refactored, so event.target / event.relatedtarget always points to the bound element, even if it was originated to/from a child. ...
...And 2 more matches

Skinning XUL Files by Hand - Archive of obsolete content
se styles. mozilla's current global skin defines this basic behavior for several classes of button. a button is styled by the global skin when its class attribute is set to a class which is defined in the global skin. for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button. button.plain { border: 0px !important; } the global skin, in which styles for these several button classes and dozens of other elements are defined, is described in the following section. if you want to use the classes already defined in mozilla's global skin to style your elements, you may do so. but you may also want to define new classes of buttons particular to your xul file, in which case the style information ...
...ic/global directory of the mozilla application. in a cascading stylesheet, the style definitions have the following basic form: element { style-attribute1: value; style-attribute2: value; style-attribute3: value; } for example, the following definition -- were it not in serious conflict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. the following table shows the basic format for these two common types of style definitions: class id eleme...
... font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
...And 2 more matches

Grid - MDN Web Docs Glossary: Definitions of Web-related terms
ra tracks will be created in the implicit grid. the implicit grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...the implicit grid. the implicit grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
... grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...And 2 more matches

Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
med grid areas. grid areas must be rectangular in nature; it is not possible to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
... must be rectangular in nature; it is not possible to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
... it is not possible to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...And 2 more matches

Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
container will be placed one into each individual grid cell by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
... into each individual grid cell by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
... by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
...And 2 more matches

Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
lex unit, fr which indicates a portion of the available space in the grid container. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...a portion of the available space in the grid container. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...e in the grid container. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...And 2 more matches

Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...
... gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...
... gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20px-gaps between row tracks. ...
...And 2 more matches

Handling different text directions - Learn web development
these physical dimensions map very neatly to content that is viewed horizontally, and by default the web tends to support left-to-right languages (e.g. english or french) better than right-to-left languages (such as arabic). ...
...ke width and height — with logical, or flow relative versions. the property mapped to width when in a horizontal writing mode is called inline-size — it refers to the size in the inline dimension. the property for height is named block-size and is the size in the block dimension. you can see how this works in the example below where we have replaced width with inline-size. logical margin, border, and padding properties in the last two lessons we have learned about the css box model, and css borders. in the margin, border, and padding properties you will find many instances of physical properties, for example margin-top, padding-left, and border-bottom. in the same way that we have mappings for width and height there are mappings for these properties. the margin-top property is mapped t...
...t we have mappings for width and height there are mappings for these properties. the margin-top property is mapped to margin-block-start — this will always refer to the margin at the start of the block dimension. the padding-left property maps to padding-inline-start, the padding that is applied to the start of the inline direction. this will be where sentences start in that writing mode. the border-bottom property maps to border-block-end, which is the border at the end of the block dimension. you can see a comparison between physical and logical properties below. if you change the writing mode of the boxes by switching the writing-mode property on .box to vertical-rl, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch wit...
...And 2 more matches

Images, media, and form elements - Learn web development
pe="text">, specific types such as <input type="email">, and the <textarea> element are quite easy to style and tend to behave just like other boxes on your page. the default styling of these elements will differ however based on the operating system and browser that your user visits the site with. in the example below we have styled some text inputs using css — you can see that things such as borders, margins and padding all apply as you would expect. we are using attribute selectors to target the different input types. try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding. important: you should take care when changing the styling of form elements to make sure it is still obvious to the user they are form element...
...ould expect. we are using attribute selectors to target the different input types. try changing how this form looks by adjusting the borders, adding background colors to the fields, and changing fonts and padding. important: you should take care when changing the styling of form elements to make sure it is still obvious to the user they are form elements. you could create a form input with no borders and background that is almost indistinguishable from the content around it, but this would make it very hard to recognise and fill in. as explained in the lessons on form styling in the html part of this course, many of the more complex input types are rendered by the operating system and are inaccessible to styling. you should therefore always assume that forms are going to look quite differe...
...t widgets. you learned about the box-sizing property in our box model lesson and you can use this knowledge when styling forms to ensure a consistent experience when setting widths and heights on form elements. ...
...And 2 more matches

HTML forms in legacy browsers - Learn web development
ac...
...bmit, reset or image the <button> element <input> the <input> element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only? ...
... element can make things a little difficult if you want to apply some css by using the element selector: <input type="button" value="click me"> if we remove the border on all inputs, can we restore the default appearance on input buttons only? ...
...And 2 more matches

From object to iframe — other embedding technologies - Learn web development
updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; let solution...
... as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. let's explore the code in a bit more detail. ...
... src this attribute, as with <video>/<img>, contains a path pointing to the url of the document to be embedded. width and height t...
...And 2 more matches

Index - Learn web development
css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. 104 a cool-looking box assessment, beginner, css, learn, backgrounds, borders, box, box model, effects in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. 105 advanced styling effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, bo...
...te an eye-catching box. 105 advanced styling effects article, beginner, blend modes, boxes, css, codingscripting, filters, styling, box shadows, effects, shapes we hope this article was fun — playing with shiny toys generally is, and it is always interesting to see what kinds of advanced styling tools are becoming available in modern browsers. 106 backgrounds and borders background, beginner, css, image, learn, position, borders, color we have covered quite a lot here, and you can see that there is quite a lot to adding a background or a border to a box. do explore the different property pages if you want to find out more about any of the features we have discussed. each page on mdn has more examples of usage for you to play with and enhance your knowl...
...heritance, learn, rules, source order, specificity the aim of this lesson is to develop your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to html and how conflicts are resolved. 116 creating fancy letterheaded paper assessment, background, beginner, boxes, css, codingscripting, border, box, letter, letterhead, letterheaded, paper if you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. in this assessment we'll challenge you to create an online template to achieve such a look. 117 debugging css beginner, css, dom, debugging, devtools, learn, source sometimes when writing css you will encounter a...
...And 2 more matches

Background Tasks API - Web APIs
th a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
...ns that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
...e user will use to start the data processing. ...
...And 2 more matches

Element: mouseenter event - Web APIs
ents. combined with the corresponding mouseleave (which is fired at the element when the mouse exits its content area), the mouseenter event acts in a very similar way to the css :hover pseudo-class. examples the mouseover documentation has an example illustrating the difference between mouseover and mouseenter. ...
...ter the following trivial example uses the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible. ...
...ample uses the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible. ...
...And 2 more matches

Element: mouseleave event - Web APIs
the most outer div represented here. one single mouseout event is sent to the deepest element of the dom tree, then it bubbles up the hierarchy until it is canceled by a handler or reaches the root. examples the mouseout documentation has an example illustrating the difference between mouseout and mouseleave. ...
... the following trivial example uses the mouseenter event to change the border on the <div> when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...e uses the mouseenter event to change the border on the <div> when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...And 2 more matches

HTMLTableElement.frame - Web APIs
the htmltableelement interface's frame property is a string that indicates which of the table's exterior borders should be drawn. syntax htmltableelement.frame = framesides; var framesides = htmltableelement.frame; parameters framesides is a string whose value is one of the following values: void no sides. this is the default. ...
.... syntax htmltableelement.frame = framesides; var framesides = htmltableelement.frame; parameters framesides is a string whose value is one of the following values: void no sides. ...
...tmltableelement.frame; parameters framesides is a string whose value is one of the following values: void no sides. this is the default. ...
...And 2 more matches

Intersection Observer API - Web APIs
bottomleft"></div> <div class="label bottomright"></div> </div> </template> <main> <div class="contents"> <div class="wrapper"> </div> </div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: 600px; } .samplebox { position: relative; left: 175px; width: 150px; background-color: rgb(245, 170, 140); border: 2px solid rgb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; padding:...
...for this example is very short, with a primary element which is the box that we'll be targeting (with the creative id "box") and some contents within the box. ...
...> welcome to <strong>the box!</strong> </div> </div> css the css isn't terribly important for the purposes of this example; it lays out the element and establishes that the background-color and border attributes can participate in css transitions, which we'll use to affect the changes to the element as it becomes more or less obscured. ...
...And 2 more matches

Multi-touch interaction - Web APIs
ts and bug reports are welcome. example this example demonstrates using pointer events' various event types (pointerdown, pointermove, pointerup pointercancel, etc.) for different multi-touch interactions. define touch targets the application uses <div> to define three different touch target areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required. this application uses three arrays to cache event state, one cache per target element. // log events ...
...) and update the background color push_event(ev); if (logevents) log("pointerdown: name = " + ev.target.id, ev); update_background(ev); } pointer move the pointermove handler is called when the pointer moves. it may be called multiple times (for example, if the user moves the pointer) before a different event type is fired. ...
...when this occurs, the event is removed from the associated event cache. ...
...And 2 more matches

WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed format. compressed image formats must be enabled by webgl extensions before using these methods. ...
...essed format. compressed image formats must be enabled by webgl extensions before using these methods. ...
...l 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview? ...
...And 2 more matches

-moz-outline-radius - CSS: Cascading Style Sheets
if a single value is set, it applies to all 4 corners. 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. if th...
... if a single value is set, it applies to all 4 corners. ...
...rth one to the bottom-left corner. ...
...And 2 more matches

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
w this works with a very simple example. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...le example. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...And 2 more matches

Consistent list indentation - CSS: Cascading Style Sheets
derstand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction. making a list first, we consider a single, pure list item. this list item has no marker (otherwise known as a "bullet") and is not yet part of a list itself. it hangs alone in the void, simple and unadorned, as shown in figure 1. that dotted red border represents outer edges of the content-area of the list item. remember that, at this point, the list item has no padding or borders. if we add two more list items, we get a result like that shown in figure 2. now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <ul>). according to the css box model, the list items' boxes must be displayed within the p...
...wo more list items, we get a result like that shown in figure 2. now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <ul>). according to the css box model, the list items' boxes must be displayed within the parent element's content area. since that parent has no padding or margins yet, we get the situation shown in figure 3. here, the dotted blue border shows us the edges of the <ul> element's content area. since we have no padding for the <ul> element, its content wraps snugly around the three list items. now we add the list item markers. since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in figure 4. visually, the markers are outside the content area of the <ul>, but that's not the important part here.
...content area of the <ul>, but that's not the important part here. what's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. they're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>. this is why, in every browser except internet explorer for windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. if it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>. indenting it twice so how will all this appear in a document? at the moment, we have a situation analogous to these styles: ul, li {margin-left: 0; padding-left...
...And 2 more matches

Stacking with floated blocks - CSS: Cascading Style Sheets
for floated blocks, the stacking order is a bit different. floating blocks are placed between non-positioned blocks and positioned blocks: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected. this happens according to standard float behaviour. ...
...blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected. this happens according to standard float behaviour. ...
...this is due to a peculiar part of the specification: applying a opacity value creates a new stacking context (see what no one told you about z-index). ...
...And 2 more matches

box-shadow - CSS: Cascading Style Sheets
y offsets relative to the element, blur and spread radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the box-shadow property enables you to cast a drop shadow from the frame of almost any element. if a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. syntax /* keyword values */ box-shadow: none; /* offset-x | offset-y | color */ box-shadow: ...
...ptionally, a <color> value. to specify multiple shadows, provide a comma-separated list of shadows. values inset if not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). the presence of the inset keyword changes the shadow to one inside the frame (as if the content was depressed inside the box). inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y> these are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. negative values place the shadow above the element. see <length> for possible units. if both values a...
... html <blockquote><q>you may shoot me with your words,<br/> you may cut me with your eyes,<br/> you may kill me with your hatefulness,<br/> but still, like air, i'll rise.</q> <p>&mdash; maya angelou</p> </blockquote> css blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 ...
...And 2 more matches

contain - CSS: Cascading Style Sheets
ed everywhere. paint indicates that descendants of the element don't display outside its bounds. if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. and if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <ar...
... [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3px solid black; } article { border: 1px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice...
...re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anythi...
...And 2 more matches

transform-origin - CSS: Cascading Style Sheets
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1">&nbsp;</div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rot...
... <div class="box2">&nbsp;</div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0; <div class="box3">&nbsp;</div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4">&nbsp;</div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; ...
...5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5">&nbsp;</div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6">&nbsp;</div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -w...
...And 2 more matches

Challenge solutions - Developer guides
our stylesheet to identify the headings with capital letters in parentheses. ...
...ntheses. solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. ...
...ent the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. solution the following rule achieves this effect: ul { border: 10px solid lightblue; width: 100px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the ...
...And 2 more matches

<tbody>: The Table Body element - HTML: Hypertext Markup Language
> <tbody> <tr> <td>3741255</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>3971244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next. table { border: 2px solid #555; border-collapse: collapse; font: 16px "lucida grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. font...
...da grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. font is used to establish an initial font for the table. th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; } then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells. the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce...
...ding: 2px 8px 0; text-align: left; } then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells. the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce; font-size: 18px; border-bottom: 2px solid #999; } finally, header cells contained within the <thead> block are given additional styling. they use a darker background-color, a larger font size, and a thicker, darker bottom border than the other cell borders. result the resulting table looks like this: multiple bodies you can create multiple sections within a table by using multiple <tbody> elements. each may poten...
...And 2 more matches

Block and Line Layout Cheat Sheet - Archive of obsolete content
ame_has_dirty_children ns_frame_has_view ns_frame_independent_selection ns_frame_is_special nsblockframe mflags these flags are the private flags that are meaningful to block frames. ns_block_shrink_wrap causes the block to "shrink-wrap" around its content. this means the block will determine its children's width and make its content area that wide. finally, it will add padding and border to determine the final width. is this where the "tending towards zero width" stuff comes in? ns_block_no_auto_margins ns_block_margin_root indicates that this is a frame from which child margins can be calculated. the absence of this flag implies that child margin calculations should ignore the frame and look further up the parent chain. used in nsblockreflowcontext::computecollapsedtopmargin...
...ock frame has one nslinebox for each line, and one nslinebox for each block child. these are stored as a doubly-linked list in the mlines member of nsblockframe. ...
...f the content area, padding, border, or margin. nshtmlreflowstate the current state of reflow, built up as reflow recursively descends the frame tree. this is "passed in" to a child frame from its parent, and provides the constraints in which the child frame must size itself; e.g. the width and height available to the child frame. mcomputedwidth mcomputedheight mcomputedmargin mcomputedborderpadding mcomputedpadding mcomputedoffsets mcomputedminwidth mcomputedmaxwidth mcomputedminheight mcomputedmaxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box. nshtmlreflowmetrics the structure that is "filled in" by a frame during reflow, and is used to communicate the frame's desired size in...
...e nsblockreflowstate constructor when the "white-space" style of the block frame is pre or nowrap. it is cleared, otherwise. brs_istopmarginroot this flag is set in the nsblockreflowstate constructor when reflowing a "block margin root" frame (i.e., a frame with the ns_block_margin_root flag set, for which margins apply by default). the flag is also set when reflowing a frame whose computed top border padding is zero. (why?) brs_isbottommarginroot this flag is set in the nsblockreflowstate constructor when reflowing a "block margin root" frame (i.e., a frame with the ns_block_margin_root flag set, for which margins apply by default). the flag is also set when reflowing a frame whose computed bottom border padding is zero. (why?) brs_applytopmargin this flag is set if the top margin should ...

Table Cellmap - Archive of obsolete content
further it contains info whether this entry is a row- or colspan. ...
...further it contains info whether this entry is a row- or colspan. ...
...ave a direct link to the corresponding tablecellframes. tables with footers, headers etc. take the same table and adder a header <table> <thead> <tr><td>head cell 1</td><td>head cell 2</td></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </tbody> </table> now we have two different rowgroups and and the rowspans can not cross the borders between the different rowgroups. (ref xhtml-2.0). further the table header and footer will be repeated on every page when printed out. due to this behind the cellmap for the table we will find a cellmap for every rowgroup. in this low level cellmap the row count begins every time with 0. a typical code segment to come from the table level down to the rowgroup level nscellmap* map = mfirstmap; w...
...at spans the queried place in the cellmap. this can produce enormous costs once the cellmap contains large holes that are not caused by zero spans, this is at least a o2(n) algorithm. the following routines seem to be hot spots performance wise: nscellmap::colhasspanningcells nscellmap::rowhasspanningcells nscellmap::rowisspannedinto users of nscellmap::getdataat outside nscellmap.cpp the border collapse code relies on the cellmap. the collapsing of rows and columns uses the cellmap. and finally the line iterator methods which are used for arrow navigation through a table. original document information author(s): bernd mielke last updated date: september 27, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content av...

Index - Archive of obsolete content
element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. 1123 groupbox xul elements, xul reference the groupbox is used to group related elements together. if a caption element is placed inside the groupbox, it will be used as a caption which appears along the top of the groupbox. typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be platform specific. on linux, for instance, only the caption appears with no border around the group. 1124 hbox xul elements, xul reference a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizonta...
.... to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. 1142 menupopup xul elements, xul reference a container used to display the contents of a popup menu. when a menupopup is open, it floats above the window and may extend outside the window border. there are several ways in which a menupopup may be used: 1143 menuseparator xul elements, xul reference used to create a separator between menu items. typically drawn as a thin line. 1144 notification xul elements, xul reference the notification is used to display an informative message. it will normally be used as part of a notificationbox. the box incl...
...page xul elements, xul reference similar to a window, except it should be used for xul files that are to be loaded into an iframe. 1148 panel xul elements, xul reference a panel is a used as a temporary floating popup window that may contain any type of content. it does not have any window decorations. when open, it floats above the window and may extend outside the border of the main window. typically, it will be attached to a button using the button's type attribute so that when the button is pressed, the panel will be displayed. a panel may also be opened via a script using the openpopup method. 1149 param xul elements, xul reference for sql templates, used to bind values to parameters specified within an sql statement. the value to bind sho...
... group are turned off. a label, specified with the label attribute may be added beside the radio button. 1162 radiogroup xul elements, xul reference a group of radio buttons. only one radio button inside the group can be selected at a time. the radio buttons may either direct children of the radiogroup or descendants. place the radiogroup inside a groupbox if you would like a border or caption for the group. the radiogroup defaults to vertical orientation. 1163 resizer xul elements, xul reference an element used for window resizing. if you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. the resizer will send a command event after the resize is complete. 1164 richlistbox xul elem...

Tree Widget Changes - Archive of obsolete content
nts you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. ...
...for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...
...treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...
...: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...

Box Objects - Archive of obsolete content
as they are stored in the dom. retrieving position and size the box object provides six read only properties, x, y, screenx, screeny, width and height, for determining the currently displayed position and size of an element. all values returned are in pixels. x, y the x and y coordinates are referenced from the top left corner of the document in the window (that portion which excludes the window border and title bar) and refer to the top left corner of the element, including css padding. css margins and borders* are excluded. the top left corner of the document is that which is obtained from screen.mozinnerscreenx, screen.mozinnerscreeny screenx, screeny the screenx and screeny coordinates are referenced from the absolute top left corner of the screen (screen.top,screen.left) and refer to the...
...ment, including css padding. css margins and borders* are excluded. the top left corner of the document is that which is obtained from screen.mozinnerscreenx, screen.mozinnerscreeny screenx, screeny the screenx and screeny coordinates are referenced from the absolute top left corner of the screen (screen.top,screen.left) and refer to the top left corner of the element, including css padding and borders. css margins are excluded. width, height the width and height properties are also measured in pixels and return the width and height of the element, including css padding and borders. css margins are excluded. ...
...the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. ...
...the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. ...

Styling a Tree - Archive of obsolete content
style added to the tree element will apply to the entire tree. adding a style to the treecol element does not cause the style to be applied to the column but only to the header. the body of the tree must be styled in a somewhat different way than other elements. this is because the tree body is stored in a different way to other elements. the outer treechildren is the only real element in the tree body. the inner elements are just placeholders. ...
...ements. the style sets style rules for particular parts of what it displays. this style rule means, inside a treechildren element, set the background color to blue for all tree rows that have the 'makeitblue' property. the text '::-moz-tree-row' specifies what content area is desired, which in this case is a row. you can also use the following values: ::-moz-tree-cell: a cell. use this to set borders and background colors. ::-moz-tree-cell-text: the text in a cell. use this to set the font and text color. ::-moz-tree-twisty: the appearance of the twisty used to expand and collapse child rows. ::-moz-tree-image: the image for a cell. you can set the image with the list-style-image property. ::-moz-tree-row: a row. use this to set the background color of a row. ::-moz-tree-indentation: th...
...e type attribute on the column to progressmeter. ::-moz-tree-drop-feedback: the drag and drop feedback. ::-moz-tree-checkbox: the image to use for checkbox columns. you can check for multiple properties by separating them with commas. the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. ...
...roperties by separating them with commas. the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. for properties that are 'readonly', it adds a red border around the row. note that the first rule will apply to any row that is 'readonly' regardless of whether other properties such as 'unread' are set. treechildren::-moz-tree-row(readonly) { border: 1px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as neede...

Writing Skinnable XUL and CSS - Archive of obsolete content
widgets (e.g., the sidebar). your css file should never import another skin file if your file is loaded by a xul overlay. css files that are used by xul overlays should never import the global skin (or any other skin for that matter). they are already derived skins and therefore should not inherit from global. they should instead rely on the context in which they will appear for color, font, and border information. for example, the sidebar should not import the global skin, since it could appear in messenger and in navigator (which could have two completely different color schemes). if it imported the global skin, then when it was overlayed into navigator, it would potentially clash (if the user's current chosen navigator skin were not inheriting from global). derived skin files should not con...
..., the sidebar should not import the global skin, since it could appear in messenger and in navigator (which could have two completely different color schemes). if it imported the global skin, then when it was overlayed into navigator, it would potentially clash (if the user's current chosen navigator skin were not inheriting from global). derived skin files should not contain any font, color, or border information. this information should only be found in base skin files. the skin file should instead inherit from a base skin file to obtain the appropriate font, color, and border information. by obeying this restriction, your package will be almost entirely skinnable by changing only the global defaults. this rule also applies when designing a css file for a ui component that will be overlayed i...
...elow are examples for each case. example 1: the navigator package has a personal toolbar with popup menu buttons. the colors for the toolbar and buttons should be drawn from global by placingclass attributes on the appropriate elements in the xul. there should be no rules in navigator.css that attempt to define colors, fonts, etc. for either the personal toolbar headers or for the menu buttons' borders. example 2: the messenger package has a css file that describes the appearance of the messenger button that appears on the taskbar used by all windows. the messenger css file should not attempt to describe the borders or the colors for this button. it should only describe the icon. because the button is used in the navigator window (through overlays), the fonts/colors used should not be descr...
... colors for this button. it should only describe the icon. because the button is used in the navigator window (through overlays), the fonts/colors used should not be described by messenger. this allows the button to blend in as much as possible regardless of where it is used. the importance of this rule cannot be overstated. derived skin files should not contain any rules for colors, fonts, or borders. exceptions to this rule must be approved in order to be allowed into the product. note that in our current designed mozilla skin (aside from global) every single css file is a derived skin file, so this applies to all of you!!! derived skin files should not attempt to change the default look for a widget. for example, there should never be any css rules of the form tagname {...}; in a derive...

Making sure your theme works with RTL locales - Archive of obsolete content
b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images. instead, just use the opposite arrow when in rtl context. using start/end rules instead of left/right rules directions are mirrored in rtl mode, so left becomes right and right becomes left. ...
...ing start/end rules instead of left/right rules directions are mirrored in rtl mode, so left becomes right and right becomes left. as a result, you almost never want to use left/right rules for paddings, borders, and margins. ...
... instead of left/right rules directions are mirrored in rtl mode, so left becomes right and right becomes left. as a result, you almost never want to use left/right rules for paddings, borders, and margins. ...
...les directions are mirrored in rtl mode, so left becomes right and right becomes left. as a result, you almost never want to use left/right rules for paddings, borders, and margins. instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8px; -moz-margin-start: -4px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale. the forc...

Sizing items in CSS - Learn web development
image. an image has a width and a height defined in the image file it is embedding into the page. this size is described as the intrinsic size — which comes from the image itself. if you place an image on a page and do not change its height and width, either using attributes on the <img> tag or css, it will be displayed using that intrinsic size. ...
...he image itself. if you place an image on a page and do not change its height and width, either using attributes on the <img> tag or css, it will be displayed using that intrinsic size. we have given the image in the example below a border so that you can see the extent of the file. an empty <div> however, has no size of its own. if you add a <div> to your html with no content, then give it a border as we did with the image, you will see a line on the page. this is the collapsed border on the element — there is no content to hold it open. in our example below, that border stretches to the width of the container, because it is a block level element, a behavior that should be starting to become familiar to you. it has no height (or size in the block dimension) because there is no content. ...
...therefore the size of this <div> in the block dimension comes from the size of the content. again, this is the intrinsic size of the element — its size is defined by its content. setting a specific size we can of course give elements in our design a specific size. ...
..., sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. ...

Legacy layout methods - Learn web development
dual columns, the second row some different sized areas on the grid. in the <style> element, add the following code, which gives the wrapper container a width of 980 pixels, with padding on the right hand side of 20 pixels. this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body { width: 980px; margin: 0 auto; } .wrapper { padding-right: 20px; } now use the row container that is wrapped around each row of the grid to clear one row from another. add the following rule below your previous one: .row { clear: both; } applying this c...
...ed in our html. this centers the content with a maximum width of 960 pixels. you can see how the boxes now never become wider than 960 pixels. you can take a look in the skeleton.css file to see the css that is used when we apply this class. the <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. ...
...imum width of 960 pixels. you can see how the boxes now never become wider than 960 pixels. you can take a look in the skeleton.css file to see the css that is used when we apply this class. the <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. ...
...s class. the <div> is centered using auto left and right margins, and a padding of 20 pixels is applied left and right. skeleton also sets the box-sizing property to border-box like we did earlier, so the padding and borders of this element will be included in the total width. .container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } elements can only be part of the grid if they are inside a row, so as with our earlier example we need an additional <div> or other element with a class of row nested between the content <div> and our actual content container <div>s. we've done this already as well. now let's lay out the container boxes. skeleton is based on a 12 column grid. the top line boxes all need classes of one co...

Multiple-column layout - Learn web development
ap between columns using the column-gap. adding a rule between columns with column-rule. using your example above, change the size of the gap by adding a column-gap property: .container { column-width: 200px; column-gap: 20px; } you can play around with different values — the property accepts any length unit. now add a rule between the columns, with column-rule. in a similar way to the border property that you encountered in previous lessons, column-rule is a shorthand for column-rule-color, column-rule-style, and column-rule-width, and accepts the same values as border. .container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); } try adding rules of different styles and colors. styling the columns body { width: 90%; max-width: 900px; ...
...s felis orci, pulvinar id metus ut, rutrum luctus orci. cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. sed auctor cursus massa at porta. integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p> </div> </div> .container { column-width: 250px; column-gap: 20px; } .card { background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; } to control this behavior we can use properties from the css fragmentation specification. this specification gives us properties to control breaking of content in multicol and in paged media. for example, add the property break-inside with a value of avoid to the rules for .card. this is the container of the heading and text...
...r example, add the property break-inside with a value of avoid to the rules for .card. this is the container of the heading and text, and therefore we do not want to fragment this box. at the present time it is also worth adding the older property page-break-inside: avoid for best browser support. .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 0 0 1em 0; } reload the page and your boxes should stay in one piece. multicol fragmentation body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <div class="card"> <h2>i am the heading</h2> <p> lorem ipsum dolor sit amet, con...
...ci. cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. sed auctor cursus massa at porta. integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.</p> </div> </div> .container { column-width: 250px; column-gap: 20px; } .card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; } test your skills! you've reached the end of this article, but can you remember the most important information? you can find some further tests to verify that you've retained this information before you move on — see test your skills: multiple-column layout. summary you now know how to use the basic features of multiple...

Using your new knowledge - Learn web development
the tasks. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. working with css the following live example shows a biography, which has been styled using css. the css properties that i have used are as follows — each one links to its property page on mdn, which will give you more examples of its use. ...
... make the links green on hover. you should end up with something like this image. ...
... make the links green on hover. you should end up with something like this image. ...
... make the links green on hover. you should end up with something like this image. ...

CSS basics - Learn web development
selector, each ruleset must be wrapped in curly braces. ({}) within each declaration, you must use a colon (:) to separate the property from its value or values. within each ruleset, you must use a semicolon (;) to separate each declaration from the next one. to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500px; border: 1px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them. separate multiple selectors by commas. for example: p, li, h1 { color: red; } different types of selectors there are many different types of selectors. the examples above use element selectors, which select all elements of a given type. but we can make more speci...
...bout writing css: a lot of it is about boxes. this includes setting size, color, and position. most html elements on your page can be thought of as boxes sitting on top of other boxes. css layout is mostly based on the box model. each box taking up space on your page has properties like: padding, the space around the content. in the example below, it is the space around the paragraph text. border, the solid line that is just outside the padding. margin, the space around the outside of the border. in this section we also use: width (of an element). background-color, the color behind an element's content and padding. color, the color of an element's content (usually text). text-shadow sets a drop shadow on the text inside an element. display sets the display mode of an element. ...
... the bottom of style.css. experiment with changing values to see what happens. changing the page color html { background-color: #00539f; } this rule sets a background color for the entire page. change the color code to the color you chose in what will my website look like?. styling the body body { width: 600px; margin: 0 auto; background-color: #ff9500; padding: 0 20px 20px 20px; border: 5px solid black; } there are several declarations for the <body> element. let's go through these line-by-line: width: 600px; this forces the body to always be 600 pixels wide. margin: 0 auto; when you set two values on a property like margin or padding, the first value affects the element's top and bottom side (setting it to 0 in this case); the second value affects the left and right side.
.... (feel free to experiment.) padding: 0 20px 20px 20px; this sets four values for padding. the goal is to put some space around the content. in this example, there is no padding on the top of the body, and 20 pixels on the right, bottom and left. the values set top, right, bottom, left, in that order. as with margin, you can use one, two, three, or four values, as documented in padding syntax. border: 5px solid black; this sets values for the width, style and color of the border. in this case, it's a five-pixel–wide, solid black border, on all sides of the body. positioning and styling the main page title h1 { margin: 0; padding: 20px 0; color: #00539f; text-shadow: 3px 3px 1px black; } you may have noticed there's a horrible gap at the top of the body. that happens because brow...

Accessible Toolkit Checklist
n the alt key is pressed. this can be supported through spi_getkeyboardcues and spi_getmenuunderlines simple widgets buttons tab, arrow, unmodified letter mnemonics require and support text labels for buttons with images, can be same as tooltip space key activates button enter key activates focused button (thus current button, not default button shows dark border when a different button is focused) when button has a popup available by clicking on it, the enter key or space bar should also activate the popup toolbars and toolbar buttons are not focusable, but we should expose the tooltip. if possible, make the tooltip automatically append text for the keyboard shortcut associated with it. msaa support, including the haspopup state ...
...r buttons are not focusable, but we should expose the tooltip. if possible, make the tooltip automatically append text for the keyboard shortcut associated with it. ...
...define in xml enter key fires it, but not when another widget has focus that needs the enter key layout engine - drawing dark border dynamically when the currently focused widget does not need the enter key events - making keystrokes do the right thing msaa support (default state) links enter key activates link (thus default button no longer shows dark border when link is focused) msaa support, including linked and traversed states, and accessible value that holds destination url text fields - single and multiple line it's probably best to use native widgets for these, otherwise accessibility support will be quite difficult tab should always focus the next item, not insert a tab, unless there's a really good reason and...
... ...

Plug-in Basics - Plugins
ug-ins using the object element. though the object element has no hidden attribute, you can create css rules to override the sizing attributes of the object element object { visibility: visible; } object.hiddenobject { visibility: hidden !important; width: 0px !important; height: 0px !important; margin: 0px !important; padding: 0px !important; border-style: none !important; border-width: 0px !important; max-width: 0px !important; max-height: 0px !important; } in this case, the object element that picks up these special style definitions would have a class of hidden. using the class attribute and the css block above, you can simulate the behavior of the hidden plug-in in the embed element: <object data="audiplay.aiff" ...
...ed object whose mime type is registered by a plug-in. plug-ins are embedded in much the same way as gif or jpeg images are, except that a plug-in can be live and respond to user events, such as mouse clicks. the embed element has the following syntax and attributes: <embed src="location" type="mimetype" pluginspage="instrurl" pluginurl="pluginurl" align="left"|"right"|"top"|"bottom" border="borderwidth" frameborder="no" height="height" width="width" units="units" hidden="true|false" hspace="horizmargin" vspace="vertmargin" name="pluginname" palette="foreground"|"background" > ... </embed> you must include either the src attribute or the type attribute in an embed element. if you do not, then there is no way of determining the media type, and so no plug-in loa...
...or a visible plug-in, you must include width and height if you use type; no default value is used. the pluginurl attribute is the url of the plug-in or of the xpi in which the plug-in is stored (see installing plug-ins for more information on the xpi file format). the embed element has a number of attributes that determine the appearance and size of the plug-in instance, including these: the border and frameborder attributes specify the size of a border for the plug-in or draw a borderless plug-in. height, width, and units determine the size of the plug-in in the html page. if the plug-in is not hidden, the height and width attributes are required. hspace and vspace create a margin of the specified width, in pixels, around the plug-in. align specifies the alignment for the plug-in relati...
...se, you do not need the attributes that describe plug-in appearance. in fact, hidden overrides those attributes if they are present. use the name attribute, which specifies the name of the plug-in or plug-in instance, if the plug-in is communicating with javascript. for example, this embed element loads a picture with the imaginary data type dgs: <embed src="mypic.dgs" width="320" height="200" border="25" align="right"> gecko interprets the attributes as follows: src: load the data file and determine the mime type of the data. width and height: set the area of the page handled by the plug-in to 320 by 200 pixels. in general, use css to control the size and location of elements within an html page. border: draw a border 25 pixels wide around the plug-in. align: align the plug-in at the...

Managing screen orientation - Web APIs
ringilla nulla ultricies. in ac est dolor, quis tincidunt leo. cras commodo quam non tortor consectetur eget rutrum dolor ultricies. ut interdum tristique dapibus. ...
...is tincidunt leo. cras commodo quam non tortor consectetur eget rutrum dolor ultricies. ut interdum tristique dapibus. ...
...modo quam non tortor consectetur eget rutrum dolor ultricies. ut interdum tristique dapibus. ...
...fic styles based on the screen orientation /* first let's define some common styles */ html, body { width : 100%; height: 100%; } body { border: 1px solid black; -moz-box-sizing: border-box; box-sizing: border-box; } p { font : 1em sans-serif; margin : 0; padding: .5em; } ul { list-style: none; font : 1em monospace; margin : 0; padding: .5em; -moz-box-sizing: border-box; box-sizing: border-box; background: black; } li { display: inline-block; margin : 0; padding: 0.5em; background: white; } once we have some common styles we can start defining a special case for the orientation /* for portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, we want the tool b...

Using the CSS Typed Object Model - Web APIs
nk</a> </p> <dl id="regurgitation"></dl> // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--color']; // iterate through our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.c...
...the link has inherited font-weight: bold; from the paragraph's styles, listing it as font-weight: 700. custom properties, like our --color: red , are properties. as such, t...
... <button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles ...
... <button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssm...

Advanced animations - Web APIs
n of the velocity vectors. to do so, we add the following checks to the draw method: if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } first demo let's see how it looks in action so far. move your mouse into the canvas to start the animation. ...
...); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end. ...
...ion(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames. if you replace this method with a semi-transparent fillrect, you can easily create a trailing effect. ...
...ouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); adding mouse control to get some control over the ball, we can make it follow our mouse using the mousemove event, for example. the click event releases the ball and lets it bounce again. ...

Examples of web and XML development using the DOM - Web APIs
8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="output"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> ...
...derwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom. in this case, you are manipulating the individual styles directly. in the next e...
...the dom. note that the table itself has an onclick event handler that ought to display a message when the table is clicked. but the stopevent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this. <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click. ev.stoppropagation(); alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </scri...
...ed these greatly. put the following code into a blank text file and load it into a variety of browsers, you'll be surprised at the different number and names of properties. you might also like to add some elements in the page and call this function from different event handlers. ...

GlobalEventHandlers.ondragend - Web APIs
dragend event handler for element targetelement. example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler. ...
...nt. example this example shows two ways to use the ondragend attribute handler to set an element's dragend event handler. ...
...ribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ...
...rop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended. var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to...

GlobalEventHandlers.ondragenter - Web APIs
genter event handler for element targetelement. example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler. ...
...t. example this example demonstrates using the ondragenter attribute handler to set an element's dragenter event handler. ...
...ribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ...
...rop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended. var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to...

GlobalEventHandlers.ondragexit - Web APIs
dragexit event handler for element targetelement. example this example demonstrates using the ondragexit attribute handler to set an element's dragexit event handler. ...
...ent. example this example demonstrates using the ondragexit attribute handler to set an element's dragexit event handler. ...
...ribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's border to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ...
...rop"); ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragenter_handler(ev) { console.log("dragenter"); // change the source element's background color for enter events ev.currenttarget.style.background = "yellow"; } function dragleave_handler(ev) { console.log("dragleave"); // change the source element's border back to white ev.currenttarget.style.background = "white"; } function dragend_handler(ev) { console.log("dragend"); // change the target element's background color to visually indicate // the drag ended. var el=document.getelementbyid("target"); el.style.background = "pink"; } function dragexit_handler(ev) { console.log("dragexit"); // change the source element's border back to green to...

HTMLImageElement.x - Web APIs
the read-only htmlimageelement property x indicates the x-coordinate of the <img> element's left border edge relative to the root element's origin. the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group. in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. syntax let imagex = htmlimageelement.x; value an integer value indicating the distance in pixels from the left edge of the element's nearest root element and the left edge of the <img> element's border box. the nearest root element is the outermost <html> element that contains the image. if the image is in an <iframe>, i...
...so the value returned by x would be the distance from that point to the left edge of the content area. ...
...t row (once again, specifying 2 as the zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. ...
... 2 as the zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification. working dr...

HTMLImageElement.y - Web APIs
the read-only htmlimageelement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin. the x and y properties are only valid for an image if its display property has the computed value table-column or table-column-group. in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. syntax let imagey = htmlimageelement.y; value an integer value indicating the distance in pixels from the top edge of the element's nearest root element to the top edge of the <img> element's border box. the nearest root element is the outermost <html> element that contains the image. if the image is in an <iframe>, its y ...
...so the value returned by y would be the distance from that point to the top edge of the content area. ...
...t row (once again, specifying 2 as the zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. ...
... 2 as the zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification. working dr...

ResizeObserverEntry.contentBoxSize - Web APIs
d element's content box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. ...
... block and inline dimensions, read handling different text directions. examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. ...
...ed corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. ...
...u nice square corners that scale with the box size. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'target' in that specification. editor's draft initial definition. ...

ResizeObserverEntry.target - Web APIs
the target read-only property of the resizeobserverentry interface returns a reference to the element or svgelement that is being observed. syntax var element = resizeobserverentry.target; var svgelement = resizeobserverentry.target; value an element or svgelement representing the element being observed. examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. ...
...tage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry — entry.target.style.borderradius. ...
...tion gives you nice square corners that scale with the box size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry — entry.target.style.borderradius. ...
...of each entry — entry.target.style.borderradius. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.min(100, (entry.contentboxsize.inlinesize/10) + (entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status comment resize observerthe definition of 'target' in that specification. editor's draft initial definition. ...

Multi-touch interaction - Web APIs
uchstart, touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe. define touch targets the application uses <div> elements to represent four touch areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } #target4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired. // log events flag var logevents = false; // t...
...ls preventdefault() for the same reason mentioned above, and invokes the pinch/zoom handler. function move_handler(ev) { // note: if the user makes more than one "simultaneous" touches, most browsers // fire at least one touchmove event and some will fire several touchmoves. // consequently, an application might want to "ignore" some touchmoves. // // this function sets the target element's border to "dashed" to visually // indicate the target received a move event. // ev.preventdefault(); if (logevents) log("touchmove", ev, false); // to avoid too much color flashing many touchmove events are started, // don't update the background if two touch points are active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's bo...
...gevents) log("touchmove", ev, false); // to avoid too much color flashing many touchmove events are started, // don't update the background if two touch points are active if (!(ev.touches.length == 2 && ev.targettouches.length == 2)) update_background(ev); // set the target element's border to dashed to give a clear visual // indication the element received a move event. ...
...nt. ev.target.style.border = "dashed"; // check this event for 2-touch move/pinch/zoom gesture handle_pinch_zoom(ev); } touch end handler the touchend handler restores the event target's background color back to its original color. function end_handler(ev) { ev.preventdefault(); if (logevents) log(ev.type, ev, false); if (ev.targettouches.length == 0) { // restore background and border to original values ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; } } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and clear the log. <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <div...

-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomleft css property can be used to round the bottom-left corner of an element's outline. syntax the value of -moz-outline-radius-bottomleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. ...
...he corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-left corner of the element, specified as the percentages of the bottom and left sides of the border box. ...
...efining the curvature of the bottom and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-left corner of the element, specified as the percentages of the bottom and left sides of the border box. formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since 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. html <p>look at this paragraph's bottom-left corner.</p> css p ...
... ...

-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-bottomright css property can be used to round the bottom-right corner of an element's outline. syntax the value of -moz-outline-radius-bottomright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. ...
...corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the bottom and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-right corner of the element, specified as the percentages of the bottom and right sides of the border box. ...
...ning the curvature of the bottom and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the bottom-right corner of the element, specified as the percentages of the bottom and right sides of the border box. ...
... the border box. formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox. specifications not part of any standard. ...

-moz-outline-radius-topleft - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topleft css property can be used to round the top-left corner of an element's outline. syntax the value of -moz-outline-radius-topleft is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. ...
...tage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-left corner of the element, specified as the percentages of the top and left sides of the border box. ...
... circle defining the curvature of the top and left edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-left corner of the element, specified as the percentages of the top and left sides of the border box. ...
... corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox. html <p>look at this paragraph's top-left corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topleft: 2em; } result specifications not part of any standard. ...

-moz-outline-radius-topright - CSS: Cascading Style Sheets
in mozilla applications, the -moz-outline-radius-topright css property can be used to round the top-right corner of an element's outline. syntax the value of -moz-outline-radius-topright is either a css <length> or a percentage of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. ...
...e of the corresponding dimensions of the border box. the calc() function may be used as well. values <length> the radius of the circle defining the curvature of the top and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-right corner of the element, specified as the percentages of the top and right sides of the border box. ...
...rcle defining the curvature of the top and right edges of the element, specified as a css <length>. <percentage> the radius of the circle defining the rounding of the top-right corner of the element, specified as the percentages of the top and right sides of the border box. ...
... of the border box. formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a browser other than firefox. specifications not part of any standard. ...

:invalid - CSS: Cascading Style Sheets
people who have certain types of color blindness will be unable to determ...
...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 rel...
...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, descript...
...put type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the 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 a...

Resizing background images with background-size - CSS: Cascading Style Sheets
ing horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-size value of 150 pixels. html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image:...
...ify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file. special values: "contain" and "cover" besides <length> values, the background-size css property offers two special size values, contain and cover. let's take a look at these. contain the contain value specifies that, regardless of the...
...le while not exceeding the length of the corresponding side of the container. try resizing the example below to see this in action. html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. try resizing the example below to see this in action. html <div class="bgsizecover"> <p>try resizing th...
...th dimensions are greater than or equal to the corresponding size of the container. try resizing the example below to see this in action. ...

Basic Shapes - CSS: Cascading Style Sheets
shape's coordinate system. you have already met the reference box in the guide on creating shapes from box values, which directly uses the reference box to create the shape. the firefox shapes inspector helpfully shows the reference box in use when you inspect a shape. in the screenshot below i have created a circle, using shape-outside: circle(50%). the floated element has 20 pixels of padding, border and margin applied, and the shapes inspector highlights these reference boxes. when using a basic shape the reference box used by default is the margin-box. you can see in the screenshot that the shape is being defined with reference to that part of the box model. you can add the various box values after your basic shape definition. therefore the default behaviour is as if you have defined. .
...he screenshot that the shape is being defined with reference to that part of the box model. you can add the various box values after your basic shape definition. therefore the default behaviour is as if you have defined. .shape { shape-outside: circle(50%) margin-box; } you can therefore change this in order that your shape uses the different parts of the box model, for example to use the border. .shape { shape-outside: circle(50%) border-box; } what is worth noting is that the margin-box will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. we will see this in the following examples of basic shapes. for an excellent description of references boxes as they apply to css shapes see un...
...standing reference boxes for css shapes. inset() the inset() type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it. however the inset() types enables the definition of offsets, thus pulling the content in over the shape. therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-radius. the below css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels. .shape { float: left; shape-outside: inset(20px 10px 20px 10px round 10px); } using the same rules as we use for the margin shorthand, you can set more than one offset at once.
...ove rules could also be described as: .shape { float: left; shape-outside: inset(20px 10px round 10px); } in the example below we have an inset() shape used to pull content over the floated element. change the offset values to see how the shape changes. you can also add the box value that you wish to use as a reference box. in the example below change the reference box from margin-box to border-box, padding-box or content-box to see how the reference box used as the starting point before offsets are calculated changes. circle() the circle() value for shape-outside can accept two possible arguments. the first is the shape-radius. both circle() and ellipse() values for shape-outside are specified as accepting this argument of <shape-radius>. this argument can be a length or percentag...

Animatable CSS properties - CSS: Cascading Style Sheets
-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-size block-size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-image-outset b...
... border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius border-start-start-radius border...
...th border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius border-start-start-radius border-top border-top-color border-top-left-radius border-top-right-radius border-top-width border-width bottom box-shadow caret-color clip clip-path color column-count column-gap column-rule column-rule-color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font ...
...size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-border mask-position mask-size max-block-size max-height max-inline-size max-lines max-width min-block-size min-height min-inline-size min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order outline outline-color outline-offset ...

CSS reference - CSS: Cascading Style Sheets
odeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end...
...blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-color...
...-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightnes...
...hz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()mmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline...

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
safari edge non-standard keywords the following values are implemented only for one or both of the prefixed properties, but not on the standard appearance property. ...
...implemented only for one or both of the prefixed properties, but not on the standard appearance property. ...
...fixed properties, but not on the standard appearance property. ...
...efox 64. treeheadersortarrow firefox removed in firefox 64. treeitem firefox removed in firefox 64. treeline firefox removed in firefox 64. treetwisty firefox removed in firefox 64. treetwistyopen firefox removed in firefox 64. treeview firefox removed in firefox 64. -moz-win-borderless-glass firefox removed in firefox 64. -moz-win-browsertabbar-toolbox firefox removed in firefox 64. -moz-win-communicationstext firefox removed in firefox 64. -moz-win-communications-toolbox firefox removed in firefox 64. -moz-win-exclude-glass firefox removed in firefox 64. -moz-win-glass fir...

background - CSS: Cascading Style Sheets
the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-s...
...is better to describe it semantically in the document. mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparentapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesas each of the properties of the shorthand:background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetsbackgr...
...)<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()...
... candidate recommendation the shorthand property has been extended to support multiple backgrounds and the new background-size, background-origin and background-clip properties. css level 2 (revision 1)the definition of 'background' in that specification. recommendation no significant changes css lev...

<basic-shape> - CSS: Cascading Style Sheets
of the reference box, with the x-axis running to the right and the y-axis running downwards. all the lengths expressed in percentages are resolved from the used dimensions of the reference box. shape functions the following shapes are supported. all <basic-shape> values use functional notation and are defined here using the value definition syntax. ...
... a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. ...
...t four arguments are supplied they represent the top, right, bottom and left offsets from the reference box inward that define the positions of the edges of the inset rectangle. these arguments follow the syntax of the margin shorthand, that let you set all four insets with one, two or four values. the optional <border-radius> argument(s) define rounded corners for the inset rectangle using the border-radius shorthand syntax. a pair of insets in either dimension that add up to more than the used dimension (such as left and right insets of 75% apiece) define a shape enclosing no area. for this specification, this results in an empty float area. circle() circle( [<shape-radius>]? [at <position>]? ) the <shape-radius> argument represents r, the radius of the circle. negative values are ...
...description computed values of basic shapes the values in a <basic-shape> function are computed as specified, with these exceptions: omitted values are included and compute to their defaults. a <position> value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage. a <border-radius> value in inset() is computed as an expanded list of all eight <length> or percentage values. interpolation of basic shapes when animating between one <basic-shape> and another, the rules below are applied. the values in the shape functions interpolate as a simple list. the list values interpolate as <length>, <percentage>, or calc() where possible. if list values are not one of those t...

column-rule-width - CSS: Cascading Style Sheets
om/mdn/interactive-examples and send us a pull request. ...
...d us a pull request. syntax /* keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value. ...
... values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value. values <'border-width'> is a keyword defined by border-width describing the width of the rule. ...
... the `column-rule-width` property is used to change the width of the line that is drawn between columns. ...

element() - CSS: Cascading Style Sheets
no support 4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.ie no support noopera no support nosafari no support now...
... nofirefox full support 57prefixed full support 57prefixed prefixed implemented with the vendor prefix: -moz- no support 29 — 57prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image, background, border-image and border-image-source. no support 4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.ie no support noopera no support nosafari no support nowebview android ...
... no support 4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.opera android no support nosafari ios no support nosamsung internet android no suppor...
...ofirefox android full support 60prefixed full support 60prefixed prefixed implemented with the vendor prefix: -moz- no support 29 — 60prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image, background, border-image and border-image-source. no support 4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.opera android no support nosafari ios no support nosamsung internet android no support ...

mask - CSS: Cascading Style Sheets
the mask css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points. as well as the properties listed below, the mask shorthand also resets 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. constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image u...
...nd the second sets mask-clip. <geometry-box> | no-clip sets the area that is affected by the mask image. see mask-clip. <compositing-operator> sets the compositing operation used on the current mask layer. see mask-composite. ...
...-clip. <geometry-box> | no-clip sets the area that is affected by the mask image. see mask-clip. <compositing-operator> sets the compositing operation used on the current mask layer. see mask-composite. ...
...age( <image-tags>? [ <image-src>? , <color>? ]! ...

Block formatting context - Developer guides
there's no floating children avaliable inside a flex/grid container, but exclude external floats and suppress margin collapsing still works. examples contain internal floats make float content and alongside content the same height. let's have a look at a couple of these in order to see the effect creating a new bfc. in the following example, we have a floated element inside a <div> with a border applied. the content of that <div> has floated alongside the floated element. as the content of the float is taller than the content alongside it, the border of the <div> now runs through the float. as explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the <div> only contain the content and not the float. using overflo...
... <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .5); border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns la...
...lement itself. ...
... <div class="box"><p>normal</p></div> </section> <section> <div class="float">try to resize this outer float</div> <div class="box" style="display:flow-root"><p><code>display:flow-root</code><p></div> </section> css section { height:150px; } .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5px solid steelblue; } .float { float: left; overflow: hidden; /* required by resize:both */ resize: both; margin-right:25px; width: 200px; height: 100px; background-color: rgba(255, 255, 255, .75); border: 1px solid black; padding: 10px; } rather than inline-blocks with width:<percentage>, in this case we don't have to specify the width of the...

<input type="radio"> - HTML: Hypertext Markup Language
nd <legend> elements, which help to group the functionality nicely and in a semantic way. ...
...ality nicely and in a semantic way. ...
...type { display: flex; align-items: flex-start; margin-bottom: 5px; } label { margin-right: 15px; line-height: 32px; } input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 16px; height: 16px; border: 2px solid #999; transition: 0.2s all linear; margin-right: 5px; position: relative; top: 4px; } input:checked { border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browse...
...r: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. here we've used a border along with border-radius and a transition to create a nice animating radio selection. notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected. compatibility note: if you wish to use the appearance property, you should test it very carefully. although it is supported in most modern browsers, its implementation varies widely. in olde...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
d. if the page is in strict standards mode, and no units are used, then mozilla ignores the style: <doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>css and units example</title> </head> <body> // works in strict mode <div style="width: 40px; border: 1px solid black;"> text </div> // will fail in strict mode <div style="width: 40; border: 1px solid black;"> text </div> </body> </html> since the above example has a strict doctype, the page is rendered in strict standards mode. the first div will have a width of 40px, since it uses units, but the second div won't get a width, and thus will default to 100% width...
...units, but the second div won't get a width, and thus will default to 100% width. the same would apply if the width were set through javascript. javascript and css since mozilla supports the css standards, it also supports the css dom standard for setting css through javascript. you can access, remove, and change an element's css rules through the element's style member: <div id="mydiv" style="border: _fckstyle="border: 1px solid black;"> text </div> <script> var myelm = document.getelementbyid("mydiv"); myelm.style.width = "40px"; </script> you can reach every css attribute that way. again, if the web page is in strict mode, you must set a unit or else mozilla will ignore the command. when you query a value, say through .style.width, in mozilla and internet explorer, the returned va...
...tents of a div with a specified height are taller than that height. the css standard defines that if no overflow behavior is set in this case, the div contents will overflow. however, internet explorer does not comply with this and will expand the div beyond its set height in order to hold the contents. below is an example that shows this difference: <div style="height: _fckstyle="height: 100px; border: 1px solid black;"> <div style="height: 150px; border: 1px solid red; margin: 10px;"> a </div> </div> as you can see in figure 4, mozilla acts like the w3c standard specifies. the w3c standard says that, in this case, the inner div overflows to the bottom since the inner content is taller than its parent. if you prefer the internet explorer behavior, simply do not specify a height on th...

Supporting private browsing mode - Archive of obsolete content
private browsing for plug-in authors plug-ins can detect whether or not private browsing mode is in effect by using the ...
...private browsing for plug-in authors plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvpriv...
...private browsing for plug-in authors plug-ins can detect whether or not private browsing mode is in effect by using the npn_getvalue() function to check the current value of the npnvprivatemodebool variable. see supporting private browsing in plugins fo...

Building Trees - Archive of obsolete content
« previousnext » ...
... « previousnext » ...
... « previousnext » ...

Anonymous Content - Archive of obsolete content
side of it. this would be created with a box to hold the image and two buttons. the image element has to be placed outside the xbl as it will differ with each use. xul: <box class="zoombox"> <image src="images/happy.jpg"/> <image src="images/angry.jpg"/> </box> xbl: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1px solid black"> <children includes="image"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag. there are two images, so both will be added next to each other. this results in a display that is equivalent to the following: <binding id="zoombox"> <conten...
...abel="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag. there are two images, so both will be added next to each other. ...
...this is an important distinction when using the dom with xbl. this also applies to css selector rules. multiple children elements you can also use multiple children elements and have certain elements be placed in one location and other elements placed in another. ...

Groupboxes - Archive of obsolete content
xul elements together, much like the html fieldset element is used to group html elements. the groupbox is a type of box, and the elements it contains are aligned according to the xul box rules. however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. the groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using css. you can create a caption for your groupbox by inserting a caption element as the first child. groupboxes are box elements, so you can use the box attributes, such as orient and flex. a simple groupbox example the example below shows a simple groupbox: example 1 : source view <groupbox> <caption label="answer"/> <description...
...next, we'll use what we've learned so far and add some additional elements to the find files dialog. « previousnext » ...
...next, we'll use what we've learned so far and add some additional elements to the find files dialog. « previousnext » ...

Gecko Compatibility Handbook - Archive of obsolete content
insensitive while gecko treats them correctly as case sensitive. inconsistent case between the css defining the style for html id's and classes results in gecko browsers not applying the styles to id's or class names that differ in case. internet explorer incorrectly specifies height and width of inline elements such as span. internet explorer implements the box model (padding, margins, borders) incorrectly. do not use internet explorer's invalid implementation of css. use only the cross-browser, standards conformant features of css. use consistent case when writing html id and class name attributes and css styles for those ids and classes. do not specify heights or widths on inline elements such as spans. use only cross-browser box specifications for margins, pa...
...ctly. do not use internet explorer's invalid implementation of css. use only the cross-browser, standards conformant features of css. use consistent case when writing html id and class name attributes and css styles for those ids and classes. do not specify heights or widths on inline elements such as spans. use only cross-browser box specifications for margins, padding and borders. (more about css) content differs in gecko browsers and internet explorer incorrect layout mode specified by doctype. if pages should be displayed by legacy browsers such as netscape navigator 4 or internet explorer 4 and 5, be sure to specify quirks mode layout via the doctype. images are laid out without intervening blank areas in interent e...
...work properly. this can cause problems in gecko browsers since it implements the standards strictly. the old "code to the bugs" approach will not work for netscape 6.x, netscape 7.x and other mozilla based browsers. example - putting forms in tables invalid html to eliminate line break in <form>. in older browsers, this results in the td cell tightly wrapping around the input element. <table border="1"> <tr> <form name="form2"> <td> <input type="text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page. unfortunately, this is invalid html and can cause problems both when parsing the page and when applying the css styles. incorrect use of xml empty ...

-ms-scrollbar-base-color - Archive of obsolete content
)<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-base-color and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. ...
...> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-base-color and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. ...
...amples this example uses -ms-scrollbar-base-color and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .aquascroll { scrollbar-base-color: aqua; scrollbar-arrow-color: blue; border-color: blue; } .bisquescroll { scrollbar-base-color: bisque; scrollbar-arrow-color: red; border-color: red; } <body> <div class="aquascroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="bisquescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit...

-ms-scrollbar-highlight-color - Archive of obsolete content
tage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-highlight-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. ...
...<alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-highlight-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. ...
...r, and -ms-scrollbar-arrow-color to create two <div> objects with different scroll bar color schemes. div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="redscroll"> lorem ipsum dolo...

-ms-scrollbar-track-color - Archive of obsolete content
centage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-track-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> elements with different scroll bar color schemes. ...
... / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-track-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <div> elements with different scroll bar color schemes. ...
..., and -ms-scrollbar-arrow-color to create two <div> elements with different scroll bar color schemes. div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="redscroll"> lorem ipsum dol...

Advanced styling effects - Learn web development
r box shadow features unlike text-shadow, box-shadow has an inset keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. let's have a look and see what we mean. ...
...unlike text-shadow, box-shadow has an inset keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. let's have a look and see what we mean. ...
...t to box-shadow or text-shadow. the really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference. in this next example we are applying our filter to a box, and comparing it to a box shadow. as you can see, the drop-shadow filter follows the exact shape of the text and border dashes. the box shadow just follows the square of the box. blend modes css blend modes allow us to add blend modes to elements that specify a blending effect when two elements overlap — the final color shown for each pixel will be the result of a combination of the original pixel color, and that of the pixel in the layer underneath it. blend modes are again very familiar to users of graphic...

Test your skills: The Box Model - Learn web development
rnate class, so that it matches the visual width of the first box. your final result will look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model two in this task, add to the box: a 5px, black, dotted border. a top margin of 20px. a right margin of 1em. a bottom margin of 40px. a left margin of 2em. padding on all sides of 1em. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model three in this example the inl...
...in of 1em. a bottom margin of 40px. a left margin of 2em. padding on all sides of 1em. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. ...
...te the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model three in this example the inline element has a margin, padding and border however the lines above and below are overlapping it. what can you add to your css to cause the size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you w...

Test your skills: Selectors - Learn web development
o recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. give the element with a class of alert a 1px grey border. if the element with a class of alert also has a class of stop, make the background red. if the element with a class of alert also has a class of go, make the background green. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors...
...f #333 and foreground of white. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors four in this task try the following: make any paragraph that directly follows an h2 element red. remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors five in this final task add css using attribute selectors to do the following: target the <a> eleme...
...hild of the ul with a class of list. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors five in this final task add css using attribute selectors to do the following: target the <a> element with a title attribute and make the border pink (border-color: pink). target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange). target the <a> element with an href value starting with https and give it a green border (border-color: green). try updating the live code below to recreate the finished example: for assessment or further work p...

CSS building blocks - Learn web development
this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have: ...
...inators the box model everything in css has a box around it, and understanding these boxes is key to being able to create layouts with css, or to align items with other items. in this lesson, we will take a proper look at the css box model, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it. backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrounds and borders. from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css. handling different text directions in recent years, css has evolved in order to better support different directionality of content, including ri...
... ...

Normal Flow - Learn web development
ocument rather than fighting against it as you make changes to the layout. before digging deeper into different layout methods, it is worth revisiting some of the things you will have studied in previous modules with regard to normal document flow. how are elements laid out by default? first of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier. by default, a block level element's content is 100% of the width of its parent element, and as tall as its content. inline elements are as tall as their content, and as wide as their content. you can't set width or height on inline elements — they just sit inside the content of block level elements. if y...
...gin collapsing, and we have met this before too. let's look at a simple example that explains all of this: <h1>basic document flow</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p>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.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elements will <span>wrap onto a new line if possible (lik...
..., and adjacent text nodes, if there is space on the same line. overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design. previous overview: css layout next in this module introduction to ...

Styling lists - Learn web development
; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet. the syntax is pretty simple: ul { list-style-image: url(star.svg); } however, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. you are better off using the background family of properties, which you've learned in the backgrounds and borders article. for now, here's a taster! in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } here we've done the following: ...
...tever else you can find. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see a potential answer. ...
...light the candle.</li> <li>next, open the box.</li> <li>finally, place the three magic items in the box, in this exact order, to complete the spell: <ol> <li>the book of spells</li> <li>the shiny rod</li> <li>the goblin statue</li> </ol> </li> </ul></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinpu...

Example 2 - Learn web development
select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradie...
...t(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,...
...box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist...

Example 3 - Learn web development
select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradie...
...t(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,...
...box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } ...

Example 4 - Learn web development
select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradie...
...t(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,...
...box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } ...

Example 5 - Learn web development
select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradie...
...t(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,...
...box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } ...

Your first form - Learn web development
rticle to teach you form styling in detail, so for the moment we will just get you to add some css to make it look ok. first of all, add a <style> element to your page, inside your html head. ...
...tyling in detail, so for the moment we will just get you to add some css to make it look ok. first of all, add a <style> element to your page, inside your html head. ...
...ne; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* s...

HTML table advanced features and accessibility - Learn web development
ur css modules (introduction to css is a good place to start; we also have an article specifically on styling tables). ...
...s a good place to start; we also have an article specifically on styling tables). ...
... following: hidden example <!doctype html> <html> <head> <meta charset="utf-8"> <title>my spending record</title> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border: 4px solid rgb(200,200,200); letter-spacing: 1px; font-size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { ...

Accessibility API cross-reference
of the main document. application frame n/a application see <div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content. ...
... application frame n/a application see <div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content. ...
... a window in an mdi applicaton internal_frame internal_frame, n/a invisible layer z-indexed to the front, for temporary content. e.g., tooltips may be drawn on the glass pane layer. glass_pane glass_pane n/a multiple adjacent panes that can be sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events. n/a n/a canvas n/a <canvas> (accessible alternative richtext content may be nested inside, but the canvas itself is presentational) a dialog for picking a color n/a color_chooser color_chooser n/a <input type=color> ...

Embedding API for Accessibility
it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcha...
...it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcharpref("alert...
...ls); /* 0-4 */ moz 0.9.2 text selection appearance setcharpref("browser.selection.background_color", colorstring); setcharpref("browser.selection.foreground_color", colorstring); setcharpref("browser.selection.border", cssborderstylestring); /* is a selection border hard to implement? it's a w3c uaag requirement */ setboolpref("browser.selection.use_system_colors", usesystemcolors); no content waiting alerts setcharpref("alert.audio.mail_waiting", pathtosoundfile); setcharpref("alert.audio.background_image_waiting", pathtosoundfile); ...

Applying styles and colors - Web APIs
note also that only start and final endpoints of a path are affected: if a path is closed with closepath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the linejoin style, whose defau...
...er the whole pixel exactly). note also that only start and final endpoints of a path are affected: if a path is closed with closepath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the linejoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). see the next two sections for demonstrations of these additional line styles. for even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels ...
...pattern for lines. the setlinedash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the linedashoffset property sets an offset where to start the pattern. in this example we are creating a marching ants effect. it is an animation technique often found in selection tools of computer graphics programs. it helps the user to distinguish the selection border from the image background by animating the border. in a later part of this tutorial, you can learn how to do this and other basic animations. <canvas id="canvas" width="110" height="110"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); var offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset =...

Detecting device orientation - Web APIs
e will work on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
... supporting the deviceorientation event and running on a device able to detect its orientation. ...
...lass="garden"> <div class="ball"></div> </div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree i...

EffectTiming.fill - Web APIs
named "main" which is a container for the element we'll be animating, which is a <div> with the id "box". below that, another <div> serves as a button that will trigger the animation to begin. ...
... is a <div> with the id "box". below that, another <div> serves as a button that will trigger the animation to begin. ...
...osition: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating. that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript.

Comparison of Event Targets - Web APIs
composition from shadow dom. ...
...mozilla-based browser? todo: only suitable for extension-developers? ...
...the eventtarget which the pointing device entered todo: also needs descriptions for dragenter and dragexit events. example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedtarget.id + '\n');" style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> </hbox> ...

GlobalEventHandlers.onanimationcancel - Web APIs
ves as input a single parameter: an animationevent object describing the event which occurred. ...
...ent which occurred. ...
...iscussion here, let's take a look at the styles for the box that we're animating. first is the box itself, with all its properties, including animation, defined. we go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 5s ease-in-out 0s infinite alternate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { ...

GlobalEventHandlers.onanimationend - Web APIs
ndow (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ionevent object describing the event which occurred. ...
...t's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. the keyframes are defined next; they describe ...

GlobalEventHandlers.onanimationiteration - Web APIs
allowing the user to choose whether or not to start the next iteration. much of this code is the same as in other examples of animation events, so it may look familiar. ...
...ch of this code is the same as in other examples of animation events, so it may look familiar. ...
...t's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; animation: 2s ease-in-out 0s infinite alternate both paused slidebox; } the animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner. @keyframes slidebox {...

GlobalEventHandlers.onanimationstart - Web APIs
ndow (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ionevent object describing the event which occurred. ...
...t's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } the animation sequence is described next. first, the "slideanimation" class, which establishes the animation that will cause the box to move over the course of five seconds, one time, using the "slidebox" keyframe set. the keyframes are defined next; they describe ...

GlobalEventHandlers.ondragleave - Web APIs
gleave event handler for element targetelement. example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler. ...
...t. example this example demonstrates using the ondragleave attribute handler to set an element's dragleave event handler. ...
... lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); // change the target element's background color to signify a drag over event // has occurred ev.currenttarget.style.background = "lightblue"; ev.preventdefault(); } function drop_handler(ev) { console.log("drop");...

HTMLImageElement.sizes - Web APIs
((min-width: 30em) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. ...
...) and (max-width: 50em)) 30em, (max-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. ...
... let image = document.queryselector("article img");...

HTMLImageElement - Web APIs
(hash) symbol (#) followed by the id of the <map> element, such as #my-map-element. the <map> in turn contains <area> elements indicating the clickable areas in the image. htmlimageelement.width an integer value that reflects the width html attribute, indicating the rendered width of the image in css pixels. htmlimageelement.x read only an integer indicating the horizontal offset of the left border edge of the image's css layout box relative to the origin of the <html> element's containing block. htmlimageelement.y read only the integer vertical offset of the top border edge of the image's css layout box relative to the origin of the <html> element's containing block. obsolete properties htmlimageelement.align a domstring indicating the alignment of the image with respect to the ...
... the <html> element's containing block. obsolete properties htmlimageelement.align a domstring indicating the alignment of the image with respect to the surrounding context. the possible values are "left", "right", "justify", and "center". this is obsolete; you should instead use css (such as text-align, which works with images despite its name) to specify the alignment. htmlimageelement.border a domstring which defines the width of the border surrounding the image. this is deprecated; use the css border property instead. htmlimageelement.hspace an integer value which specifies the amount of space (in pixels) to leave empty on the left and right sides of the image. htmlimageelement.longdesc a usvstring specifying the url at which a long description of the image's contents may...
...operties. html living standardthe definition of 'htmlimageelement' in that specification. living standard the following properties have been added: srcset, currentsrc and sizes. html5the definition of 'htmlimageelement' in that specification. recommendation a constructor (with 2 optional parameters) has been added. the following properties are now obsolete: name, border, align, hspace, vspace, and longdesc. the following properties are now unsigned long, instead of long: height, and width. the following properties have been added: crossorigin, naturalwidth, naturalheight, and complete. document object model (dom) level 2 html specificationthe definition of 'htmlimgelement' in that specification. obsolete the lowsrc property has been remove...

MediaStreamConstraints.audio - Web APIs
tusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...hat. ...
...a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.i...

MediaStreamConstraints.video - Web APIs
at we require a video track, but we don't care about any specifics beyond that. ...
...hat. ...
...e that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg ...

ResizeObserverEntry - Web APIs
resizeobserverentry.contentboxsize read only an object containing the new content box size of the observed element when the callback is run. ...
... resizeobserverentry.contentboxsize read only an object containing the new content box size of the observed element when the callback is run. ...
...better supported than the above two properties, but it is left over from an earlier implementation of the resize observer api, is still included in the spec for web compat reasons, and may be deprecated in future versions. resizeobserverentry.target read only a reference to the element or svgelement being observed. note: the content box is the box in which content can be placed, meaning the border box minus the padding and border width. the border box encompasses the content, padding, and border. see the box model for further explanation. methods none. examples the following snippet is taken from the resize-observer-text.html (see source) example. this uses a simple feature detection test to see if the browser supports the newer contentboxsize property — if so, it uses that to get t...

Color contrast - Accessibility
aving good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. this is because they don't see bright and dark areas as readily as those without such conditions, and therefore have trouble seeing edges, borders, and other details. it is good to have a cool design on your website, but the design is worthless if your users can't read your content. examples let's have a look at some simple html and css code: <div class="good">good contrast</div> <div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } b...
...ackground-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
...make the color contrast as good as it can be within your design constraints — ideally go for the aaa rating (see 1.4.6 below), but at least meet the aa rating (see 1.4.3 below). i...

-moz-float-edge - CSS: Cascading Style Sheets
the non-standard -moz-float-edge css property specifies whether the height and width properties of the element include the margin, border, or padding thickness. /* keyword values */ -moz-float-edge: border-box; -moz-float-edge: content-box; -moz-float-edge: margin-box; -moz-float-edge: padding-box; /* global values */ -moz-float-edge: inherit; -moz-float-edge: initial; -moz-float-edge: unset; syntax values border-box the height and width properties include the content, padding and border but not the margin. content-box the height and width properties include the content, but not the padding, border or margin. margin-box the height and width properties include the content, padding, border and margin. padding-box the height and width properties include the content and pad...
...es border-box the height and width properties include the content, padding and border but not the margin. content-box the height and width properties include the content, but not the padding, border or margin. margin-box the height and width properties include the content, padding, border and margin. padding-box the height and width properties include the content and padding but not the border or margin. ...
...de the content, but not the padding, border or margin. margin-box the height and width properties include the content, padding, border and margin. padding-box the height and width properties include the content and padding but not the border or margin. formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not part of any standard. ...

-webkit-mask-box-image - CSS: Cascading Style Sheets
<length> the size of the mask image's offset. ...
...p> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image. <gradient> a -webkit-gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height). repeat 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...
...o mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height). repeat 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. stretch the mask image is stretched to contain the border box exactly. round the mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box. space 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. formal definition value not found in db! forma...

::part() - CSS: Cascading Style Sheets
the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute. ...
...) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <div part="tab active">tab 1</div> <div part="tab">tab 2</div> <div part="tab">tab 3</div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(acti...
... 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { background-color: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment s...

:read-only - CSS: Cascading Style Sheets
we do just this in the example below. the :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 <textarea>. ...
..., 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 <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> ...
...urce code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification. living standard no change. html5the definition of ':read-only' in that specification. recommendation defines th...

:read-write - CSS: Cascading Style Sheets
we do just this in the example below. the :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 <textarea>. ...
..., 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 <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>th...
...s like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification. living standard no change. html5the definition of ':read-write' in that specification. recommendation defines ...

Introduction to formatting contexts - CSS: Cascading Style Sheets
ntexts the outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. this means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. elements participating in a bfc use the rules outlined by the css box model, which defines how an element's margins, borders, and padding interact with other blocks in the same context. creating a new block formatting context the <html> element is not the only element capable of creating a block formatting context. any block-level element can be made to create a bfc by the application of certain css properties. a new bfc is created in the following situations: elements made to float using float absolutely posit...
...ini-layout inside the main layout. a bfc contains everything inside it, float and clear only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context. bfc creation examples let's have a look at a couple of these in order to see the effect creating a new bfc. in the example below, we have a floated element inside a <div> with a border applied. the content of that <div> has floated alongside the floated element. as the content of the float is taller than the content alongside it, the border of the <div> now runs through the float. as explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the div only contain the content and not the float. creating a ne...
...s inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. the paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <span> elements are used on text. the box model does not fully apply to items participating in an inline formatting context. in a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. however, margins above and below the element will not be applied. vertical padding and borders will be applied but may overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders. other formatting contexts this guide covers flow layout and ...

CSS Grid Layout - CSS: Cascading Style Sheets
s grid than they were with tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...uld position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...lly overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...

Using CSS gradients - CSS: Cascading Style Sheets
sitions. the color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position. ...
...example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. the second example does not contain the hint to hilight the difference the color hint can make: <div class="colorhint-gradient"></div> <div class="regular-progression"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .colorhint-gradient { background: linear-gradient(to top, black, 20%, cyan); } .regular-progression { background: linear-gradient(to top, black, cyan); } overlaying gradients gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. the backgrounds are stacked from top to bottom, with the first specified being on top. <div cla...
...example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other intersting effects. the conic-gradient syntax is similar to t...

The stacking context - CSS: Cascading Style Sheets
ue other than auto. element that is a child of a grid (grid) container, with z-index value other than auto. element with a opacity value less than 1 (see the specification for opacity). element with a mix-blend-mode value other than normal. element with any of the following properties with value other than none: transform filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate. element with a -webkit-overflow-scrolling value touch. element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post). element with a contain value of layout, or paint, or a composite value that includes either of them (i.e. contain: strict, contain: content). within a stacking c...
...t #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { ...
...x; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; } result ...

Using CSS transforms - CSS: Cascading Style Sheets
iner box and the cube itself, as well as each of its faces. ...
...perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform...
...erspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { ba...

Using CSS transitions - CSS: Cascading Style Sheets
transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; } multiple animated properties example html content <body> <p>the box below combines transitions for: width, height, background-color, transform. ...
...-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; } multiple animated properties example html content <body> <p>the box below combines transitions for: width, height, background-color, transform. ...
...: var f = document.getelementbyid('foo'); document.addeventlistener('click', function(ev){ f.style.transform = 'translatey('+(ev.clienty-25)+'px)'; f.style.transform += 'translatex('+(ev.clientx-25)+'px)'; },false); with css you can make it smooth without any extra effort. simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running. this is a transitionevent object, which has two added pro...

Value definition syntax - CSS: Cascading Style Sheets
n && <length> is equivalent to [ bold thin ] && <length>. it describes bold thin <length> or <length> bold thin but not bold <length> thin. double bar separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. typically this is used to define the different values of a shorthand property. <'border-width'> || <'border-style'> || <'border-color'> this example matches the following values: 1em solid blue blue 1em solid 1px yellow but not: blue yellow, as a component must appear at most one single time. bold, as it isn't a keyword allowed as value of any of the entity. note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equiva...
... sign name description example combinators juxtaposition components are mandatory and should appear in that order solid <length> && double ampersand components are mandatory but may appear in any order <length> && <string> || double bar at least one of the components must be present, and they may appear in any order. ...
...ion example combinators juxtaposition components are mandatory and should appear in that order solid <length> && double ampersand components are mandatory but may appear in any order <length> && <string> || double bar at least one of the components must be present, and they may appear in any order. ...

calc() - CSS: Cascading Style Sheets
z-index: calc(4 / 2); will not be accepted. examples positioning an object on screen with a margin calc() makes it easy to position an object with a set margin. ...
...osition an object with a set margin. in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin. let's look at some css: input { padding: 2px; display: block; width: calc(100% - 1em); } #for...
... is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin. let's look at some css: input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available window width. then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. then, the following html makes use of this css: <form> <div id="formbox"> <label>type something:</label> <input type="te...

clip - CSS: Cascading Style Sheets
lues */ clip: rect(1px 10em 3rem 2ch); clip: rect(1px, 10em, 3rem, 2ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead. values <<shape>()> a rectangular <<shape>()> of the form rect(<top> <right> <bottom> <left>). the <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box. the <top>, <right>, <bottom>, and <left> values may be either a <length> or auto. if any side's value is auto, the element is clipped to that side's inside border edge. auto the element does not clip (default). this is different from rect(auto, auto, aut...
...ffsets from the inside left border edge of the box — that is, the extent of the padding box. the <top>, <right>, <bottom>, and <left> values may be either a <length> or auto. if any side's value is auto, the element is clipped to that side's inside border edge. auto the element does not clip (default). this is different from rect(auto, auto, auto, auto), which clips to the element’s inside border edges. formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .
... formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https...

<display-box> - CSS: Cascading Style Sheets
e vries display: contents is not a css reset | adrian roselli examples in this first example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered. ...
... of secret is set to display: none; the box and any content is now not rendered. display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px. however it also has display: contents specified therefore this <div> will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed. ...
...e; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px. however it also has display: contents specified therefore this <div> will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed. html <div class="outer"> <div>inner div.</div> </div> css .outer { border: 2px solid red; width: 300px; display: contents; } .outer > div { border: 1px solid green; } result specifications specification status css display module level 3the definition of 'display-box' in that specification. candidate recommendation ...

flex - CSS: Cascading Style Sheets
uto">auto</div> <div class="item auto">auto</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item initial">initial</div> <div class="item none">none</div> <div class="item none">none</div> </div> <div class="flex-container"> <div class="item four">4</div> <div class="item two">2</div> <div class="item one">1</div> </div> * { box-sizing: border-box; } .flex-container { background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; }...
... candidate recommendation initial definition ...
... candidate recommendation initial definition ...

font - CSS: Cascading Style Sheets
v> </form> <div class="fontshorthand"> this is some sample text. ...
... class="fontshorthand"> this is some sample text. ...
...br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { float: left; text-align: center; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas = document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttex...

<image> - CSS: Cascading Style Sheets
if supported, the browser-defined size matching the usual cursor size on the client's system ...
...if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before...
...lt object size background-image the size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the browser-defined size matching the usual cursor size on the client's system mask-image ? shape-outside ? mask-border-source ? symbols for @counter-style at risk feature. if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these valu...

outline-offset - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ outline-offset: 3px; outline-offset: 0.2em; /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> the width of the space between the element and its outline. a negative value places the outline inside the element. ...
... /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> 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. description an 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. formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est ...
...nt's background. formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification. recommendation initial definition browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data,...

outline - CSS: Cascading Style Sheets
n is input elements, which are given default styling by browsers. values <'outline-color'> sets the color of the outline. defaults to currentcolor if absent. see outline-color. <'outline-style'> sets the style of the outline. defaults to none if absent. see outline-style. <'outline-width'> sets the thickness of the outline. defaults to medium if absent. see outline-width. description borders and outlines are very similar. however, outlines differ from borders in the following ways: outlines never take up space, as they are drawn outside of an element's content. according to the spec, outlines don't have to be rectangular, although they usually are. as with all shorthand properties, any omitted sub-values will be set to their initial value. accessibility concerns assigning ou...
... recommendation no change. css le...
... recommendation no change. css level 2 (revision 1)the...

rotate - CSS: Cascading Style Sheets
none specifies that no rotation should be applied. ...
... editor's draft initial definit...
... editor's draft initial definition. ...

scale - CSS: Cascading Style Sheets
o a scale3d() (3d scaling) function. none specifies that no scaling should be applied. ...
... editor's draft initial definition. ...
... editor's draft initial definition. ...

text-align - CSS: Cascading Style Sheets
ormal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> 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. ...
...an a ligula. </p> css .example { text-align: left; border: solid; } result centered text html <p class="example"> 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. </p> css .example { text-align: center; border: solid; } result justify html <p class="example"> 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. ...
...umsan a ligula. </p> css .example { text-align: center; border: solid; } result justify html <p class="example"> 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. ...

transform-box - CSS: Cascading Style Sheets
the transform-box css property defines the layout box to which the transform and transform-origin properties relate. /* keyword values */ transform-box: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below. values content-box the content box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. border-box the border box is used as the reference box. the reference box of a <table> is the border box of its table wrapper box, not its table box. fill-box the object bounding...
...wport creating element, 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. ...
...ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the the transform-origin the center of the bounding box, so the rectangle spins in place. without it, the transform origin is the center of the svg canvas, and so you get a very different effect. ...

translate - CSS: Cascading Style Sheets
entagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>? ...
... editor's draft initial d...
... editor's draft initial definition. initial v...

unset - CSS: Cascading Style Sheets
n-inherited property. unset can be applied to any css property, including the css shorthand all. ...
...pplied to any css property, including the css shorthand all. ...
...ss shorthand all. examples color html <p>this text is red.</p> <div class="foo"> <p>this text is also red.</p> </div> <div class="bar"> <p>this text is green (default inherited value).</p> </div> css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial default, not inherited).</p> </div> css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; } result specifications specification status comment css cascading and inheritance level 4the definition of 'unset' in that specification. candida...

url() - CSS: Cascading Style Sheets
tional notation is the value for the <url> data type. ...
...ontent: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /...
...svg); /* at-rules */ @document url("https://www.example.com/") { ... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page). the url() function can be included as a value for background, background-image, list-style, list-style-image, content, cursor, border, border-image, border-image-source, mask, mask-image, src as part of a @font-face block, and @counter-style/symbol in css level 1, the url() functional notation described only true urls. in css level 2, the definition of url() was extended to describe any uri, including urns. css values and units level 3 returned to the narrower, initial definition. now, url() denotes only true <url>s. syntax ...

Adding captions and subtitles to HTML5 video - Developer guides
nges the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward. no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below. subtitle implementation a lot of what we do to access the video subtitles revolves around javascript. similar to the video controls, if a browser supports html5 video subtitles, there will be a button provided within the native co...
... the ::cue pseudo-element is the key to targetting individual text track cues...
... the ::cue pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. there are only a handful of css properties that can be applied to...

<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
rmine the correct directionality to use based on the contents of the <bdi>. examples no <bdi> with only ltr this example lists the winners of a competition using <span> elements only. when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text. in this case the "- 1", which consists of characters with neutral or weak directionality, w...
... elements only, and one of the winners has a name consisting of rtl text. in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements. these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul...
... using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements. these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification. living standard html5the definition of '<bdi>' in that specification. recommendation ...

<details>: The Details disclosure element - HTML: Hypertext Markup Language
f long-term storage. an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box. css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents. html <details> <summary>system requirements</summary> <p>requires a computer r...
...can remove the disclosure widget icon by setting list-style: none. chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser. ...
...arker pseudo-element to customize the appearance in that browser. css details { font: 16px "open sans", calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } this css creates a look similar to a tabbed interface, where activating the tab expands and opens it to reveal its contents. html <details> <summary>system requirements</summary> <p>requires a computer running an operating system. the computer must have some memory and id...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
te, it will fall back to the url in the src attribute. width the width of the frame in css pixels. default is 300. deprecated attributes these attributes are deprecated and may no longer be supported by all user agents. you should not use them in new content, and try to remove them from existing content. align the alignment of this element with respect to the surrounding context. frameborder the value 1 (the default) draws a border around this frame. the value 0 removes the border around this frame, but you should instead use the css property border to control <iframe> borders. longdesc a url of a long description of the frame's content. due to widespread misuse, this is not helpful for non-visual browsers. marginheight the amount of space in pixels between the frame's con...
... scrolling indicates when the browser should provide a scrollbar for the frame: auto: only when the frame's content is larger than its dimensions. yes: always show a scrollbar. no: never show a scrollbar. ...
... scrolling indicates when the browser should provide a scrollbar for the frame: auto: only when the frame's content is larger than its dimensions. yes: always show a scrollbar. no: never show a scrollbar. non-standard attributes mozbrowser see bug 1318532 for exposing this to webextensions in firefox. ...

MathML attribute reference - MathML
d be displayed. deprecated. use u+2044 (fraction slash) instead. unimplemented charalign <mstack> specifies the horizontal alignment of digits. close <mfenced> a string for the closing delimiter. columnalign <mtable>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of table cells. columnlines <mtable> specifies table column borders. columnspacing <mtable> specifies the space between table columns. columnspan <mtd> a non-negative integer value that indicates over how many table columns the cell extends. unimplemented columnwidth <mtable> specifies the width of table columns. unimplemented crossout <mscarry> specifies what kind of line is drawn to cross out carries.
...lrows <mtable> a boolean value indicating whether to force all rows to have the same total height. fence <mo> a boolean value specifying whether the operator is a fence (such as parentheses). there is no visual effect for this attribute. unimplemented form <mo> specifies the role of the operator in an enclosed expression. frame <mtable> specifies borders of an entire <mtable>. possible values are: none (default), solid and dashed. framespacing <mtable> specifies additional space added between the table and frame. unimplemented groupalign <maligngroup>, <mtable>, <mtd>, <mtr> height <mglyph>, <mpadded>, <mspace> specifies the desired height. see lengths for possible values. href all use...
...the opening delimiter. unimplemented overflow <math> if an expression is too long to fit in the allowed width, this attribute sets the preferred handling. unimplemented position <msgroup>, <msrow>, <mscarries>, <msline> rowalign <mtable>, <mtd>, <mtr> specifies the vertical alignment of table cells. rowlines <mtable> specifies table row borders. rowspacing <mtable> specifies the space between table rows. rowspan <mtd> a non-negative integer value that indicates on how many rows does the cell extend. rspace <mo> the amount of space after the operator. rquote <ms> the closing quote mark (depends on dir) to enclose the content. the default value is "&quot;". scriptlevel ...

<mtable> - MathML
updated to treat whitespace correctly. alignmentscope unimplemented class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of the cells. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columnspacing specifies the space between table columns. unimplemented columnwidth specifies the width of table columns. displaystyle a boolean value specifying whether more vertical space is used for displayed e...
...display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. unimplemented equalcolumns a boolean value indicating whether to force all columns to have the same total height. false is default. unimplemented equalrows a boolean value indicating whether to force all rows to have the same total height. false is default. frame specifies borders of the entire table. possible values are: none (default), solid and dashed. framespacing specifies additional space added between the table and frame. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. uni...
...s. unimplemented minlabelspacing a length value specifing the minimum space between a label and the adjacent cell in the row. rowalign specifies the vertical alignment of the cells. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowalign="top bottom axis"). possible values are: axis, baseline (default), bottom, center and top. rowlines specifies row borders. multiple values separated by space are allowed and apply to the corresponding rows (e.g. rowlines="none none solid"). possible values are: none (default), solid and dashed. unimplemented rowspacing specifies the space between table rows. unimplemented side specifies the position where <mlabeledtr> label elements should be placed. possible values are: left, right (default), leftoverlap and r...

Media - Progressive web apps (PWAs)
selector selects pointer indicating a link wait indicating that the program cannot accept input progress indicating that the program is working, but can still accept input default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus. its values are similar to the border property, except that you cannot specify individual sides. some other features of user interfaces are implemented using attributes, in the normal way. for example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. example these rule...
...l way. for example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. ...
...r attributes, by using square brackets: [disabled] or [readonly]. ...

Mobile first - Progressive web apps (PWAs)
layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px. ...
...but it doesn't work very well when you get wider than about 480px. ...
...the following media queries: @media (min-width: 480px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); } nav li a { padding: 0 10px; font-size: 2em; }...

stitchTiles - SVG: Scalable Vector Graphics
the stitchtiles attribute defines how the perlin noise tiles behave at the border. only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translat...
... stitch this value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the <feturbulence> node’s width and height (i.e., the width and height of the current subregion) contain an integral number of the tile width and heig...
...ter: url(#noise2); transform: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function. sometimes the result will show clear discontinuities at the tile borders. stitch this value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the <feturbulence> node’s width and height (i.e., the width and height of the current subregion) contain an integral number of the tile width and height for the first octave. specifications specification status comment filter effects mod...

content/mod - Archive of obsolete content
experimental provides functions to modify a page content. globals constructors functions attachto(modification, window) function applies given modification to a given window. for example, the following code applies a style to a content window, adding a border to all divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target. window : nsidomwindow the window to be modified. detachfrom(modification, window) function removes attached modification from a given window. if window is not speci...
...cation : object the modification we want to apply to the target. window : nsidomwindow the window to be modified. detachfrom(modification, window) function removes attached modification from a given window. if window is not specified, modification is removed from all the windows it's being attached to. for example, the following code applies and removes a style to a content window, adding a border to all divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ... detachfrom(style, window); parameters modification : object the modification we want to remove from...

Displaying annotations - Archive of obsolete content
listens for the window's unload event and on unload sends a detach message to the main module, so the add-on can clean it up. ...
...r annotation = panels.panel({ width: 200, height: 180, contenturl: data.url('annotation/annotation.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time. activate the annotator and enter an annotation. you should see a yellow border around the item you annotated: when you move your mouse over the item, the annotation should appear: obviously this add-on isn't complete yet. it could do with more beautiful styling, it certainly needs a way to delete annotations, it should deal with overquota more reliably, and the matcher could be made to match more reliably. but we hope this gives you an idea of the things that are possibl...

List Open Tabs - Archive of obsolete content
d a couple of tabs and click the button. you'll see output in the command line console that looks something like this: info: http://www.mozilla.org/about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab. to access tab content, you need to attach a script to the tab using tab.attach(). this add-on attaches a script to all open tabs. ...
...cript to all open tabs. the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference. to learn more about running scripts in tabs, see the tutorial on using tab.attach(). ...

Listen for Page Load - Archive of obsolete content
loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the browser console, not the web console. you don't get direct access to any content hosted in the tab. to access tab content you need to attach a script to the tab using tab.attach(). this add-on attaches a script to all open tabs. ...
...onsole. you don't get direct access to any content hosted in the tab. to access tab content you need to attach a script to the tab using tab.attach(). this add-on attaches a script to all open tabs. the script adds a red border to the tab's document: require("sdk/tabs").on("ready", runscript); function runscript(tab) { tab.attach({ contentscript: "if (document.body) document.body.style.border = '5px solid red';" }); } (this example is only to show the idea: to implement something like this, you should instead use page-mod, and specify "*" as the match-pattern.) learning more to learn more about working with tabs in the sdk, see the tabs api reference. you can listen for a number of other tab events, including open, close, and activate. to learn more about running scripts in tab...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
ient attribute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive in...
... in the xul overlay document, elements in the base document with the same id values will have their attributes and values merged with the overlay document. try overwriting the contents of overlaydocument.xul with listing 25 and re-saving. <?xml version="1.0" encoding="utf-8"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox id="box1" align="center" style="border: 1px solid; margin: 1em;"> <button label="button 1"/> <button label="button 2" insertbefore="label1"/> </hbox> <button label="button 3"/> </overlay> listing 25: substitute code for overlaydocument.xul let's open base.xul in a firefox window again. as shown in figure 20, the style attribute from the element with the id "box1" in the overlay document has been merged with the markup f...

Adding windows and dialogs - Archive of obsolete content
explains, so go ahead and read the following sections: input controls numeric controls list controls there are some other aspects to take into account when handling input controls, which we cover in the following sections. groupboxes the groupbox element should be easy to understand: it groups a series of xul controls together. it's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped together. it is frequently used with the caption element to associate the grouped elements with a title. the groupbox shouldn't be seen as an aesthetic device, but a logical one. if all you need is a border, use css. the groupbox element should be used when enclosed elements share some function which is separate from other elements or...
...see the firefox preferences window for an example of this: sections are defined using groupbox elements, but their style is quite different from the default. attribute persistence user actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. ...

The Box Model - Archive of obsolete content
er from top to bottom. a box is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an hbox and it is seldom used. here's a very simple example of an hbox with 3 child buttons: <hbox> <button label="cat" /> <button label="parrot" /> <button label="porcupine" /> </hbox> this is how it looks on mac os (the black border was added for illustrative purposes, boxes don't have borders by default): if you use a vbox instead, it looks like this: the orientation of boxes (and most xul elements) can be controlled using the orient attribute or the -moz-box-orient css property. with these you can make an hbox have vertical orientation and viceversa, although that isn't very useful. the css property may be useful on ...
...he width and height css properties and attributes. these attributes won't have any effect on flexible elements. margins, paddings and spacers margins and paddings are frequently used in both html and xul to define spacing between elements and inside of elements. the margin determines the space between an element and the elements surrounding it, while the padding determines the space between the borders of a container element and its child nodes, kind of like an inner margin. sometimes you also need to define flexible spaces between elements. in this case you should use a spacer element with a flex value. a spacer element is completely invisible and doesn't do more than take space. you should only use it when you need flexible space. if you need fix-sized space it's best to use margins and pad...

XML data - Archive of obsolete content
et> make a new css file, style9.css. ...
... oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m . . . notes about this demonstration: the superscript 2 (in "million km²") a unicode character, coded as \b2 in the css file. the heading, "oceans", has a negative top margin, moving it up so it is displayed on top of the border. challenge change the stylesheet so that it displays the document as a table. (see the tables chapter in the css specification for examples that you can adapt.) what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. this is the last page of the tutorial. for more information about css...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
tattribute("url"); strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.style.backgroundcolor="white"; } ele.style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; padding-left: 5px; border-bottom:white;padding-right: 5px; padding-top:3px; text-decoration:none;} .tab:hover { background-color:#ddeeff; } </style> </head> <body > <h2>latest headlines - inner-browsing example </h2> <p>click the tabbed menu to dynamically load the headlines into this web page.</p> <br /> <!-- ***** this code dynamical...
...all rights reserved. note: this ...

Getting Started - Archive of obsolete content
jar:resource:/chrome/classic.jar!/skin/classic/global/ modified skin,install,url,resource:/chrome/classic/skin/classic/global/ once you have made these modifications, save them and run mozilla. if mozilla runs fine, that means that it worked. if it doesn't appear as you expected, then go back into the installed-chrome.txt file and double check that you modified the lines correctly. changing borders and colours this is the part where knowing css comes in handy. to find all of the css files that we're going to be modifying, we must first understand the directory structure. directories in \mozilla\chrome\classic\skin\classic there are a number of different directories which contain the skin information for the default packages that come with mozilla. the most important directory is \global. t...
...erit their own individual directory. you'll be able to change the bookmark manager and the profile migration window here. the three remaining directories are pretty self-explanatory. they contain the images/styles for the browser, email client, or html editor. css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc. for this next part, let's modify the standard button. go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor. scroll down to button {. this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the background-color: to darkblue and...

Adding Style Sheets - Archive of obsolete content
we have hardly modified the look of the elements we have created so far. xul uses css (cascading style sheets) to customize elements. style sheets a style sheet is a file which contains style information for elements. it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter. the style sheet contains information such as the fonts, colors, borders, and size of elements. mozilla applies a default style sheet to each xul window. in many cases, it will suffice to leave the defaults as is. other times, however, you will want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely and accessed via an http url, you...
...ef="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and borders to make the elements look more suitable. changing the styles however, there will be times when the default look of elements will not give the look that is desired. for this, we will need to add a style sheet of our own. so far, we have been applying styles using the style attribute on elements. although this works, it is not really the best thing to do. it is much better to create a separate sty...

Modifying the Default Skin - Archive of obsolete content
x window, you can easily change the style sheets associated with it. larger changes can be done by creating an entirely new skin. firefox has a theme manager for changing the default skin. (although the underlying code for mozilla calls them skins and the user interface calls them themes, they're both referring to the same thing). a skin is described using css, allowing you to define the colors, borders and images used to draw elements. the file classic.jar contains the skin definitions. the global directory within this archive contains the main style definitions for how to display the various xul elements. by changing these files, you can change the look of the xul applications. customize with userchrome.css if you place a file called 'userchrome.css' in a directory called 'chrome' inside yo...
...pen any firefox window after making this change, the menu bars will be red. because this change was made to the user style sheet, it affects all windows. this means that the browser menu bar, the bookmarks menu bar and even the find files menu bar will be red. skin packages to have the change affect only one window, change the style sheet associated with that xul file. for example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksmanager.css in the classic.jar or your favorite skin archive. menuitem { border: 1px solid red; } if you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. the style sheets refer to the images. you should avoid putting references to images ...

reftest opportunities files - Archive of obsolete content
inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090301 http://dbaron.org/css/test/sec090302a http://dbaron.org/css/test/se...
...02 http://dbaron.org/css/test/sec170201 http://dbaron.org/css/test/sec1704 http://dbaron.org/css/test/sec1704b http://dbaron.org/css/test/sec170401 http://dbaron.org/css/test/sec170501 http://dbaron.org/css/test/sec170501a http://dbaron.org/css/test/sec170501b http://dbaron.org/css/test/sec170502 http://dbaron.org/css/test/sec170503 http://dbaron.org/css/test/sec170504 http://dbaron.org/css/test/tborder1 http://dbaron.org/css/test/tborder2 http://dbaron.org/css/test/sec1706c http://dbaron.org/css/test/sec1801 http://dbaron.org/css/test/sec1802 http://dbaron.org/css/test/sec1803 http://dbaron.org/css/test/outline http://dbaron.org/css/test/sq_small http://dbaron.org/css/test/sq_large tests from mozilla source tree parser/htmlparser/tests/html/xmp005.html parser/htmlparser/tests/html/value001.ht...

2006-09-29 - Archive of obsolete content
lable width into which the element is * being placed (i.e., the width of its containing * block). * @param amargin the sum of the left and right margins of the * frame, including actual values resulting from * percentages, but not including actual values * resulting from 'auto'. * @param aborder the sum of the left and right border widths of the * frame. * @param apadding the sum of the left and right margins of the * frame, including actual values resulting from * percentages. * @param ashrinkwrap whether the frame is in a context where * non-replaced blocks should shrink-wrap (e.g., * ...
...ulting from * percentages. * @param ashrinkwrap whether the frame is in a context where * non-replaced blocks should shrink-wrap (e.g., * it's floating, absolutely positioned, or * inline-block). */ virtual nssize computesize(nscoord aavailwidth, nscoord amargin, nscoord aborder, nscoord apadding, prbool ashrinkwrap) = 0; details can be located at refactoring some of nshtmlreflowstate. discussion on how to determine whether there is pending layout changes or reflows when using a popup. it was concluded that a frame model change is utilized within a popup, not a layout change. on the reflow branch, check the dirty and dirty_children framest...

Using the W3C DOM - Archive of obsolete content
in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself. ...
...a nodelist of all the elements with the given tag name in the order they appear in the document: var arrcollection_of_pargs = document.getelementsbytagname("p"); var objfirst_parg = arrcollection_of_pargs[0]; // objfirst_parg will reference the first paragraph in the document objfirst_parg.style.border = "2px solid green"; // and now, the first paragraph in the document // gets a 2px solid green border. in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself. manipulating document style and content changing an element's style using the dom the following tabl...

-ms-scrollbar-arrow-color - Archive of obsolete content
>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
...ntage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...

-ms-scrollbar-face-color - Archive of obsolete content
ue> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
... <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...

::-ms-fill - Archive of obsolete content
shows animated dots that flow in a bar pattern. -ms-ring shows animated dots that flow in a ring pattern. allowable properties only the following css properties can be used in a rule with ::-ms-fill in its selector. other properties are ignored. ...
... animated dots that flow in a bar pattern. -ms-ring shows animated dots that flow in a ring pattern. allowable properties only the following css properties can be used in a rule with ::-ms-fill in its selector. other properties are ignored. ...

A cool-looking box - Learn web development
in this assessment, you'll get some more practice in creating cool-looking boxes by trying to create an eye-catching box. prerequisites: before attempting this assessment, you should have already worked through all the articles in this module. objective: to test comprehension of the css box model and other box-related features such as borders and backgrounds. starting point to get this assessment started, you should: make local copies of the starting html and css — save them as index.html and style.css in a new directory. alternatively, you could use a site like jsbin or glitch to do your assessment. you could paste the html and fill in the css into one of these online editors. if the online editor you are using doesn't have a separate css panel, feel fre...
...sonable height for a large button, centering the text vertically in the process. centered text. a slight increase in font size, to around 17-18 pixel computed style. use rems. write a comment about how you worked out the value. a base color for the design. give the box this color as its background color. the same color for the text; make it readable using a black text shadow. a fairly subtle border radius. a 1-pixel solid border with a color similar to the base color, but a slightly darker shade. a linear semi-transparent black gradient that goes toward the bottom right corner. make it completely transparent at the start, gradiating to around 0.2 opacity by 30% along, and remaining at the same color until the end. multiple box shadows. give it one standard box shadow to make the box look...

Combinators - Learn web development
hed by the first. descendent elements further down the hierarchy don't match. for example, to select only <p> elements that are direct children of <article> elements: article > p in this next example, we have an unordered list, nested inside of which is an ordered list. i am using the child combinator to select only the <li> elements which are a direct child of a <ul>, and have given them a top border. if you remove the > that designates this as a child combinator, you end up with a descendant selector and all <li> elements will get a red border. adjacent sibling combinator the adjacent sibling selector (+) is used to select something if it is right next to another element at the same level of the hierarchy. for example, to select all <img> elements that come right after <p> elements: p ...
... moving on this is the last section in our lessons on selectors. next we will move on to another important part of css — the css box model. ...

Type, class, and ID selectors - Learn web development
er elements too. target an element if it has more than one class applied you can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. this can be helpful when building up components that can be combined in different ways on your site. in the example below we have a <div> that contains a note. the grey border is applied when the box has a class of notebox. if it also has a class of warning or danger, we change the border-color. we can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. you'll see that the last <div> doesn't get any styling applied, as it only has the danger class; it needs notebox as well to...
...e markup and so cannot edit it — this will work. in the next article we'll continue exploring selectors by looking at attribute selectors. ...

What is CSS? - Learn web development
ure. for example, try searching for "mdn color" and "mdn font-size"! css modules as there are so many things that you could style using css, the language is broken down into modules. you'll see reference to these modules as you explore mdn and many of the documentation pages are organized around a particular module. for example, you could take a look at the mdn reference to the backgrounds and borders module to find out what its purpose is, and what different properties and other features it contains. you will also find links to the css specification that defines the technology (see below). at this stage you don't need to worry too much about how css is structured, however it can make it easier to find information if, for example, you are aware that a certain property is likely to be found a...
...cification that defines the technology (see below). at this stage you don't need to worry too much about how css is structured, however it can make it easier to find information if, for example, you are aware that a certain property is likely to be found among other similar things and are therefore probably in the same specification. for a specific example, let's go back to the backgrounds and borders module — you might think that it makes logical sense for the background-color and border-color properties to be defined in this module. and you'd be right. css specifications all web standards technologies (html, css, javascript, etc.) are defined in giant documents called specifications (or simply "specs"), which are published by standards organizations (such as the w3c, whatwg, ecma, or kh...

Fundamental text and font styling - Learn web development
ou can either do this using offline html/css files, or enter your code into the live editable example below. if you make a mistake, you can always reset it using the reset button. ...
... code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p { } </textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </div> </div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); ...

Learn to style HTML using CSS - Learn web development
you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more. the aim here is to provide you with a toolkit for writing competent css and help you understand all the essential theory, before moving on to more specific disciplines like text styling and css layout. styling text with the basics of the css language covered, the next css topic for you to concentrate on is styling text — one of the most common things you'll do ...
...e legacy techniques you might still want to know about. solving common css problems use css to solve common problems provides links to sections of content explaining how to use css to solve very common problems when creating a web page. from the beginning, you'll primarily apply colors to html elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. but there's not much you can't do once you have a solid understanding of even the basics of css. one of the best things about learning css is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet! "css is weird" css works a bit differently to most programming languages and design to...

Example - Learn web development
<em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { bo...
...t-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; } result ...

Test your skills: Advanced styling - Learn web development
t the bottom of this page. advanced form styling 1 in our first advanced styling tasks, we want you to handle making a search input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers. we've already provided you with a basic reset to build upon. first of all, try giving the search box a consistent width, height, padding, and border color across browsers. you'll find that some browsers will not behave in terms of the form element's height. this is due to native os styling being used in some cases. how can you remove this native styling? once you've removed the native styling, you'll need to add back one of the features it was providing, to keep same look and feel we originally had. how do you do this? one thing that is in...
.... we want you to give them custom styling. we've already provided you with a basic reset to build upon. first of all, get rid of their default styling. next, give the radio buttons a reasonable base style — the style they have when the page first loads. this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background color. now give the radio buttons a different style for when they are selected. align the radio buttons nicely with the labels. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 3 in our final task for this assessment series, we provide y...

Example - Learn web development
id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* ...
...bel { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* t...

HTML table basics - Learn web development
mation for an entire column of data all in one place — the <col> and <colgroup> elements. these exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as :nth-child(). note: styling columns like this is limited to a few properties: border, background, width, and visibility. to set other properties you'll have to either style every <td> or <th> in the column, or use a complex selector such as :nth-child(). take the following simple example: <table> <tr> <th>data 1</th> <th style="background-color: yellow">data 2</th> </tr> <tr> <td>calcutta</td> <td style="background-color: yellow">orange</td> </tr> <tr...
... first two columns need to be left unstyled. add a background color to the third column. the value for your style attribute is background-color:#97db9a; set a separate width on the fourth column. the value for your style attribute is width: 42px; add a background color to the fifth column. the value for your style attribute is background-color: #97db9a; add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. the values for your style attribute are background-color:#dcc48e; border:4px solid #c1437a; the last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px; see how you get on with the example. if you get stuck, or want to check y...

What is JavaScript? - Learn web development
pt code.) the three layers build on top of one another nicely. let's take a simple text label as an example. ...
...ve it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try clicking on this last version of the ...

Gecko Roles
cument window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used featur...
...dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. may use the directory pane to show the contents of a directory. role_font_chooser a font chooser. a font chooser is a component that lets the user pick various attributes for fonts. role_chrome_window frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. role_html_container a document container for html, whose children represent the document content. role_icon a small fixed size picture, typically used to decorate components. role_label pres...

nsIAccessibleRole
rrent pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". role_separator 21 used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. it...
...s in the directory and lets the user select a file, browse a different directory, or specify a filename. may use the directory pane to show the contents of a directory. also refer to role_directory_pane. role_font_chooser 74 a font chooser. a font chooser is a component that lets the user pick various attributes for fonts. role_chrome_window 75 frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane 76 a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. also refer to role_root_pane. role_html_container 77 a document container for html, whose children represent the document content. role_icon 78 a small fixed size picture, typically used to decorate components. ...

Examine and edit CSS - Firefox Developer Tools
ck the "x" at the end of the search box to remove the filter. while in the rules view, you can press ctrl / cmd + f to focus the search field. once you've typed in a filter, you can press esc to remove it again. strict search by default, the search box highlights all declarations which contain any part of the string. for example, searching for "color" will highlight declarations containing border-bottom-color and background-color as well as just color.: if you enclose the search query in backticks, like this: `color`, the search is restricted to exact matches: expanding shorthand properties shorthand properties can be expanded to display their related longhand properties by clicking the arrow besides them. displaying pseudo-elements the rule view displays the following pseudo-ele...
...the new settings to page the edited rule into your stylesheet. right-click on the changes panel and select copy rule from the context menu. the copy rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. for example, copying the changes in the preceding image, you get the following: .text-content p { box-sizing:border-box; max-width:24rem; text-decoration: underline; color: cadetblue; font-weight: bold; } add rules you can add new rules in the rules view. just right-click to show the context menu and select "add rule". this will add a new css rule whose selector matches the currently selected node. there's also a button that enables you to do the same thing: copy rules to copy rules, and pieces of...

BroadcastChannel: message event - Web APIs
xtarea> when the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
...; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> <div id="received"></div> body { bo...

Determining the dimensions of elements - Web APIs
that decision. note that all these properties are read-only. if you want to set the width and height of an element, use width and height or the overriding min-width and max-width, and min-height and max-height properties. how much room does it use up? if you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the htmlelement.offsetwidth and htmlelement.offsetheight properties. most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element. in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and...
...t, while getboundingclientrect() returns the rendering width and height. as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100. what's the size of the displayed content? if you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big is the content? if you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the element.scrollwidth and element.scrollheight properties. these return the width and height of the entire content of an element, even if only part ...

Using dynamic styling information - Web APIs
.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue", or directly for that element using element.style.propertyname, even though there may be other styles on the element from a stylesheet). also, when you set this property on an element, you override any styles that have been set elsewhere for that element's particular property you are setting. setting the border property, for example, will override settings made elsewhere for that element's border property in the head section, or external style sheets. however, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example. to change a particular element's style, you can adapt the following example for the element(s) you want to style. <ht...
...cular element's style, you can adapt the following example for the element(s) you want to style. <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" onclick="alterstyle(this);"> click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button onclick="resetstyle('p1');">reset background color</button> </body> </html> the getcomputedstyle() method on the doc...

Basic usage of canvas - Web APIs
explicitly in the <canvas> attributes, and not using css. the id attribute isn't specific to the <canvas> element but is one of the global html attributes which can be applied to any html element (like class for instance). it is always a good idea to supply an id because this makes it much easier to identify it in a script. the <canvas> element can be styled just like any normal image (margin, border, background…). these rules, however, don't affect the actual drawing on the canvas. we'll see how this is done in a dedicated chapter of this tutorial. when no styling rules are applied to the canvas it will initially be fully transparent. fallback content the <canvas> element differs from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fallb...
...re to keep the example concise. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document. this function, or one like it, could also be called using window.settimeout(), window.setin...

DataTransfer.dropEffect - Web APIs
ies. html content <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...
...e" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...

DataTransfer.effectAllowed - Web APIs
ange the value to be lowercased; thus, linkmove will become linkmove, and so on. example this example shows the use of the effectallowed and dropeffect properties. ...
...ve will become linkmove, and so on. example this example shows the use of the effectallowed and dropeffect properties. ...

DataTransferItemList.DataTransferItem() - Web APIs
living standard ...
... living standard ...

DataTransferItemList.length - Web APIs
living standard html 5.1the definition of 'length' in that specification. recommendation not included in w3c html5 recommendation ...
... living standard html 5.1the definition of 'length' in that specification. recommendation not included in w3c html5 recommendation ...

DataTransferItemList.remove() - Web APIs
living standard html 5.1the definition of 'remove()' in that specification. recommendation not included in w3c html5 recommendation ...
... living standard html 5.1the definition of 'remove()' in that specification. recommendation not included in w3c html5 recommendation ...

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ng whitespace between adjacent inline elements, this will result in space in the layout, just like the spaces between words in text. ...
... the firefox devtools html inspec...

Element.clientLeft - Web APIs
the width of the left border of an element in pixels. it includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientleft does not include the left margin or the left padding. clientleft is read-only. when layout.scrollbar.side preference is set to 1 or to 3 and when the text-direction is set to rtl, then the vertical scrollbar is positioned on the left and this impacts the way clientleft is computed. note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). note: when an element has display: inline, clientleft returns 0 regardless of the element's border. syntax var left = element.clientleft...
...agna 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. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status comment css object model (cssom) view modulethe definition of 'clientleft' in that specification. working draft ...

Element.getBoundingClientRect() - Web APIs
the element.getboundingclientrect() method returns the size of an element and its position relative to the viewport. the element's size is equal to its width/height + padding + border-width in the case that the standard box model is being used, or width/height only if box-sizing: border-box has been set on it. syntax domrect = element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element. the result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. properties other than width and height are relative to the to...
...rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element. the result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. properties other than width and height are relative to the top-left of the viewport. empty border-boxes are completely ignored. if all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first css box (in content order) for the element. the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bou...

ElementCSSInlineStyle.style - Web APIs
e setting the style using elt.style.<property> (i.e., elt.style.fontsize, not elt.style.font-size). a style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. ...
...ze, not elt.style.font-size). a style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. ...

Using files from web applications - Web APIs
new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.result; }; })(img); reader.readasdataurl(file); } } here our loop handling the user-selected files looks at each file's type attribute to see if its mime type begins with the string "image/"). for each file that is an image, we create a new img element. css can be used to establish any pretty borders or shadows and to specify the size of the image, so that doesn't need to be done here. each image has the css class obj added to it, making it easy to find in the dom tree. we also add a file attribute to each image specifying the file for the image; this will let us fetch the images for actual upload later. we use node.appendchild() to add the new thumbnail to the preview area of our document.
... in firefox, to have the pdf appear embedded in the iframe (rather than proposed as a downloaded file), th...

GlobalEventHandlers.ondrag - Web APIs
draghandler the drag event handler for element targetelement. example this example includes the use of the ondrag attribute handler to set an element's drag event handler. ...
...ent targetelement. example this example includes the use of the ondrag attribute handler to set an element's drag event handler. ...

GlobalEventHandlers.ondragover - Web APIs
r the dragover event handler for element targetelement. example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler. ...
...getelement. example this example demonstrates using the ondragover attribute handler to set an element's dragover event handler. ...

GlobalEventHandlers.ondragstart - Web APIs
the dragstart event handler for element targetelement. example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler. ...
...telement. example this example demonstrates using the ondragstart attribute handler to set an element's dragstart event handler. ...

GlobalEventHandlers.ondrop - Web APIs
drophandler the drop event handler for element targetelement. example this example demonstrates the use of the ondrop attribute to define an element's drop event handler. ...
...ment targetelement. example this example demonstrates the use of the ondrop attribute to define an element's drop event handler. ...

GlobalEventHandlers.onmousemove - Web APIs
ent. examples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
...this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...

GlobalEventHandlers.onmouseup - Web APIs
when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
..."></div> <div class="toast">hello world!</div> </div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px; padding: 10px; background: #ed9; border-radius: 10px 10px 0 0; transform: translate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown...

GlobalEventHandlers.ontransitioncancel - Web APIs
vent to fire. html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. ...
...is simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. ...

GlobalEventHandlers.ontransitionend - Web APIs
of reactions. html this simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. ...
...is simply creates a <div> which we'll style with css below to make into a box that resizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it. ...

HTMLElement.offsetHeight - Web APIs
it does not include the height of pseudo-elements such as ::before or ::after. for the document body object, the measurement includes total linear content height instead of the element's css height. floated elements extending below other linear content are ignored. if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned. ...
...rollable container. specification specification status comment css object model (cssom) view modulethe definition of 'offsetheight' in that specification. working draft notes offsetheight is a property of the dhtml object model which was first introduced by msie. it is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height. ...

HTMLElement.offsetWidth - Web APIs
it does not include the width of pseudo-elements such as ::before or ::after. if the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned. ...
...trect(). example specification specification status comment css object model (cssom) view modulethe definition of 'offsetwidth' in that specification. working draft notes offsetwidth is a property of the dhtml object model which was first introduced by msie. it is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box width. ...

HTMLIFrameElement - Web APIs
htmliframeelement.contentdocument read only returns a document, the active document in the inline frame's nested browsing context. htmliframeelement.contentwindow read only returns a windowproxy, the window proxy for the nested browsing context. htmliframeelement.csp specifies the content security policy that an embedded document must agree to enforce upon itself. htmliframeelement.frameborder is a domstring that indicates whether to create borders between frames. htmliframeelement.height is a domstring that reflects the height html attribute, indicating the height of the frame. htmliframeelement.longdesc is a domstring that contains the uri of a long description of the frame. htmliframeelement.marginheight is a domstring being the height of the frame margin. htmliframeel...
... specification status comment html living standardthe definition of 'htmliframeelement' in that specification. living standard the following property has been added: allowfullscreen. html5the definition of 'htmliframeelement' in that specification. recommendation the following properties are now obsolete: scrolling, marginwidth, marginheight, longdesc, frameborder, and align. the following properties have been added: srcdoc, sandbox, and contentwindow. document object model (dom) level 2 html specificationthe definition of 'htmliframeelement' in that specification. obsolete the contentdocument property has been added. document object model (dom) level 1 specificationthe definition of 'htmliframeelement' in that specification. ...

HTMLImageElement.srcset - Web APIs
should be used for 1x displays while the 400-pixel version should be used for 2x displays. ...
...es/16797/clock-demo-400px.png 2x"> </div> css the css simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it. also provided is the word-break attribute, using the break-all value to tell the browser to wrap the string within the width available regardless of where in the string the wrap must occur. .box { width: 200px; border: 2px solid rgba(150, 150, 150, 255); padding: 0.5em; word-break: break-all; } .box img { width: 200px; } javascript the following code is run within a handler for the window's load event. it uses the image's currentsrc property to fetch and display the url selected by the browser from the srcset. let box = document.queryselector(".box"); let image = box.queryselector("img"); let newe...

HTMLObjectElement - Web APIs
htmlobjectelement.align is a domstring representing an enumerated property indicating alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", "justify", and "center". htmlobjectelement.archive is a domstring that reflects the archive html attribute, containing a list of archives for resources for this object. htmlobjectelement.border is a domstring that reflects the border html attribute, specifying the width of a border around the object. htmlobjectelement.code is a domstring representing the name of an applet class file, containing either the applet's subclass, or the path to get to the class, including the class file itself. htmlobjectelement.codebase is a domstring that reflects the codebase html attribute, spe...
...andardthe definition of 'htmlobjectelement' in that specification. living standard html5the definition of 'htmlobjectelement' in that specification. recommendation the w3c specification is a latest of a previous version of html living standard technically, the property tabindex is now defined on htmlelement. the following properties are now obsolete: align, archive, border, code, codebase, codetype, declare, hspace, standby, and vspace. the following properties have been added: typemustmatch, contentwindow, willvalidate, validity, and validationmessage. the following methods have been added: checkvalidity() and setcustomvalidity(). document object model (dom) level 2 html specificationthe definition of 'htmlobjectelement' in that specification. ...

HTMLTableElement.rules - Web APIs
the htmltableelement.rules property indicates which cell borders to render in the table. ...
...tmltableelement.rules property indicates which cell borders to render in the table. ...

HTMLTableElement - Web APIs
ableelement.align is a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "center". htmltableelement.bgcolor is a domstring containing the background color of the cells. it reflects the obsolete bgcolor attribute. htmltableelement.border is a domstring containing the width in pixels of the border of the table. it reflects the obsolete border attribute. htmltableelement.cellpadding is a domstring containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. it reflects the obsolete cellpadding attribute. htmltableelement.cellspacing is a domstring containing the width in pixe...
...dth in pixels of the horizontal and vertical sapce between cell content and cell borders. it reflects the obsolete cellpadding attribute. htmltableelement.cellspacing is a domstring containing the width in pixels of the horizontal and vertical separation between cells. it reflects the obsolete cellspacing attribute. htmltableelement.frame is a domstring containing the type of the external borders of the table. it reflects the obsolete frame attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border". htmltableelement.rules is a domstring containing the type of the internal borders of the table. it reflects the obsolete rules attribute and can take one of the following values: "none", "groups", "rows", "cols", or "...

Using IndexedDB - Web APIs
<div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> </div> </form> <div> <div id="pub-msg"> </div> <div id="pub-viewer"> </div> <ul id="pub-list"> </ul> </div> css content body { font-size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer ifram...
...order-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: right; width: 48%; height: 20em; border: solid #d092ff 0.1em; } #pub-viewer iframe { width: 100%; height: 100%; } #pub-list { width: 46%; background-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .note { font-size: smaller; } .destruc...

Recording a media element - Web APIs
have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...
...ls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...

Using Navigation Timing - Web APIs
document.queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element. html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above. for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section. determining navigation type to put the...
...tion took place: a navigation, a reload, or a shift through the browser's history. we also obtain the number of redirects that were incurred during the navigation from performance.navigation.redirectcount. this information is output to the screen just like the page load time was previously: by inserting it into the element with class "output". html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented. ...

Node.isEqualNode() - Web APIs
example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using isequalnode() and output the results. ...
...iv> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using isequalnode() and output the results. ...

Node.isSameNode() - Web APIs
example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using issamenode() and output the results. ...
...div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using issamenode() and output the results. ...

Using Pointer Events - Web APIs
on the surface. example the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. ...
...ng at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your browser does not support canvas element. </canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system). function startup() { var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("pointerdown", handlestar...

ResizeObserver.observe() - Web APIs
nt. syntax resizeobserver.observe(target, options); parameters target a reference to an element or svgelement to be observed. options optional an options object allowing you to set options for the observation. currently this only has one possible option that can be set: box sets which box model the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. examples the following snippet is taken from the resize-observer-text.html (see source) example: const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, e...
... editor's draft initial definition. ...

Using the Screen Capture API - Web APIs
o request access to, and begin capturing, screen contents. a second button, "stop capture", which upon being clicked calls stopcapture() to terminate capture of screen contents. a <video> into which the captured screen contents are streamed. a <pre> block into which logged text is placed by the intercepted consolemethod. css the css is entirely cosmetic in this example. ...
... is placed by the intercepted consolemethod. css the css is entirely cosmetic in this example. the video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). max-width is set to 860px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to style the corresponding console output types. #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; } result the final product looks like this. if your browser supports screen capture api, clicking "start capture" will present the user agent's interface for selecting a screen, window, or tab to share. security in order to function when feature policy is e...

WebGLRenderingContext.copyTexImage2D() - Web APIs
possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cube-mapped texture. gl.texture_cube_map_negative_x: negative x face for a cube-mapped texture. ...
... luminance component, alpha is 1.0. gl.luminance_alpha: each component is a luminance/alpha component. x a glint specifying the x coordinate of the lower left corner where to start copying. y a glint specifying the y coordinate of the lower left corner where to start copying. width a glsizei specifying the width of the texture. height a glsizei specifying the height of the texture. border a glint specifying the width of the border. must be 0. return value none. examples gl.copyteximage2d(gl.texture_2d, 0, gl.rgba, 0, 0, 512, 512, 0); specifications specification status comment webgl 1.0the definition of 'copyteximage2d' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glcopyteximage2d' in that...

Using textures in WebGL - Web APIs
; // because images have to be download over the internet // they might take a moment until they are ready. // until then put a single pixel in the texture so we can // use it immediately. when the image has finished downloading // we'll update the texture with the contents of the image. ...
...wnloading // we'll update the texture with the contents of the image. ...

Window.open() - Web APIs
er can specify the position and size of the new window. note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. left or screenx specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. the new window cannot be initially positioned offscreen. top or screeny specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. the new window cannot be initially positioned offscreen. if the windowfeatures parameter...
...es are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window. browser-dependent size features do not use them. outerwidth (only on firefox, obsolete from firefox 80) specifies the width of the whole browser window in pixels. this outerwidth value includes the window vertical scrollbar (if present) and left and right window resizing borders. outerheight (only on firefox, obsolete from firefox 80) specifies the height of the whole browser window in pixels. this outerheight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. minimal required value is 100. toolbar and ui parts features in modern browsers (firefox 76 or newer, google chrome, safari, chromium...

Generating HTML - Web APIs
ching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... ...
...xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class...

ARIA: grid role - Accessibility
29 </td> </tr> <tr role="row"> <th scope="row" role="rowheader">week 40</th> <td role="gridcell" tabindex="-1"> 30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } } javascript var selectables = document.
...ole="gridcell" tabindex="-1"> 4 </td> <td role="gridcell" tabindex="-1"> 5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5px; } tbody td { border: 1px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3px solid blue; } javascript var selectables = document.querysele...

ARIA: button role - Accessibility
ndlebtnkeydown()"> mute audio </button> <span role="button" tabindex="0" aria-pressed="false" onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
..."handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...

Basic form hints - Accessibility
for more guidance on using aria for forms accessibility, see the wai-aria authoring practices document. ...
... for more guidance on using aria for forms accessibility, see the wai-aria authoring practices document. ...

Keyboard-navigable JavaScript widgets - Accessibility
rmation about aria, see this overview of accessible web applications and widgets.) the aria-activedescendant property identifies the id of the descendent element that currently has the virtual focus. the event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). see the source code of this aria radiogroup example for a direct illustration of how this works. general guidelines use onkeydown to trap key events, not onkeypress ie will not fire keypress events for non-alphanumeric keys. use onkeydown instead. ensure that keyboard and mouse produce the same experience to ensure that the user experience is consistent regardless of in...
...() to the key down event as well: onkeydown="return event.keycode != 13 || dosomething();". always draw the focus for tabindex="-1" items and elements that receive focus programatically ie will not automatically draw the focus outline for items that programatically receive focus. choose between changing the background color via something like this.style.backgroundcolor = "gray"; or add a dotted border via this.style.border = "1px dotted invert". in the dotted border case you will need to make sure those elements have an invisible 1px border to start with, so that the element doesn't grow when the border style is applied (borders take up space, and ie doesn't implement css outlines). prevent used key events from performing browser functions if your widget handles a key event, prevent the brow...

::-moz-color-swatch - CSS: Cascading Style Sheets
...
... ...

::-webkit-progress-inner-element - CSS: Cascading Style Sheets
element css pseudo-element represents the outermost container of the <progress> element. it is the parent of the ::-webkit-progress-bar pseudo-element. note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element. syntax ::-webkit-progress-inner-element examples these examples work only on blink and webkit. ...
... of the <progress> element. it is the parent of the ::-webkit-progress-bar pseudo-element. note: in order to let ::-webkit-progress-value take effect, -webkit-appearance needs to be set to none on the <progress> element. syntax ::-webkit-progress-inner-element examples these examples work only on blink and webkit. adding a black border around the progress bar in this example, a 2px black border is added around the progress bar. html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { border: 2px solid black; } result result screenshot if you're not using a blink or webkit browsear, the above code resuls in a progress bar looking like this: specifications not part of any standard. ...

::after (:after) - CSS: Cascading Style Sheets
olor: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">look at the orange box after this text. </span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. no javascript is required! we can also support keyboard users with this technique, by adding a tabindex of 0 to make each span keyboard focusable, and using a css :focus selector. this shows how flexible ...
...ctuation">text</span> with a few <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>. </p> css span[data-descr] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification. working draft no significant changes to the previous specification. css animatio...

::before (:before) - CSS: Cascading Style Sheets
::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements. this method can often be used to add small touches to the ui and improve user experience. html <ul> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list...
...> <li>buy milk</li> <li>take the dog for a walk</li> <li>exercise</li> <li>write code</li> <li>play music</li> <li>relax</li> </ul> css li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; transform: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code...

::first-letter (:first-letter) - CSS: Cascading Style Sheets
all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css p...
...idunt ut labore et dolore magna aliquyam erat, sed diam voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters. html <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> <p>-the...

:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no">...
... </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show...

:in-range - CSS: Cascading Style Sheets
ither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...
... living standard defines when :in-range matches elements in html. selectors level 4the ...

:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id matching the url's fragment. /* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents. html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> ...
...caption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status comment html living standardthe definition of ':target' in tha...

:valid - CSS: Cascading Style Sheets
we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cro...
...ore { content: '✓'; color: green; } we set the <span>s to position: relative so that we can position the generated content relative to them. we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, respectively. to add a bit of extra urgency to the invalid data, we've also given the inputs a thick red border when invalid. note: we've used ::before to add these labels, as we were already using ::after for the "required" labels. you can try it below: notice how the required text inputs are invalid when empty, but valid when they have something filled in. the email input on the other hand is valid when empty, as it is not required, but invalid when it contains something that is not a proper email...

:visited - CSS: Cascading Style Sheets
cificity. to style links appropriately, put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active. styling restrictions for privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color. allowable svg attributes are fill and stroke. the alpha component of the allowed styles will be ignored. the alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case ...
...s, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector. html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status comment html living standardthe definition of ':visited' in that specification. living standard selectors level 4the definition of ':visited' in that specification. working draft no change. ...

pointer - CSS: Cascading Style Sheets
he primary input mechanism includes an accurate pointing device. examples this example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers. ...
...sers with coarse primary pointers. html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment media queries level 4the definition of 'pointer' in that specification. candidate recommendation initial definition. ...

CSS Animations tips and tricks - CSS: Cascading Style Sheets
ine the html for a <div> we wish to animate and a button that will play (or replay) the animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. ...
...the "box" class is the basic description of the box's appearance, without any animation information included. ...

Mastering margin collapsing - CSS: Cascading Style Sheets
e of them, if they are equal), a behavior known as margin collapsing. note that the margins of floating and absolutely positioned elements never collapse. margin collapsing occurs in three basic cases: adjacent siblings the margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats). no content separating parent and descendants if there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of one or more of its descendant blocks; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of one or more of its descendant blocks, then those margins collapse. the collapsed margin en...
... some things to note: more complex margin collapsing (of more than two margins) occurs when the above cases are combined. ...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
atting context collapse. in a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).” - 9.4.1 for elements with an inline formatting context: “in an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. horizontal margins, borders, and padding are respected between these boxes. the boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. the rectangular area that contains the boxes that form a line is called a line box.” - 9.4.2 note that the css 2.1 specification describes documents as being in a horizontal, top to bottom writing mod...
...ly. in this guide, we will be working in english and therefore a horizontal writing mode. however, everything described should work in the same way if your document is in a vertical writing mode. as defined in the specification, the margins between two block boxes are what creates separation between the elements. we see this with a very simple layout of two paragraphs, to which i have added a border. the default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom. if we set margins on the paragraph element to 0 then the borders will touch. by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. if we give them a width, they w...

Using z-index - CSS: Cascading Style Sheets
-index: 2; </div> <div id="abs2"> <b>div #4</b> <br />position: absolute; <br />z-index: 1; </div> <div id="sta1"> <b>div #5</b> <br />no positioning <br />z-index: 8; </div> css div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1...
... position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70px; border: 1px dashed #996; background-color: #ffc; margin: 0px 50px 0px 50px; } ...

Stacking context example 1 - CSS: Cascading Style Sheets
ute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70...
...lor: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } result ...

Stacking context example 2 - CSS: Cascading Style Sheets
are collapsed on their parent. ...
...e="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span...

Stacking context example 3 - CSS: Cascading Style Sheets
utely positioned container. this is useful to group and position all of them at once. ...
..."text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position: relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span...

Stacking without the z-index property - CSS: Cascading Style Sheets
in the example below, elements #1 through #4 are positioned elements. ...
...: absolute;</div> <div id="rel1" class="relative"> <b>div #2</b><br />position: relative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top...

CSS Table - CSS: Cascading Style Sheets
css table is a css module that defines how to lay out table data. ...
... css table is a css module that defines how to lay out table data. ...

Layout and the containing block - CSS: Cascading Style Sheets
ining block. most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. in this article, we examine the factors that determine an element's containing block. when a user agent (such as your browser) lays out a document, it generates a box for every element. each box is divided into four areas: content area padding area border area margin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. effects of the containing block before learning what determines the containing block of an element, it's useful to know why it matters in the first plac...
...ray; } p { width: 50%; /* == half the body's width */ height: 200px; /* note: a percentage would be 0 */ background: cyan; } example 3 in this example, the paragraph's containing block is <section> because the latter's position is absolute. the paragraph's percentage values are affected by the padding of its containing block, though if the containing block's box-sizing value were border-box this would not be the case. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { position: absolute; left: 30px; top: 30px; width: 400px; height: 160px; padding: 30px 20px; background: lightgray; } p { position: absolute; width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */ height: 25%; /* == (160px + ...

Inline formatting context - CSS: Cascading Style Sheets
ing 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: in a horizontal writing mode, boxes are laid out horizontally, starting on the left. in a vertical writing mode they would be laid out vertically starting at the top. in the example below, the two (<div>) elements with the black borders form a 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. boxes 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 ...
...l writing mode boxes run vertically. boxes 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. when an inline box is split, margins, borders, and padding have no visual effect where the split occurs. in the next example there is a (<span>) element wrapping a set of words wrapping onto two lines. the border on the <span> breaks at the wrapping point. margins, 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 <span> element are added. no...

Actual value - CSS: Cascading Style Sheets
calculating a property's actual value the user agent performs four steps to calculate a property's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value. ...
... calculating a property's actual value the user agent performs four steps to calculate a property's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value. ...

animation-timing-function - CSS: Cascading Style Sheets
div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-function: ease-in-out; } .l...
...ss="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .jump-start { animation-timing-function: steps(5, jump-start); } .jump-end { animation-timing-function: steps(5, jump-end); } .jump-none { animation-timing-function: steps(5, jump-none); } .jump-both {...

animation - CSS: Cascading Style Sheets
in;</div> <div class="animation a2"></div> </div> </div> <div class="row"> <div class="cell"> <button class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%20...
...c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } } .a1 { animation: 3s ease-in 1s...

backface-visibility - CSS: Cascading Style Sheets
hree back faces (2, 4, 5) are hidden. ...
... backface-visibility: hidden; } /* define the container div, the cube div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform...

background-attachment - CSS: Cascading Style Sheets
sm, the background doesn't move with the element. (this is not compatible with background-clip: text.) local the background is fixed relative to the element's contents. if the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them. scroll the background is fixed relative to the element itself and does not scroll with its contents. (it is effectively attached to the element's border.) formal definition initial valuescrollapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scr...
... candidate recommendation the shorthand property has been extended to support multiple backgrounds and the local value. css level 2 (revision 1)the definition of 'background-attachment' in that specification. recommendation no significant change. css level 1the definition of 'background-at...

background-image - CSS: Cascading Style Sheets
es on an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the background images are drawn on stacking context layers on top of each other. the first layer specified is drawn as if it is closest to the user. the borders of the element are then drawn on top of them, and the background-color is drawn beneath them. how the images are drawn relative to the box and its borders is defined by the background-clip and background-origin css properties. if a specified image cannot be drawn (for example, when the file denoted by the specified uri cannot be loaded), browsers handle it as they would a none value. note: eve...
... candidate recommendation from css2 revision 1, the property has been extended to support multiple backgrounds and any <image> css data type. css level 2 (revision 1)the definition of 'background-image' in that specification. recommendation from css1, the way images with and without intrinsic dimensions...

caption-side - CSS: Cascading Style Sheets
editor's draft defines the top and bottom values as relative to the writing-mode value. css level 2 (revision 1)the definition of 'caption-side' in th...
... editor's draft defines the top and bottom values as relative to the writing-mode value. css level 2 (revision 1)the definition of 'caption-side' in that specification. recommendati...

column-rule-style - CSS: Cascading Style Sheets
the column-rule-style css property sets the style of the line drawn between columns in a multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...umn-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset; the column-rule-style property is specified as a single <'border-style'> value. values <'border-style'> is a keyword defined by border-style describing the style of the rule. the styling must be interpreted as in the collapsing border model. formal definition initial valuenoneapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-style'> examples setting a dashed column rule html <p>this is a ...

empty-cells - CSS: Cascading Style Sheets
the empty-cells css property sets whether borders and backgrounds appear around <table> cells that have no visible content. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has an effect only when the border-collapse property is separate. syntax /* keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below. values show borders and backgrounds are drawn like in normal cells. hide no borders or backgrounds are drawn. formal definition ...
... recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check o...

env() - CSS: Cascading Style Sheets
sensitive. formal syntax env( <custom-ident> , <declaration-value>? ) examples the below example makes use of the optional second parameter of env(), which allows you to provide a fallback value in case the environment variable is not available. ...
... if the <code>env()</code> function is supported in your browser, this paragraph’s text will have 50px of padding between it and the left border — but not the top, right and bottom. this is because the accompanying css is the equivalent of <code>padding: 0 0 0 50px</code>, because, unlike other css properties, user agent property names are case-sensitive. ...

flex-grow - CSS: Cascading Style Sheets
candidate recommendation initial definition ...
... candidate recommendation initial definition ...

gap (grid-gap) - CSS: Cascading Style Sheets
rties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>? ...
... don't you think that's fun and exciting? i sure do! </p> css .content-box { column-count: 3; gap: 40px; } result specifications specification status comme...

height - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-height and max-height properties override height. ...
...ontent | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent. </div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification. editor's draft css box sizing module level 3the definition of 'height'...

<length-percentage> - CSS: Cascading Style Sheets
ength> and <percentage> for details of the individual syntaxes allowed by this type. examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. ...
...he following simple example demonstrates several properties that use <length-percentage> values. html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200...

<length> - CSS: Cascading Style Sheets
note: although <percentage> values are also css dimensions, and are usable in some of the same properties that accept <length> values, they are not themselves <length> values. see <length-percentage>. syntax the <length> data type consists of a <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. ...
...pear below it once you've pressed return. this allows you to compare and contrast the effect of different length units. ...

line-height - CSS: Cascading Style Sheets
stream charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well. prefer unitless numbers for line-height values this example shows why it is better to use <number> values instead of <length> values. we will use two <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 ems. html <div class="box green"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <div class="box red"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage ...
...oid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <!-- the first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px --> <!-- the second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> css .green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size: 30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px; } result specifications specification status comment css level 2 (revision 1)the definition of 'line-height' in that specification. recommendation no change. cs...

margin-left - CSS: Cascading Style Sheets
he source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. in 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. syntax /* <length> values */ margin-left: 10px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: aut...
...his case, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption left or right static or relative 0 block layout mode (floating element) any table-*, except table-caption any any 0 internal table-* elements don't have margins, use border-spacing instead any, except flex, inline-flex, or table-* any fixed or absolute 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the border area inside the available width, if fixed. absolutely positioned layout mode flex, inline-flex any any 0, except if there is any positive horizon...

mask-type - CSS: Cascading Style Sheets
//www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="r...
... candidate recommendation initial definition. ...

mix-blend-mode - CSS: Cascading Style Sheets
viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note {...
...lend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend-mode with svg svg <svg> ...

offset-path - CSS: Cascading Style Sheets
est-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<path()> = path( [ <fill-rule>, ]? <string> )<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <length-percentage> = <length> | <percentage><fill-rule> = nonzero | evenodd<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )<shape-box> = <box> | margin-boxwhere <shape-radius> = <length-percentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] |...
...the path, as can be seen in the rendering of the svg code, is a line drawing of a house with a chimney. svg the top and bottom halves of the scissors would appear in the top left of the canv...

outline-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
...e: the outline looks as though it were extruded from the page. inset the outline makes the box look as though it were embedded in the page. outset the opposite of inset: the outline makes the box look as though it were coming out of the page. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — 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. html <div> <p class="auto">outline demo</p> </div> css...

perspective - CSS: Cascading Style Sheets
iner box and the cube itself, as well as each of its faces. ...
...perspective: 650px; } /* define the container div, the cube div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform...

place-items - CSS: Cascading Style Sheets
al definition initial valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>? ...
... initial valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>? ...

scroll-margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...o place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the 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. the child elements are styled ...

scroll-margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...to place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the 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. the child elements are styled ...

scroll-margin-inline - CSS: Cascading Style Sheets
; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container. description 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. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive ex...
...o place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the 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. the child elements are styled ...

scroll-margin - CSS: Cascading Style Sheets
ing 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. thus, 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. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive ex...
...to place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. the outer container is styled like this: .scroller { text-align: left; width: 250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the 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. the child elements are styled ...

scroll-snap-coordinate - CSS: Cascading Style Sheets
roll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap point. ...
...ne specifies that the element does not contribute to a snap point. <position> 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. ...

<shape> - CSS: Cascading Style Sheets
with clip, which has been deprecated in favor of clip-path. when possible, use clip-path and the <basic-shape> data type instead. syntax the <shape> data type is specified using the rect() function, which produces a region in the form of a rectangle. ...
... syntax the <shape> data type is specified using the rect() function, which produces a region in the form of a rectangle. rect() rect(top, right, bottom, left) values top is a <length> representing the offset for the top of the rectangle relative to the top border of the element's box. right is a <length> representing the offset for the right of the rectangle relative to the left border of the element's box. bottom is a <length> representing the offset for the bottom of the rectangle relative to the top border of the element's box. left is a <length> representing the offset for the left of the rectangle relative to the left border of the element's box. interpolation when animated, values of the <shape> data type are interpolated over their top, right, bottom, and le...

transition-timing-function - CSS: Cascading Style Sheets
mples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var ...
... class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c ...

vertical-align - CSS: Cascading Style Sheets
src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a table: <table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="ver...
... syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middl...

visibility - CSS: Cascading Style Sheets
candidate recommendation defines the collapse value as it applies to flex items. css level 2 (revision 1)the definition of 'visibility' in that specification. recommend...
... candidate recommendation defines the collapse value as it applies to flex items. css level 2 (revision 1)the definition of 'visibility' in that specification. recommendation initial definition. ...

width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-width and max-width properties override width. ...
...r calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-color: red; color: white; border: 1px solid black; } .em_length { width: 20em; background-color: white; color: red; border: 1px solid black; } <div class="px_length">width measured in px</div> <div class="em_length">width measured in em</div> percentage .percent { width: 20%; background-color: silver; border: 1px solid red; } <div class="percent">width in percentage</div> max-content p.maxgreen { back...

Cross-browser audio basics - Developer guides
ill ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-color: green; width: 0; } now let's wire this thing up with javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = document.getelementbyid('loading'); var bar = document.getelemen...
... 100), 10) + "%"; }); } you should end up with something like this: seeking using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar. fortunately this isn't too difficult to implement. ...

Video player styling basics - Developer guides
nt also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons. each button has some basic styling: .controls button { border:none; cursor:pointer; background:transparent; background-size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed. since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image. simple :hover and :focu...
..."pause"] { background-image: url('data:image/png;base64,ivborw0kggoaaa ... '); } when the data-state of the button is changed, the appropriate image will also be changed. all the other buttons are treated in a similar way. progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here. it is also given a slight rounded corner for aesthetic reasons. the color property is also defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it...

<img>: The Image Embed element - HTML: Hypertext Markup Language
use the float and/or vertical-align css properties instead of this attribute. allowed values: top equivalent to vertical-align: top or vertical-align: text-top middle equivalent to vertical-align: -moz-middle-with-baseline bottom the default, equivalent to vertical-align: unset or vertical-align: initial left equivalent to float: left right equivalent to float: right border the width of a border around the image. use the border css property instead. hspace the number of pixels of white space on the left and right of the image. use the margin css property instead. longdesc a link to a more detailed description of the image. possible values are a url or an element id. note: this attribute is mentioned in the latest w3c version, html 5.2, but has been rem...
...e a name for the element. use the id attribute instead. vspace the number of pixels of white space above and below the image. use the margin css property instead. styling with css <img> is a replaced element; it has a display value of inline by default, but its default dimensions are defined by the embedded image's intrinsic values, like it were inline-block. you can set properties like border/border-radius, padding/margin, width, height, etc. on an image. <img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline. you can use the object-position property to position the image within the element's box, and the object-fit property to adjust the sizing of the image within the ...

<input type="file"> - HTML: Hypertext Markup Language
images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 580px; background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, form button { background-color: #7f9ccb; padding: 5px 10px; bor...
... next, let's walk through the javascript. in the first lines of script, we get reference...

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
<kbd>ctrl</kbd>+<kbd>n</kbd> would be perfectly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...
...tly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...

<slot> - HTML: Hypertext Markup Language
name the slot's name. a named slot is a <slot> element with a name attribute. ...
... slot is a <slot> element with a name attribute. ...

<style>: The Style Information element - HTML: Hypertext Markup Language
<body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity. <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width. <!doctype html...
... </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width. <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5px; border: 1px solid black; } </style> <style media="all and (max-width: 500px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content. permitted content text content matching the ...

Inline elements - HTML: Hypertext Markup Language
inline element's influence.</div> in this example, the <div> block-level element contains some text. within that text is a <span> element, which is an inline element. ...
... changing element levels you can change the visual presentation of an element using the cs...

Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
everything else specifies details about the gradient mask itself. applying the svg effect to (x)html is accomplished by assigning the target class defined above to an element, like this: <p class="target" style="background:li...
...ore magna aliqua.</b> ut enim ad minim veniam. </p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css. the clip path can be assigned to any element with the target class. you can make changes to the svg in real time and see them immediately affect the rendering of the html. for example, you can resize the circle in the cli...