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. ...
...rder-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. ...
...://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. 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 4 more matches

outline-width - CSS: Cascading Style Sheets
the css outline-width property sets the thickness of an element's outline. an outline is a line that is drawn around an element, outside the 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. it is often more convenient to use the shorthand property outline when defining the appearance of an outline. syntax /* keyword values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1px; outline-width: 0.1em; /* global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below. ...
... thin depends on the user agent. typically equivalent to 1px in desktop browsers (including firefox). medium depends on the user agent. typically equivalent to 3px in desktop browsers (including firefox). ...
...n the user agent. typically equivalent to 3px in desktop browsers (including firefox). thick depends on the user agent. typically equivalent to 5px in desktop browsers (including firefox). ...
...And 4 more matches

HTMLObjectElement.width - Web APIs
living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
...And 3 more matches

column-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. this property can help you create responsive designs that fit different screen sizes. ...
... 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 can help you create responsive designs that fit different screen sizes. ...
... 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 can help you create responsive designs that fit different screen sizes. especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. in horizontal text these are width, column-width, column-gap, and column-rule-width. syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below. values <le...
...And 3 more matches

scrollbar-width - CSS: Cascading Style Sheets
the scrollbar-width property allows the author to set the maximum thickness of an element’s scrollbars when they are shown. initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword. it must be one of the following values: auto the default scrollbar width for the platform. thin a thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width. none no scrollba...
...be one of the following values: auto the default scrollbar width for the platform. thin a thin scrollbar width variant on platforms that provide that option, or a thinner scrollbar than the default platform scrollbar width. none no scrollbar shown, however the element will still be scrollable. note: user agents must apply any scrollbar-width value set on the root element to the viewport. accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative. wcag criterion ...
...hanism. while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative. wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. and introduced in wcag 2.1, criterion 2.5.5 (target size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised). mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscro...
...And 3 more matches

stroke-width - SVG: Scalable Vector Graphics
the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. ...
...to be applied to the shape. ...
...to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: a percentage value is always computed as a percentage...
...And 3 more matches

DOMRectReadOnly.width - Web APIs
candidate recommendation latest spec version is an ed. ...
... candidate recommendation latest spec version is an ed. ...
... candidate recommendation latest spec version is an ed. ...
...And 2 more matches

Element.scrollWidth - Web APIs
the element.scrollwidth read-only property is a measurement of the width of an element's content, including content not visible on the screen due to overflow. the scrollwidth value is equal to the minimum width the element would require in order to fit all the content in the viewport without using a horizontal scrollbar. the width is measured in the same way as clientwidth: it includes the element's padding, but not its border, margin or vertical scrollbar (if present). it can also include the width of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for horizontal scrollbar, its scrollwidth is equal to clientwidth this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var x...
...g, but not its border, margin or vertical scrollbar (if present). it can also include the width of pseudo-elements such as ::before or ::after. if the element's content can fit without a need for horizontal scrollbar, its scrollwidth is equal to clientwidth this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var xscrollwidth = element.scrollwidth; xscrollwidth is the width of the content of element in pixels. ...
...l value, use element.getboundingclientrect(). syntax var xscrollwidth = element.scrollwidth; xscrollwidth is the width of the content of element in pixels. ...
...And 2 more matches

HTMLCanvasElement.width - Web APIs
the htmlcanvaselement.width property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. this is one of the two properties, the other being htmlcanvaselement.height, that controls the size of the canvas. ...
...selement.width property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. this is one of the two properties, the other being htmlcanvaselement.height, that controls the size of the canvas. ...
... property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. this is one of the two properties, the other being htmlcanvaselement.height, that controls the size of the canvas. ...
...And 2 more matches

HTMLImageElement.width - Web APIs
the width property of the htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image. syntax htmlimageelement.width = newwidth; let width = htmlimageelement.width; value an integer value indicating the width of the image. the terms in which the width is defined depends on whether the image is being rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. ...
... the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. ...
...xample, two different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the window's...
...And 2 more matches

SVGImageElement.width - Web APIs
candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
...And 2 more matches

VisualViewport.width - Web APIs
draft initial definition. ...
... draft initial definition. ...
... draft initial definition. ...
...And 2 more matches

device-width - CSS: Cascading Style Sheets
candidate recommendation deprecated in media queries level 4. ...
... candidate recommendation deprecated in media queries level 4. ...
... candidate recommendation deprecated in media queries level 4. ...
...And 2 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. ...
...rder-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 elementsinheritednopercentageslogical-wid...
...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 2 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 elementsinherit...
.../* <'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. ...
...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 2 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. ...
...rder-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 elementsinheritednopercentageslogical-...
...'> 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. ...
...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: ...
...ne 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. ...
...ementation-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 valu...
...e 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. ...
...mentation-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-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 ...
...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. ...
...lementation-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

markerWidth - SVG: Scalable Vector Graphics
a value of zero disables rendering of the element and negative values are an error. ...
... a value of zero disables rendering of the element and negative values are an error. ...
...is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. only one element is using this attribute: <marker> usage notes value <length-percentage> | <number> default value 3 animatable yes <length-percentage> this value defines either an absolute or a relative width of the marker. ...
...And 2 more matches

-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-text-stroke-width css property specifies the width of the stroke for text. syntax /* keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. ...
...oke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. ...
...xt-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification. living standar...
...roke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification. living standard initial standardization safari css reference '-webkit-text-stroke-width' in that document. non-standard unofficial documentation initial documentation ...

width - CSS: Cascading Style Sheets
the width css media feature can be used to test the width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and max-width variants to query minimum and maximum values, respectively. ...
...ure can be used to test the width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and max-width variants to query minimum and maximum values, respectively. ...
...width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and max-width variants to query minimum and maximum values, respectively. examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status comment media queries level 4the definition of 'width' in that specification. candid...
... recommendation initial definition. ...

max-width - CSS: Cascading Style Sheets
the max-width css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule. by default, the width is set as close as possible to the initial viewport considering the maximum width constraint. syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
...> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. ...
... working draft initial definition ...
...percentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status comment css device adaptationthe definition of '"max-width" descriptor' in that specification. working draft initial definition ...

min-width - CSS: Cascading Style Sheets
the min-width css descriptor specifies the minimum width of the viewport of a document defined via @viewport. by default, min-width is set as close as possible to the initial viewport considering the minimum width constraint. syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
... auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. ...
... working draft initial definition ...
...opercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification. working draft initial definition ...

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...
...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. ...
...er-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. ...
...idth of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> 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: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification. editor's draft initial definition ...

width - Archive of obsolete content
« xul reference home width type: string (representing an integer) the preferred width of the element. the value should not include a unit as all values are in pixels. the actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. the css width property may also be used. in this example, the preferred width of the inner hbox will be displayed at 40 pixels. the displayed width is also 40 pixels as no flexibility or alignment applies. ...
...actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. the css width property may also be used. in this example, the preferred width of the inner hbox will be displayed at 40 pixels. the displayed width is also 40 pixels as no flexibility or alignment applies. <hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label. ...
...ner hbox will be displayed at 40 pixels. the displayed width is also 40 pixels as no flexibility or alignment applies. <hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed size of the box will be larger to accommodate the larger label. <vbox width="30" align="start" style="background-color: red;"> <label value="vbox xul width 10px red"/> </vbox> note: when used on treecol objects, the width attribute can be used to allow a tree to be scrolled horizontally if the column widths add up to be wider than the containing object. ...

CanvasRenderingContext2D.lineWidth - Web APIs
the canvasrenderingcontext2d.linewidth property of the canvas 2d api sets the thickness of lines. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linewidth = value; options value a number specifying the line width, in coordinate space units. zero, negative, infinity, and nan values are ignored. this value is 1.0 by default. examples changing line width this example draws a line and a rectangle, using a line width of 15 units. ...
...number specifying the line width, in coordinate space units. zero, negative, infinity, and nan values are ignored. this value is 1.0 by default. examples changing line width this example draws a line and a rectangle, using a line width of 15 units. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial. ...
...d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial. specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.linewidth' in that specification. living standard ...

HTMLVideoElement.videoWidth - Web APIs
the htmlvideoelement interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels. in simple terms, this is the width of the media in its natural size. see about intrinsic width and height for more details. syntax width = htmlvideoelement.videowidth; value an integer value specifying the intrinsic width of the video in css pixels. if the element's readystate is htmlmediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame size information is yet available. about intrinsic width and height a user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including: the media's aspect ratio. ...
...eo> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler for the resize event that resizes the <video> element to match the intrinsic size of its contents. let v = document.getelementbyid("myvideo"); v.addeventlistener("resize", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero. this avoids applying invalid changes when there's no true information available yet for dimensions. specifications specification status comment html living standardthe de...
... && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero. this avoids applying invalid changes when there's no true information available yet for dimensions. specifications specification status comment html living standardthe definition of 'htmlvideoelement.videowidth' in that specification. living standard html5the definition of 'htmlvideoelement.videowidth' in that specification. recommendation initial definition. ...

imageWidth - Web APIs
working draft 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 out https://github.com/mdn/browser-compat-data and send us a pull request. ...
... working draft 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 out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...tion. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

PointerEvent.width - Web APIs
the width read-only property of the pointerevent interface represents the width of the pointer's contact geometry along the x-axis, measured in css pixels. depending on the source of the pointer device (such as a finger), for a given pointer, each event may produce a different value. if the input hardware cannot report the contact geometry to the browser, the width defaults to 1. syntax var contactwidth = pointerevent.width; return value contactwidth the width of the event's contact area (in css pixels). example this example illustrates using the pointerevent interface's width and height properties to calculate the contact area. ...
... obsolete initial definition. ...
... (in css pixels). example this example illustrates using the pointerevent interface's width and height properties to calculate the contact area. target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications specification status comment pointer events – level 2the definition of 'width' in that specification. recommendation non-stable version. pointer eventsthe definition of 'width' in that specification. obsolete initial definition. ...

WebGLRenderingContext.lineWidth() - Web APIs
the webglrenderingcontext.linewidth() method of the webgl api sets the line width of rasterized lines. the webgl spec, based on the opengl es 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined. the maximum minimum width is allowed to be 1.0. the minimum maximum width is also allowed to be 1.0. because of these implementation defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user's browser will display any other width. as of january 2017 most implementations of webgl only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits. syntax void gl.linewidth(width); parameters width a glfloat specifying the width of rasterized lines. default value:...
...is no guarantee any user's browser will display any other width. as of january 2017 most implementations of webgl only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits. syntax void gl.linewidth(width); parameters width a glfloat specifying the width of rasterized lines. default value: 1. return value none. examples setting the line width: gl.linewidth(5); getting the line width: gl.getparameter(gl.line_width); getting the range of available widths. returns a float32array. gl.getparameter(gl.aliased_line_width_range); specifications specification status comment webgl 1.0the definition of 'linewidth' in that specification. recommendation initial definition. opengl es 2.0the definition o...
... standard man page of the opengl api. ...

XRWebGLLayer.framebufferWidth - Web APIs
the read-only xrwebgllayer property framebufferwidth specifies the width of the framebuffer, in pixels. you can get the height of the framebuffer using the framebufferheight property. syntax let bufferwidth = xrwebgllayer.framebufferwidth; value the width in pixels of the xr device's framebuffer. each of the framebuffer's attachments (pixel, depth, color, and/or stencil buffers, for example) are all this many pixels wide. examples this snippet simply fetches the framebuffer's width and height for later use. ...
... working draft initial definition. ...
...th in pixels of the xr device's framebuffer. each of the framebuffer's attachments (pixel, depth, color, and/or stencil buffers, for example) are all this many pixels wide. examples this snippet simply fetches the framebuffer's width and height for later use. let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); framewidth = gllayer.framebufferwidth; frameheight = gllayer.framebufferheight; specifications specification status comment webxr device apithe definition of 'xrwebgllayer.framebufferwidth' in that specification. working draft initial definition. ...

column-rule-width - CSS: Cascading Style Sheets
the column-rule-width css property sets the width 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. 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 <'border-width'> is a keyword defined by border-width describing the width of the rule. i...
...order-width'> value. values <'border-width'> is a keyword defined by border-width describing the width of the rule. it may be either a <length> or one of the thin, medium, or thick keywords. formal definition initial valuemediumapplies tomulticol elementsinheritednocomputed valuethe absolute length; 0 if the column-rule-style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns. the `column-rule-width` property is used to change the width of the line that is drawn between columns. ...
...style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns. the `column-rule-width` property is used to change the width of the line that is drawn between columns. don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-width' in that specification. working draft initial definition. ...

minWidth - Archive of obsolete content
...
... ...

width - Archive of obsolete content
...
... ...

Bandwidth - MDN Web Docs Glossary: Definitions of Web-related terms
bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). ...
... bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). ...

Element.clientWidth - Web APIs
the element.clientwidth property is zero for inline elements and elements with no css; otherwise, it's the inner width of an element in pixels. it includes padding but excludes borders, margins, and vertical scrollbars (if present). when clientwidth is used on the root element (the <html> element), (or on <body> if the document is in quirks mode), the viewport's width (excluding any scrollbar) is returned. this is a special case of clientwidth. note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). syntax var intelemclientwidth = element.clientwidth; intelemclientwidth is an integer corresponding to the clientwidth of element in pixels. the clientwidth property is read–only. example specification speci...
...if you need a fractional value, use element.getboundingclientrect(). syntax var intelemclientwidth = element.clientwidth; intelemclientwidth is an integer corresponding to the clientwidth of element in pixels. the clientwidth property is read–only. example specification specification status comment css object model (cssom) view modulethe definition of 'clientwidth' in that specification. working draft notes clientwidth was first introduced in the ms ie dhtml object model. ...

HTMLTableElement.width - Web APIs
the htmltableelement.width property represents the desired width of the table. syntax htmltableelement.width = width; var width = htmltableelement.width; where width is a string representing the width in number of pixels or as a percentage value. ...
... the htmltableelement.width property represents the desired width of the table. syntax htmltableelement.width = width; var width = htmltableelement.width; where width is a string representing the width in number of pixels or as a percentage value. ...

MediaTrackConstraints.width - Web APIs
the mediatrackconstraints dictionary's width property is a constrainlong describing the requested or mandatory constraints placed upon the value of the width constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { width: constraint }; constraintsobject.width = constraint; value if this value is a number, the user agent will attempt to obtain media whose width is as close as possible to this number given the capabilities of the hardware and the other constraints specified. other...
...ct = { width: constraint }; constraintsobject.width = constraint; value if this value is a number, the user agent will attempt to obtain media whose width is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required width (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'width' in that specification. candidate recommendation initial...

MediaTrackSettings.width - Web APIs
the mediatracksettings dictionary's width property is an integer indicating the number of pixels wide mediastreamtrack is currently configured to be. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.width property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...n calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.width as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var width = mediatracksettings.width; value an integer value indicating the width, in pixels, of the video track as currently configured. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'width' in that specification. candidate reco...

MediaTrackSupportedConstraints.width - Web APIs
the mediatracksupportedconstraints dictionary's width property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the width constraint. if the constraint isn't supported, it's not included in the list, so this value will never be false. you can access the supported constraints dictionary by calling navigator.mediadevices.getsupportedconstraints(). syntax widthconstraintsupported = supportedconstraintsdictionary.width; value this property is present in the dictionary (and its value is always true) if the user agent supports the width constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you ...
...straint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'width' in that specification. candidate recommendation initial specification. ...

Screen.width - Web APIs
returns the width of the screen. syntax lwidth = window.screen.width example // crude way to check that the screen is at least 1024x768 if (window.screen.width >= 1024 && window.screen.height >= 768) { // resolution is 1024x768 or above } notes note that not all of the width given by this property may be available to the window itself. when other widgets occupy space that cannot be used by the window object, there is a difference in window.screen.width and window.screen.availwidth. see also screen.height. internet explorer will take into account the zoom setting when reporting the screen width. it will only return the real width of the screen if the zoom is set to 100%. specification specification status comment css object model (cssom) view modulethe d...
...re is a difference in window.screen.width and window.screen.availwidth. see also screen.height. internet explorer will take into account the zoom setting when reporting the screen width. it will only return the real width of the screen if the zoom is set to 100%. specification specification status comment css object model (cssom) view modulethe definition of 'screen.width' in that specification. working draft initial definition. ...

widths - SVG: Scalable Vector Graphics
the widths attribute indicates a list of range values, each followed by one or more glyph widths. only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no <number> this value is a comma-separated list of ucs range values as defined in iso 10646, each followed by one or more glyph widths. if this attribute is used, the units-per-em attribute must also be used. if the range is omitted, a range of u+0-7fffffff is assumed which covers all characters and their glyphs. if not enough glyph widths are given, the last in the list is replicated to cover that range. if too many widths are provided, the extras are ignored. specifications specification status comment ...
...he range is omitted, a range of u+0-7fffffff is assumed which covers all characters and their glyphs. if not enough glyph widths are given, the last in the list is replicated to cover that range. if too many widths are provided, the extras are ignored. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'widths' in that specification. recommendation initial definition ...

maxwidth - Archive of obsolete content
« xul reference home maxwidth type: string (representing an integer) the maximum width of the element. this corresponds to the max-width css property. ...

minwidth - Archive of obsolete content
« xul reference home minwidth type: string (representing an integer) the minimum width of the element. this corresponds to the min-width css property. ...

treecol.width - Archive of obsolete content
« xul reference home width type: string (representing an integer) the preferred width of the tree column. the value should not include a unit as all values are in pixels. specifying widths for your columns causes gecko to allow the tree to be scrolled horizontally if it is wider than the available space. ...

maxWidth - Archive of obsolete content
« xul reference maxwidth type: integer gets and sets the value of the maxwidth attribute. note: prior to gecko 6.0, you could use this on <input> elements; this was never intended, was a violation of the html specification, and has been fixed. use the size to set the maximum width of input fields. ...

ImageBitmap.width - Web APIs
specifications specification status comment html living standardthe definition of 'imagebitmap.height' in that specification. ...

ImageData.width - Web APIs
the readonly imagedata.width property returns the number of pixels per row in the imagedata object. syntax imagedata.width example this example creates an imagedata object that is 200 pixels wide and 100 pixels tall. thus, the width property is 200. let imagedata = new imagedata(200, 100); console.log(imagedata.width); // 200 specification specification status comment html living standardthe definition of 'imagedata.width' in that specification. living standard initial definition. ...

OffscreenCanvas.width - Web APIs
the width property returns and sets the width of an offscreencanvas object. syntax var pxl = offscreen.width; offscreen.width = pxl; examples creating a new offscreen canvas and returning or setting the width of the offscreen canvas: var offscreen = new offscreencanvas(256, 256); offscreen.width; // 256 offscreen.width = 512; specifications specification status comment html living standardthe definition of 'offscreencanvas.width' in that specification. living standard ...

Screen.availWidth - Web APIs
the screen.availwidth property returns the amount of horizontal space (in pixels) available to the window. syntax var width = window.screen.availwidth example var screenavailwidth = window.screen.availwidth; console.log(screenavailwidth); specifications specification status comment css object model (cssom) view modulethe definition of 'screen.availwidth' in that specification. working draft initial definition ...

TextMetrics.width - Web APIs
the read-only width property of the textmetrics interface contains the text's advance width (the width of that inline box) in css pixels. examples given this <canvas> element: <canvas id="canvas"></canvas> ... you can get a textmetrics object using the following code: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('foo'); // textmetrics object text.width; // 16; specifications specification html living standardthe definition of 'textmetrics.width' in that specification. ...

WebGLRenderingContext.drawingBufferWidth - Web APIs
the read-only webglrenderingcontext.drawingbufferwidth property represents the actual width of the current drawing buffer. it should match the width attribute of the <canvas> element associated with this context, but might differ if the implementation is not able to provide the requested width. syntax gl.drawingbufferwidth; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the width of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferwidth; // 300 specifications specification status comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferwidth' in that specification. recommendation initial definition. ...

Window.outerWidth - Web APIs
window.outerwidth read-only property returns the width of the outside of the browser window. it represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles. notes to change the size of a window, see window.resizeby() and window.resizeto(). to get the inner width of a window, i.e. the width of the page being displayed, see window.innerwidth. specification specification status comment css object model (cssom) view modulethe definition of 'window.outerwidth' in that specification. working draft initial definition. ...

XRViewport.width - Web APIs
the read-only xrviewport property width specifies the width of the viewport, in pixels, onto the drawing surface the 3d scene is to be rendered into. this is defined using this property along with the viewport's height and its origin given by its properties x and y. syntax width = xrviewport.width; value the viewport's width in pixels. examples see the main xrviewport page for examples. specifications specification status comment webxr device apithe definition of 'xrviewport.width' in that specification. working draft initial definition. ...

Index - Web APIs
ly loading font resources. 393 css object model (cssom) api, cssom, overview, reference the css object model is a set of apis allowing the manipulation of css from javascript. it is much like the dom, but for the css rather than the html. it allows users to read and modify css style dynamically. 394 determining the dimensions of elements api, cssom view, client width, guide, intermediate, client height, offsetheight, offsetwidth, size of displayed content there are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. this article is designed to help you make that decision. note that all these properties are read-only. if you want to set the wid...
... 395 managing screen orientation api, advanced, cssom view, guide, screen orientation screen orientation is something slightly different than device orientation. ...
... 395 managing screen orientation api, advanced, cssom view, guide, screen orientation screen orientation is something slightly different than device orientation. ...
...And 56 more matches

filter - CSS: Cascading Style Sheets
-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussia...
... <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="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...
...div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="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, 23...
...And 44 more matches

Legacy layout methods - Learn web development
idiculus mus.</p> </div> each one of the columns needs an outer element to contain its content and let us manipulate all of it at once. in this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. ...
...</div> each one of the columns needs an outer element to contain its content and let us manipulate all of it at once. in this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. ...
...hosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. first, of all, apply the following to your html to provide some basic setup: body { width: 90%; max-width: 900px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900px wide, in which case it will stay fixed at this width and center itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. ...
...And 43 more matches

Border-image generator - CSS: Cascading Style Sheets
<!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-checkbox" data-topic='slice-fill'></div> </div> </div> <!-- border-image-width --> <div id="border-width-control" class="category"> <div class="title"> border-image-width </div> </div> <!-- border-image-outset --> <div id="border-outset-control" class="category"> <div class="title"> border-image-outset </div> </div> <!-- other-settings --> <div id="aditional...
... </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> </div> ...
... <div id="output" class="category"> <div class="title"> css code </div> <div class="css-property"> <span class="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-outset: </span> <span id="out-border-outset" class="value"> </span> </div> <div class="css-property"> <span class="name"> border...
...And 41 more matches

MathML Torture Test
n value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/...
... alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </math> </td></tr> <tr> <td>2</td> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none...
... <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" width="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> ...
...And 38 more matches

Using CSS transitions - CSS: Cascading Style Sheets
ccur instantaneously as usual. transition-duration specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...on-duration specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...ltiple values to allow each property to transition over a different period of time. ...
...And 38 more matches

Box-shadow generator - CSS: Cascading Style Sheets
60" data-max="360" data-step="1" data-value="0"> </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> width </div> <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> <div class="ui-slider" data-topic="width" data-min="0" data-max="1000" data-step="1" data-value="200"> </div> <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> ...
...-btn-set" data-topic="width" data-type="sub"></div> <div class="ui-slider" data-topic="width" data-min="0" data-max="1000" data-step="1" data-value="200"> </div> <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> <div class="ui-slider-input" data-topic="width" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> height </div> <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> <div class="ui-slider" data-topic="height" data-min="0" data-max="400" data-step="1" ...
... </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 height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> <...
...And 37 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
t-axes"></div> <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: defau...
... hsla(0, 0%, 0%, 0) 50%, 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; 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 #ff...
..., #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 { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 3...
...And 37 more matches

Color picker tool - CSS: Cascading Style Sheets
v> </div> <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: defau...
... hsla(0, 0%, 0%, 0) 50%, 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-...
...: -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 */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-...
...And 34 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
more about responsive design advantages and disadvantages. you can also read our discussion on the basics of responsive design, if you need some more background information and basics. fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery. you can t...
...> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile web apps. we have used brick to create the mobile layout for snapshot, which you will read more about below. to get these sitting side-by-side we have used the following rules: x-card { width: 100%; } x-card:nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: 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 t...
...m; } 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. ...
...And 33 more matches

Debugging Table Reflow
.cpp. it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate. debug_table_strategy editor's note: the following examples are not shown correctly due to the wiki's technical constraint. the table layout strategy can be...
...hows the block id and address and then the computed width and height from the htmlreflowstate. debug_table_strategy editor's note: the following examples are not shown correctly due to the wiki's technical constraint. ...
...the computed width and height from the htmlreflowstate. debug_table_strategy editor's note: the following examples are not shown correctly due to the wiki's technical constraint. ...
...And 30 more matches

Applying styles and colors - Web APIs
looks like the color palettes photoshop uses. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample a strokestyle example this example is similar to the one above, but uses the strokestyle property to change the colors of the shapes' outlines. we use the arc() method to draw circles instead of squares. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i ...
...this is done by either setting the globalalpha property or by assigning a semi-transparent color to the stroke and/or fill style. globalalpha = transparencyvalue applies the spec...
...using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually. function draw() { ...
...And 29 more matches

requiredFeatures - SVG: Scalable Vector Graphics
le>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> default value true if not defined, false if null or empty string as value animatab...
...t>, <tspan>, <tref>, <textpath>, <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> elements. ...
...color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation and color-rendering attributes http://www.w3.org/tr/svg11/feature#basicpaintattribute the browser supports the color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width and color-rendering attributes http://www.w3.org/tr/svg11/feature#opacityattribute the browser supports the opacity, stroke-opacity and fill-opacity attributes http://www.w3.org/tr/svg11/feature#graphicsattribute the browser supports the display, image-rendering, pointer-events, shape-rendering, text-rendering and visibility attributes http://www.w3.org/tr/svg11/feature#basicgraphi...
...And 27 more matches

Using CSS gradients - CSS: Cascading Style Sheets
ove on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. ...
.... you must have at least two, but you can have as many as you want. <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. ...
...gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. <div class="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle. ...
...And 23 more matches

Element Positioning - Archive of obsolete content
position of an element is determined by the layout style of its container. for example, the position of a button in a horizontal box is to the right of the previous button, if any. the size of an element is determined by two factors, the size that the element wants to be and the size you specify. the size that an element wants to be is determined by what is in the element. for example, a button's width is determined by the amount of text inside the button. an element will generally be as large as it needs to be to hold its contents, and no larger. some elements, such as textboxes have a default size, which will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. ...
...lements, such as textboxes have a default size, which will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. in the image, the first two buttons have been given a suitable size to hold their text. the third button is larger because it contains more content. ...
... will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. in the image, the first two buttons have been given a suitable size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. ...
...And 22 more matches

Web audio codec guide - Web media technologies
the processing of audio data to encode and decode it is handled by an audio codec (coder/decoder). in this article, we look at audio codecs used on the web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content. ...
... reduced in kind. for more information about these and other features of audio data, see audio data format and structure in digital audio concepts. the effect of codec configuration on encoded audio output audio codecs typically employ cleverly-designed and highly-complex mathematical algorithms to take source audio data and compress it to take substantially less space in memory or network bandwidth. in addition to choosing the type of encoder to use, you may have the opportunity to adjust the encoder using parameters that choose specific algorithms, tune those algorithms, and specify how many passes to apply while encoding. audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelit...
... joint stereo can reduce the size of the encoded audio to some e...
...And 22 more matches

Border-radius generator - CSS: Cascading Style Sheets
/div> <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> ...
...-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ======================================================...
...n-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left...
...And 21 more matches

Drawing graphics - Learn web development
rowsers, with the exception of ie 8 and below for 2d canvas, and ie 11 and below for webgl. active learning: getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element. this element is used to define the area on the page into which the image will be drawn. this is as simple as including the element on the page: <canvas width="320" height="240"></canvas> this will create a canvas on the page with a size of 320 by 240 pixels. inside the canvas tags, you can put some fallback content, which is shown if the user's browser doesn't support canvas. <canvas width="320" height="240"> <p>your browser doesn't support canvas. boo hoo!</p> </canvas> of course, the above message is really unhelpful! in a real example you'd w...
...s on to. first make a local copy of our 0_canvas_start.html file, and open it in your text editor. ...
...g <body> tag: <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section). canvases with no explicit width and height default to 300 pixels wide by 150 pixels high. now add the following lines of javascript inside the <script> element: const canvas = document.queryselector('.mycanvas'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; here we have stored a reference to the canvas in the canvas constant. in the second line we set both a new ...
...And 20 more matches

Floats - Learn web development
pretium metus suscipit vel. mauris ultricies lectus sed lobortis 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> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow. to float the text around it add the float and margin-r...
...nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. ...
... ut, facilisis sed est. nam id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...And 19 more matches

Responsive images - Learn web development
sics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. ...
... will likely span the whole of the width of the header, and the content image will fit somewhere inside the content column. here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200px and centers itself in the available space. in viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the i...
...ader below looks ok, but it's starting to take up a lot of the screen height for a mobile device. and at this size, it is difficult to see the people within the first content image. an improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. a second cropped image could be displayed for a medium width screen device, like a tablet. this is commonly known as the art direction problem. in addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. and conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we lo...
...And 19 more matches

Basic animations - Web APIs
function clock() { var now = new date(); var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.save(); ctx.clearrect(0, 0, 150, 150); ctx.translate(75, 75); ctx.scale(0.4, 0.4); ctx.rotate(-math.pi / 2); ctx.strokestyle = 'black'; ...
...enshotlive sample an animated clock this example draws an animated clock, showing your current time. ...
...hr - 12 : hr; ctx.fillstyle = 'black'; // write hours ctx.save(); ctx.rotat...
...And 19 more matches

Table Layout Strategy - Archive of obsolete content
apter 17).in css2 a distinction between fixed and auto layout of tables has been introduced. the auto-layout mechanism is implemented in basictablelayoutstrategy.cpp the fixed-layout in fixedtablelayoutstrategy.cpp. all these files are in the layout/html/table/src subdirectory. the code the layout strategies are invoked from nstableframe::reflow. the overload of the initialize and balancecolumnwidths routines depends on the table style and is decided at runtime. on the first reflow nstableframe::balancecolumnwidths is called. inside this routine the corresponding table layout strategy is created and initialized (basictablelayoutstrategy::initialize). later the column widths are balanced by basictablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the ba...
...le layout strategy is created and initialized (basictablelayoutstrategy::initialize). later the column widths are balanced by basictablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the basic table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. ...
...alized (basictablelayoutstrategy::initialize). later the column widths are balanced by basictablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the basic table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc. ...
...And 18 more matches

begin - SVG: Scalable Vector Graphics
when using the <discard> element. the <discard> element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element. value <begin-value-list> default value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements. ...
...element. value <begin-value-list> default value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements. ...
... value 0s animatable no the definition of <begin-value-list> is the same as for the other animation elements. ...
...And 18 more matches

Responsive design - Learn web development
target a particular screen size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts an...
...study introduction to html), and an idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the browser window or a fixed width site, which would be a fixed size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your b...
...result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser window in and out to see how this looks at different sizes. the fixed-width site risked a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser window size. note: the screenshots above are taken using the responsive design mode in firefox devtools. as the...
...And 17 more matches

Using the CSS Painting API - Web APIs
bset containing most of the features available in the full canvas api with the exception of the canvasimagedata, canvasuserinterface, canvastext, and canvastextdrawingstyles apis. we define the fillstyle as being hsla(55, 90%, 60%, 1.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that color. the fillrect() parameters are, in order, x-axis origin, y-axis origin, width, and height. fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. we can use the css background-size and background-position properties to re-size or relocate this background image, but this is the default size and placement of the yellow box we created in our paint ...
...e text is huge, the box might look like an bar above the first three letters. it would be better if the background image was relative to the size of the element — we can use the element's paintsize property to ensure the background image is proportional to the size of the element's box model size. in the above image, the background proportional to the size of the element. ...
...element. the 3rd example has width: 50%; set on the block level element, making the element narrower and therefore the background image narrower. the code to do this looks like so: registerpaint('headerhighlight', class { static get contextoptions() { return { alpha: true }; } /* ctx is the 2d drawing context size is the paintsize, the dimensions (height and width) of the box being painted */ paint(ctx, size) { ctx.fillstyle = 'hsla(55, 90%, 60%, 1.0)'; ctx.fillrect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 ); } }); this code example has two differences from our first example: we've included a second argument, which is the paint size. we've changed the dimensions and positioning of our rectangle to be relative t...
...And 16 more matches

HTMLImageElement.sizes - Web APIs
this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions. each condition is specified using the same conditional format used by media queries. syntax let sizes = htmlimageelement.sizes; htmlimageelement.sizes = sizes; value a usvstring containing a comma-separated list of source size descriptors followed by an optional fallback size. ...
...by an optional fallback size. each source size descriptor is comprised of a media condition, then at least one whitespace character, then the source size value to use for the image when the media condition evaluates to true. media conditions each source size descriptor consists of a media condition as defined by the media queries standard. because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width information. see syntax in using media queries for details on how to construct a media condition. source size values the source size value is a css length. it may be specified using font-relative units (such as em or ex), absolute units (such as px or cm), or the vw uni...
... note: the source size value must not be specified as a percentage of the container size; that is, lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of. ...
...And 16 more matches

The box model - Learn web development
ox behaves in terms of page flow, and in relation to other boxes 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. ...
... 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. ...
...nstruction, our boxes lay out as block or inline boxes. examples of different display types let's move on and have a look at some examples. below we have three different html elements, all of which have an outer display type of block. the first is a paragraph, which has a border added in css. the browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it. the second is a list, which is laid out using display: flex. this establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line. below this, we have a block-level paragraph, inside which are two <span> elements. these elements would normally be inl...
...And 15 more matches

Pixel manipulation with canvas - Web APIs
ixels of our canvas. with the imagedata object you can directly read and write a data array to manipulate pixel data. we will also look into how image smoothing (anti-aliasing) can be controlled and how to save images from your canvas. the imagedata object the imagedata object represents the underlying pixel data of an area of a canvas object. it contains the following read-only attributes: width the width of the image in pixels. height the height of the image in pixels. data a uint8clampedarray representing a one-dimensional array containing the data in the rgba order, with integer values between 0 and 255 (included). the data property returns a uint8clampedarray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blu...
...s (red, green, blue, and alpha, in that order; that is, "rgba" format). each color component is represented by an integer between 0 and 255. each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array. pixels then proceed from left to right, then downward, throughout the array. ...
... each color component is represented by an integer between 0 and 255. each component is assigned a consecutive index within the array, with the top left pixel's red component being at index 0 within the array. pixels then proceed from left to right, then downward, throughout the array. the uint8clampedarray contains height × width × 4 bytes of data, with index values ranging from 0 to (height×width×4)-1. ...
...And 15 more matches

Viewport concepts - CSS: Cascading Style Sheets
fullscreen mode, the viewport is the entire screen. in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. ...
...tire screen. in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. viewport sizes are mutable the width of the viewport is not always the width of the window. ...
...viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. viewport sizes are mutable the width of the viewport is not always the width of the window. ...
...And 15 more matches

Grids - Learn web development
to css and styling boxes.) objective: to understand the fundamental concepts behind grid layout systems, and how to implement a grid layout using css grid. what is grid layout? a grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements. they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our websites. a grid will typically have columns, rows, and then gaps between each row and column — commonly referred to as gutters. creating your grid in css having decided on the grid that your design needs, you can use css grid layout to create that grid in css and place items onto it. we will look at the basic features of g...
...rid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { 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. ...
...ee 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. .container { 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. ...
...And 14 more matches

Positioning - Learn web development
css: top: 30px; left: 30px; note: the values of these properties can take any units you'd logically expect — pixels, mm, 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. ...
... units you'd logically expect — pixels, mm, 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 <sp...
...ke 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. ...
...And 14 more matches

<blend-mode> - CSS: Cascading Style Sheets
should appear when elements overlap. it is used in the background-blend-mode and mix-blend-mode properties. syntax the <blend-mode> data type is defined using a keyword value chosen from the list below. values normal the final color is the top color, regardless of what the bottom color is. the effect is like two opaque pieces of paper overlapping. <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors. a black layer leads to a black final layer, and a white layer leads to no change. the effect is like tw...
...png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors. a black layer leads to a black final layer, and a white layer leads to no change. the effect is like two images printed on transparent film overlapping. <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value. a black layer leads to no change, and a white layer leads to a white final lay...
... url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value. a black layer leads to no change, and a white layer leads to a white final layer. the effect is like two images shone onto a projection screen. <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. this blend mode is equivalent to hard-light but with the layers sw...
...And 14 more matches

Used value - CSS: Cascading Style Sheets
the used value of a css property is its value after all calculations have been performed on the computed value. after the user agent has finished its calculations, every css property has a used value. the used values of dimensions (e.g., width, line-height) are in pixels. the used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color or background-size) and with position and float. ...
...els. the used values of shorthand properties (e.g., background) are consistent with those of their component properties (e.g., background-color or background-size) and with position and float. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. ...
...nsistent with those of their component properties (e.g., background-color or background-size) and with position and float. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. ...
...And 14 more matches

Drawing shapes with canvas - Web APIs
g, <canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). all other shapes must be created by combining one or more paths. luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes. first let's look at the rectangle. ...
...nd paths (lists of points connected by lines). all other shapes must be created by combining one or more paths. luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes. first let's look at the rectangle. there are three functions that draw rectangles on the canvas: fillrect(x, y, width, height) draws a filled rectangle. strokerect(x, y, width, height) draws a rectangular outline. clearrect(x, y, width, height) clears the specified rectangular area, making it fully transparent. each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size. below is the draw() function from the previ...
...ch of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's size. below is the draw() function from the previous page, but now it is making use of these three functions. rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's output is shown below. screenshotlive sample the fillrect() function draws a large b...
...And 13 more matches

border-image - CSS: Cascading Style Sheets
request. note: you should specify a separate border-style in case the border image fails to load. indeed, this is required according to the specification, although not all browsers implement this requirement. ...
...implement this requirement. constituent properties this property is a shorthand for the following css properties: border-image-outset border-image-repeat border-image-slice border-image-source border-image-width syntax /* source | slice */ border-image: linear-gradient(red, blue) 27; /* source | slice | repeat */ border-image: url("/images/border.png") 27 space; /* source | slice | width */ border-image: linear-gradient(red, blue) 27 / 35px; /* source | slice | width | outset | repeat */ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; the border-image property may be specified with anywhere from one to five of the values listed below. note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-styl...
...ues listed below. note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. values <'border-image-source'> the source image. see border-image-source. <'border-image-slice'> the dimensions for slicing the source image into regions. up to four values may be specified. see border-image-slice. <'border-image-width'> the width of the border image. up to four values may be specified. see border-image-width. <'border-image-outset'> the distance of the border image from the element's outside edge. up to four values may be specified. see border-image-outset. <'border-image-repeat'> defines how the edge regions of the source image are adjusted to fit the dimensions of the border image. up to two values may ...
...And 13 more matches

border-inline-end - CSS: Cascading Style Sheets
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-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end 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-orienta...
...ionality, 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-start, which define the other borders of the element. ...
...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-start, which define the other borders of the element. ...
...And 13 more matches

border - CSS: Cascading Style Sheets
the border shorthand css property sets an element's border. it sets the values of border-width, border-style, and border-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 order of the values does not matter. ...
... 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-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the border will be invisible if its style is not defined.
...And 13 more matches

clip-path - CSS: Cascading Style Sheets
e reference box. stroke-box uses the stroke bounding box as the reference box. view-box uses the nearest svg viewport as the 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 size of the reference box is set to the width and height values of the viewbox attribute. none no clipping path is created. note: a computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinherite...
...one</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> &lt;svg&gt; &lt;clippath id="mypath" clippathunits="objectboundingbox"&gt; ...
... </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> ...
...And 13 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
ttribute, if this attribute isn't set, the preserveaspectratio attribute has no effect (with one exception, the <image> element, as described below). ...
...on, the <image> element, as described below). ...
...<path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" ...
...And 13 more matches

SVG animation with SMIL - SVG: Scalable Vector Graphics
d an <animate> element inside the <circle> element. the important attributes for <animate> are: attributename the name of the attribute to animate. from the initial value of the attribute. to the final value. dur the duration of the animation (for example, write '5s' for 5 seconds). if you want to animate more attributes inside the same element, just add more <animate> elements. ...
...e: attributename the name of the attribute to animate. from the initial value of the attribute. to the final value. dur the duration of the animation (for example, write '5s' for 5 seconds). if you want to animate more attributes inside the same element, just add more <animate> elements. <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the transform attributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we...
...ributes the <animatetransform> element let you animate transform attributes. this new element is necessary because we are not animating a simple attribute like x which is just a number. rotation attributes look like this: rotation(theta, x, y), where theta is the angle in degrees, and x and y are absolute positions. in the example below, we animate the center of the rotation and the angle. ...
...And 13 more matches

Fills and Strokes - SVG: Scalable Vector Graphics
s painting basic coloring can be done by setting two attributes on the node: fill and stroke. using fill sets the color inside the object and stroke sets the color of the line drawn around the object. you can use the same css color naming schemes that you use in html, whether that's color names (that is red), rgb values (that is rgb(255,0,0)), hex values, rgba values, etc. <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> in addition, you can specify the opacity of either the fill or stroke separately in svg. these are controlled by the fill-opacity and stroke-opacity attributes. note: in firefox 3+, rgba values are also allowed, and will give the same effect. but for compatibility with other viewers, it's often best...
... give the same effect. but for compatibility with other viewers, it's often best to specify the fill/stroke opacity separately. if you specify both an rgba value and a fill/stroke opacity value, both will be applied. stroke in addition to its color properties, there are a few other attributes available to control the way a stroke is drawn on a line. ...
...cify both an rgba value and a fill/stroke opacity value, both will be applied. stroke in addition to its color properties, there are a few other attributes available to control the way a stroke is drawn on a line. <?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this stroke. strokes are drawn centered around the path. in the example above, the path is shown in pink, and the ...
...And 13 more matches

Multiple-column layout - Learn web development
ppropriate places. at the bottom of the section you can see a live example of what the final code should look like. our starting point contains some very simple html; a wrapper with a class of container inside which is a heading and some paragraphs. the <div> with a class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. ...
... a class of container will become our multicol container. we switch on multicol by using one of two properties column-count or column-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column. column-count example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. du...
...iquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...And 12 more matches

Images in HTML - Learn web development
own the image. you have received explicit, written permission from the image owner. you have ample proof that the image is, in fact, in the public domain. copyright violations are illegal and unethical. in addition, never point your src attribute at an image hosted on someone else's website that you don't have permission to link to. this is called "hotlinking". again, stealing someone's bandwidth is illegal. it also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing. our above code would give us the following result: note: elements like <img> and <video> are sometimes referred to as replaced elements. this is because the element's content and size are defined by an external resource (like an image or video file...
...t support the image type. some people still use text-only browsers, such as lynx, which displays the alt text of images. you may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries. users have turned off images to reduce data transfer volume and distractions. this is especially common on mobile phones, and in countries where bandwidth is limited or expensive. what exactly should you write inside your alt attribute? it depends on why the image is there in the first place. in other words, what you lose if your image doesn't show up: decoration. you should use css background images for decorative images, but if you must use html, add a blank alt="". if the image isn't part of the content, a screen reader shouldn't waste time...
...supply the text inside the alt attribute. essentially, the key is to deliver a usable experience, even when the images can't be seen. this ensures all users are not missing any of the content. try turning off images in your browser and see how things look. you'll soon realize how helpful alt text is if the image cannot be seen. note: for more information, see our guide to text alternatives. width and height you can use the width and height attributes to specify the width and height of your image. you can find your image's width and height in a number of ways. for example on the mac you can use cmd + i to get the info display up for the image file. returning to our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it ...
...And 12 more matches

Plug-in Basics - Plugins
lug-in is installed. if it is, a movie is displayed. // can we display adobe flash movies? var mimetype = navigator.mimetypes["application/x-shockwave-flash"]; if (mimetype) { // yes, so can we display with a plug-in? var plugin = mimetype.enabledplugin; if (plugin) { // yes, so show the data in-line document.writeln("here\'s a movie: <object data='mymovie.swf' height='100' width='100'></object>"); } else { // no, so provide a link to the data document.writeln("<a href='mymovie.swf'>click here</a> to see a movie."); } } else { // no, so tell them so document.writeln("sorry, can't show you this movie."); } overview of plug-in structure this section is an overview of basic information you will need as you develop plug-ins. understanding the plu...
...nt is displayed. the plug-in is visible as a rectangular subpart of the page (unless it is hidden). embedded plug-ins are commonly used for multimedia images relating to text in the page, such as the adobe flash plug-in. when gecko encounters the object or embed element in a document, it attempts to find and display the file represented by the data and src attributes, respectively. the height and width attributes of the object element determine the size of the embedded plug-in in the html page. for example, this object element calls a plug-in that displays video: <object data="newave.avi" type="video/avi" width="320" height="200" autostart="true" loop="true"> </object> a hidden plug-in is a type of embedded plug-in that is not drawn on the screen when it is invoked. it is cre...
...r a plug-in is windowed or windowless is not meaningful if the plug-in is invoked with the hidden attribute. you can also create hidden plug-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 clas...
...And 12 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
— screen readers read this description out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide...
...ser agent. attributes this element includes the global attributes. alt defines an alternative text description of the image. note: browsers do not always display images. there are a number of situations in which a browser might not display images, such as: non-visual browsers (such as those used by people with visual impairments) the user chooses not to display images (saving bandwidth, privacy reasons) the image is invalid or an unsupported type in these cases, the browser may replace the image with the text in the element's alt attribute. for these reasons and others, provide a useful value for alt whenever possible. omitting alt altogether indicates that the image is a key part of the content and no textual equivalent is available. setting this attribute to an empt...
...e values: auto: no preference. the browser may use its own heuristics to prioritize the image. high: the image is of high priority. low: the image is of low priority. intrinsicsize this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples ismap this boolean attribute indicates that the image is part of a server-side map. if so, the coordinates where the user clicked on the image are sent to the server. note: this attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute. this give...
...And 12 more matches

Beginner's guide to media queries - Learn web development
: there were a number of other media types defined in the level 3 media queries specification; these have been deprecated and should be avoided. note: media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types. media feature rules after specifying the type, you can then target a media feature with a rule. width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond to different screen sizes. for examp...
...port width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond to different screen sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. the width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. ...
... media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. the width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given value is a minimum, or a maximum. for example, to make the color blue if the viewport is narrower than 600 pixels, use max-width: @media screen and (max-width: 600px) { body { color: blue; } } open this example in the browser, or view the source. in practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone. there are a number of other media features that you can test for, although some of the newer features introduced in level 4...
...And 11 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
le 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. ...
...ainer, in order to use the alignment properties that are implemented in css grids. ...
...x;} img { max-width: 100%; display: block; } .media { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a media object example. i am using floats for older browsers and grid for new ones.</div> </div> the image below shows the media object ...
...And 11 more matches

box-sizing - CSS: Cascading Style Sheets
the box-sizing css property sets how the total width and height of an 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. 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. ...
...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. ...
...low 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 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. ...
...And 11 more matches

Video player styling basics - Developer guides
ic — this is intentional, as the purpose is to show how such a video player could be styled and be made responsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...sponsive. note: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...: in some cases some basic css is omitted from the code examples here as its use is either obvious or not specifically relevant to styling the video player. ...
...And 11 more matches

Digital audio concepts - Web media technologies
cy (or pitch) of the sound that's produced. computers, however, are digital. in order to represent a sound wave in a way computers can manipulate and work with (let alone transmit over a network), the sound has to be converted into a digital form. this process is called analog to digital conversion (a/d for short). the first factor affecting the fidelity of the captured audio is the audio bandwidth; that is, the range of audio frequencies the a/d converter is capable of capturing and converting into digital form. the audio bandwidth is also affected by the codec, if it chooses to discard any frequency bands while encoding the sound. sound enters the computer through a microphone or other input in the form of a stream of electrons whose voltage varies to represent the amplitude of the sound...
...corded as two 16-bit integers, one for the left channel and one for the right. that means each sample requires 32 bits of memory. at the common sample rate of 48 khz (48,000 samples per second), this means each second of audio occupies 192 kb of memory. therefore, a typical three-minute song requires about 34.5 mb of memory. that's a lot of storage, but worse, it's an insane amount of network bandwidth to use for a relatively short piece of audio. that's why most digital audio is compressed. the process of compressing and decompressing audio is performed by encoding and decoding it using an audio codec (coder/decoder). over the years, a large variety of codecs have been developed, several of which are commonly used on the web. for details about the most important and useful ones for web develo...
......
...And 11 more matches

end - SVG: Scalable Vector Graphics
. <wallclock-sync-value> this value defines the animation end time as a real-world clock time. a valid wallclock-sync-value consists of the function wallclock() with a time value as parameter. the time syntax is based upon the syntax defined in iso 8601. indefinite the end of the animation will be determined by an svganimationelement.endelement() method call. ...
...me value as parameter. the time syntax is based upon the syntax defined in iso 8601. indefinite the end of the animation will be determined by an svganimationelement.endelement() method call. ...
... defined in iso 8601. indefinite the end of the animation will be determined by an svganimationelement.endelement() method call. ...
...And 11 more matches

widget - Archive of obsolete content
exposing your interface as a widget, your add-on would automatically inherit such functionality. creation and content widgets can contain images or arbitrary web content. you can include this content inline as a string by using the content property, or point to content using a url with the contenturl property. upon creation, the widget is automatically added to the add-on bar. you can set the width of a widget, but the height is fixed so as to fit in the add-on bar. if the content is an image, it is automatically scaled to be 16x16 pixels. for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an ht...
... scripting widget content to interact with the widget's content you need to load a separate script into the panel. in the sdk these scripts are called "content scripts" because they're explicitly used for interacting with web content. while content scripts can access th...
...f the self module: var data = require("sdk/self").data; require("sdk/widget").widget({ id: "my-widget", label: "my widget", contenturl: data.url("my-content.html") }); this widget contains an entire web page: require("sdk/widget").widget({ id: "hello-display", label: "my hello widget", content: "hello!", width: 50 }); widgets are quite small by default, so this example used the width property to grow it in order to show all the text. scripting widget content to interact with the widget's content you need to load a separate script into the panel. in the sdk these scripts are called "content scripts" because they're explicitly used for interacting with web content. while content scripts can access the content they're attached to, they can't use the sdk's apis. so implementin...
...And 10 more matches

Introduction to CSS layout - Learn web development
herit — specifies that the value of the float property should be inherited from the element's parent element. in the example below we float a <div> left, and give it a margin on the right to push the text away from the element. this gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern web design. floats example body { width: 90%; max-width: 900px; margin: 0 auto; } p { line-height: 2; word-spacing: 0.1rem; } .box { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; border-radius: 5px; } <h1>simple float example</h1> <div class="box">float</div> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla luctus aliquam dolor, eu lacinia ...
...et orci vel, viverra egestas ligula. curabitur vehicula tellus neque, ac ornare ex malesuada et. in vitae convallis lacus. aliquam erat volutpat. suspendisse ac imperdiet turpis. aenean finibus sollicitudin eros pharetra congue. duis ornare egestas augue ut luctus. proin blandit quam nec lacus varius commodo et a urna. ut id ornare felis, eget fermentum sapien.</p> .box { float: left; width: 150px; height: 150px; margin-right: 30px; } note: floats are fully explained in our lesson on the float and clear properties. prior to techniques such as flexbox and grid layout floats were used as a method of creating column layouts. you may still come across these methods on the web; we will cover these in the lesson on legacy layout methods. positioning techniques positioning...
...rovide familiarity with these page layout techniques, we'll show you a couple of quick examples. our examples will all feature the same html, which is as follows: <h1>positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">i am a basic block level element.</p> <p>i am a basic block level element.</p> this html will be styled by default using the following css: body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } the rendered output is as follows: relative positioning relative positioning allows you to offset an item from the position in normal flow it would have by default. this means you could achieve a task such as moving an...
...And 10 more matches

CSS property compatibility table for form controls - Learn web development
t. text-decoration this property is not supported by opera on form widgets. text-overflow opera, safari, and ie9 do not support this property on form widgets. text-shadow opera does not support text-shadow on form widgets and ie9 does not support it at all. text fields see the text, search, and password input types. property 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. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. border ...
... border unless background:none is applied. on opera the border-radius property is applied only if an explicit border is set. box-shadow no partial[1] ie9 does not support this property. buttons see the button, submit, and reset input types and the <button> element. property n t note css box model width yes yes height partial[1] yes this property is not applied on webkit based browsers on mac osx or ios. border partial yes margin yes yes padding partial[1] yes this property is not applied on webkit based browsers on mac osx or ios. text and font color ...
...an explicit border is set. box-shadow no partial[1] ie9 does not support this property. number see the number input type. there is no standard way to change the style of spinners used to change the value of the field, with the spinners on safari being outside the field. property n t note css box model width yes yes height partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field. border yes yes margin yes yes padding partial[1] partial[1] on opera, the spinners are zoomed in, which can hide the content of the field. text an...
...And 10 more matches

Using the CSS Typed Object Model - Web APIs
t. with this type we can access the numeric value — cssunitvalue.value — and its unit — cssunitvalue.unit. let's write a plain paragraph, apply no styles, and inspect a few of its css properties by returning a table with the unit and value: <p> this is a paragraph with some content. open up this example in codepen or jsfiddle, and change some features. try adding some css, such as a width for this paragraph, or adding a css property to the ofinterst array. </p> <table id="regurgitation"> <thead> <tr> <th>property</th> <th>value</th> <th>unit</th> </tr> </table> for each property of interest, we list the name of the property, use .get(propertyname).value to return the value, and, if the object returned by the get() is a cssunitvalue, list the unit ty...
...p'); // get the table we'll be populating const stylestable = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextnode( ofinterest[i] ) ); row.appendchild( cssproperty ); // and the uni...
...csskeywordval...
...And 10 more matches

CanvasRenderingContext2D.putImageData() - Web APIs
method is not affected by the canvas transformation matrix. note: image data can be retrieved from a canvas using the getimagedata() method. you can find more information about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas. syntax void ctx.putimagedata(imagedata, dx, dy); void ctx.putimagedata(imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight); parameters imagedata an imagedata object containing the array of pixel values. dx horizontal position (x coordinate) at which to place the image data in the destination canvas. dy vertical position (y coordinate) at which to place the image data in the destination canvas. dirtyx optional horizontal position (x coordinate) of the top-left corner from which the image data...
...n the destination canvas. dy vertical position (y coordinate) at which to place the image data in the destination canvas. dirtyx optional horizontal position (x coordinate) of the top-left corner from which the image data will be extracted. defaults to 0. dirtyy optional vertical position (y coordinate) of the top-left corner from which the image data will be extracted. defaults to 0. dirtywidth optional width of the rectangle to be painted. defaults to the width of the image data. dirtyheight optional height of the rectangle to be painted. defaults to the height of the image data. errors thrown notsupportederror thrown if any of the arguments is infinite. invalidstateerror thrown if the imagedata object's data has been detached. examples understanding putimagedata to unde...
...s data has been detached. examples understanding putimagedata to understand what this algorithm does under the hood, here is an implementation on top of canvasrenderingcontext2d.fillrect(). ...
...And 10 more matches

HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements. ...
...sed to manipulate image elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 10 more matches

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
he flex properties work to control ratios along the main axis. these relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items that don’t have a width or a height applied using an absolute length unit? there is a concept in css of min-content and max-content — these keywords are defined in the css intrinsic and extrinsic sizing specification, and can be used in place of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a brows...
...ve 100 pixels of negative free space. this could be removed from the items in order to make them fit the container. it is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties. in the following examples i am working with flex-direction set to row, therefore the size of items will always come from their width. we will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. you could equally try out each example with flex-direction: column. the main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space. th...
...ve free space. the flex-basis property the flex-basis property specifies the initial size of the flex item before any space distribution happens. the initial value for this property is auto. if flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. this would be the case if you had given your item a width of 200 pixels. in that case 200px would be the flex-basis for this item. if your item is instead auto-sized, then auto resolves to the size of its content. at this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. the following live example can help to demonstrate this. in this example i have created a se...
...And 10 more matches

Layout and the containing block - CSS: Cascading Style Sheets
t, 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 place. the size and position of an element are often impacted by its containing block. percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position property is static, relative, or sticky,...
...aged media). calculating percentage values from the containing block as noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. the properties that work this way are box model properties and offset properties: the height, top, and bottom properties compute percentage values from the height of the containing block. the width, left, right, padding, and margin properties compute percentage values from the width of the containing block. some examples the html code for all our examples is: <body> <section> <p>this is a paragraph!</p> </section> </body> only the css is altered in each instance below. example 1 in this example, the paragraph is statically positioned, so its containing block is <section> bec...
...his is a paragraph!</p> </section> </body> only the css is altered in each instance below. example 1 in this example, the paragraph is statically positioned, so its containing block is <section> because it's the nearest ancestor that is a block container. ...
...And 10 more matches

border-block-start - CSS: Cascading Style Sheets
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. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the bord...
...ponds 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. ...
...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. ...
...And 10 more matches

border-image-slice - CSS: Cascading Style Sheets
orner 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 border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to form the final border image. syntax /* all sides */ border-image-slice: 30%; /* vertical | horizontal */ border-image-slice: 10% 30%; /* top | horizontal | bottom */ border-image-slice: 30 30% 45; /* top | right | bottom | left */ border-image-slice: 7 12 14 5; /* using the `fill` keyword */ border-image-slice: 10% ...
...d, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. for vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height are sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal table elements when border-collapse is col...
...order-collapse is collapse. ...
...And 10 more matches

border-inline-start - CSS: Cascading Style Sheets
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. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and tex...
...ponds 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. ...
...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 10 more matches

textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlen...
... <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the s...
...e outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world! </text> </svg> first, a <rect> element is used to create and stroke a rectangle to contain the text. th...
...And 10 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
icrosoft internet explorer and by mozilla-based browsers such as netscape 7. in ie, the object element is used to invoke a plugin that is built on the activex architecture. ...
...sers support the netscape plugin architecture, which is not com based like activex (and thus, not invoked via a unique identifier) but rather, mime type based. mozilla-based browsers support the use of the object element along with a mime type. ...
...y are in series, and not nested. ...
...And 9 more matches

Styling Vue components with CSS - Learn web development
in the assets folder it will be processed automatically. ...
... 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; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import th...
...order-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [c...
...And 9 more matches

imgIContainer
a service: var imgicontainer = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void addrestoredata([array, size_is(acount), const] in char data, in unsigned long acount); native code only! ...
...ta, in unsigned long acount); native code only! obsolete since gecko 2.0 void appendframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only! obsolete since gecko 2.0 void appendpalettedframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); native code only! obsolete since gecko 2.0 void clear(); obsolete since gecko 1.9.2 gfximagesurface copycurrentframe(); native cod...
...ext, in gfxgraphicsfilter afilter, [const] in gfxmatrix auserspacetoimagespace, [const] in gfxrect afill, [const] in nsintrect asubimage, [const] in nsintsize aviewportsize, in pruint32 aflags); native code only! void endframedecode(in unsigned long framenumber); obsolete since gecko 2.0 void ensurecleanframe(in unsigned long aframenum, in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only! obsolete since gecko 2.0 imgicontainer extractcurrentframe([const] in nsintrect arect); native code only! obsolete since gecko 2.0 imgicontainer extractframe(in pruint32 awhichframe, [const] in nsintrect arect, in pruint32 aflag...
...And 9 more matches

Advanced animations - Web APIs
n the last chapter we made some basic animations and got to know ways to get things moving. in this part we will have a closer look at the motion itself and are going to add some physics to make our animations more advanced. drawing a ball we are going to use a ball for our animation studies, so let's first draw that ball onto the canvas. the following code will set us up. <canvas id="canvas" width="600" height="300"></canvas> as usual, we need a drawing context first. to draw the ball, we will create a ball object which contains properties and a draw() method to paint it on the canvas. var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var ball = { x: 100, y: 100, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(th...
...canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var raf; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function() { ctx.beginpath(); ctx.arc(this.x, this.y, this.radius, 0, math.pi * 2, true); ctx.closepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of ...
...daries without any boundary collision testing our ball runs out of the canvas quickly. we need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. ...
...And 9 more matches

HTMLCanvasElement - Web APIs
the htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements. the htmlcanvaselement interface also inherits the properties and methods of the htmlelement interface. ...
...ods of the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 9 more matches

SVGRectElement - Web APIs
the svgrectelement interface provides access to the properties of <rect> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 9 more matches

-webkit-border-before - CSS: Cascading Style Sheets
border property values in a single place in the style sheet. /* border values */ -webkit-border-before: 1px; -webkit-border-before: 2px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start,...
...rder-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. ...
...ottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. ...
...And 9 more matches

transition-delay - CSS: Cascading Style Sheets
otes the amount of time to wait between a property's value changing and the start of the transition effect. ...
...a property's value changing and the start of the transition effect. ...
...heritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; backgr...
...And 9 more matches

Basic shapes - SVG: Scalable Vector Graphics
parameters to describe the size and position of those shapes. some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience and to keep your svg documents as short and as readable as possible. all the basic shapes are shown in the image to the right. ...
... they can be created by other shapes, but they're all there for your convenience and to keep your svg documents as short and as readable as possible. all the basic shapes are shown in the image to the right. ...
...your convenience and to keep your svg documents as short and as readable as possible. all the basic shapes are shown in the image to the right. ...
...And 9 more matches

Index - Archive of obsolete content
ummary! 929 max xul attributes, xul reference no summary! 930 maxheight xul attributes, xul reference no summary! 931 maxlength xul attributes, xul reference no summary! 932 maxpos xul attributes, xul reference no summary! 933 maxrows xul attributes, xul reference no summary! 934 maxwidth xul attributes, xul reference no summary! 935 member xul attributes, xul reference no summary! 936 menu xul attributes, xul reference no summary! 937 menuactive xul attributes, xul reference no summary! 938 menuitem.key xul attributes, xul reference no summary! 939 menuitem.name xul attrib...
...no summary! 940 menuitem.type xul attributes, xul reference more information on adding checkmarks to menus in the xul tutorial 941 min xul attributes, xul reference no summary! 942 minheight xul attributes, xul reference no summary! 943 minresultsforpopup xul attributes, xul reference no summary! 944 minwidth xul attributes, xul reference no summary! 945 mode no summary! 946 modifiers xul attributes, xul reference no summary! 947 mousethrough xul attributes, xul reference no summary! 948 movetoclick no summary! 949 multiline xul attributes, xul reference no summary! 950 multi...
... xul attributes, xul reference no summary! 1130 treecell.src xul attributes, xul reference no summary! 1131 treecol.editable xul attributes, xul reference no summary! 1132 treecol.src xul attributes, xul reference no summary! 1133 treecol.type xul attributes, xul reference no summary! 1134 treecol.width xul attributes, xul reference no summary! 1135 treeitem.label xul attributes, xul reference no summary! 1136 treelines no summary! 1137 type no summary! 1138 unread xul, xul attributes, xul reference no summary! 1139 uri xul, xul attribute, xul reference no summary! 1140 ...
...And 8 more matches

Table Reflow Internals - Archive of obsolete content
table reflow table reflows ro...
... ↙ ↘ ↓ nstablecol groupframe nstablerow groupframe nsblockframe ↓ ↓ nstablecol frame nstablerow frame ↓ nstablecell frame ↓ nsblock frame table reflow outer table reflows table and caption (if present) table reflows row groups in multiple passes pass 1 - unconstrained width, height and requests max elem width. the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mode). table reflow table reflows row groups (continued) the row group ...
...s row groups (continued) the row group figures out the row heights given its style height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 reflow. if the table has a style height, it allocates extra height to its row groups, rows and cells. in each pass, row groups reflow rows which reflow cells which reflow cell blocks. ...
...And 8 more matches

2D maze game with device orientation - Game development
tml> so far we have a simple html website with some basic content in the <head> section: charset, title, css styling and the inclusion of the javascript files. the <body> contains initialization of the phaser framework and the definitions of the game states. var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in. if there's nothing specified in that last argument or the element is not found, the canvas will be added to the <body> tag. without the framework, to add the canvas element to the page, you would have...
...as, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in. if there's nothing specified in that last argument or the element is not found, the canvas will be added to the <body> tag. without the framework, to add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='480'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually. note: you can read the building monster wants candy article for the in-depth introduction to the basic phaser-specific functions and methods. back to game states: ...
...u, howto and game. boot will take care of initializing a few settings, preloader will load all of the assets like graphics and audio, mainmenu is the menu with the start button, howto shows the "how to play" instructions and the game state lets you actually play the game. let's quickly go though the content of those states. boot.js the boot state is the first one in the game. ...
...And 8 more matches

From object to iframe — other embedding technologies - Learn web development
e a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer. ...
...inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventl...
...ea.value; solutionentry = htmlsolution; solution.value = 'show solution'; 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="4...
...And 8 more matches

Starting our Svelte Todo list app - Learn web development
n statically analyze our html templates to provide accessibility warnings when components are being compiled. accessibility (shortened to a11y) isn't always easy to get right, but svelte will help by warning you if you write inaccessible markup. ...
... <img> element to our todos.svelte component without its corresponding alt prop: <h1>svelte to-do list</h1> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiting for changes... moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next block of markup with a comment beginning with svelte-ignore, like this: <!-- svelte-ignore a11y-mis...
....com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiting for changes... moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next block of markup with a comment beginning with svelte-ignore, like this: <!-- svelte-ignore a11y-missing-attribute --> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> note: with vscode you can automatically add this ignore comment by clicking on the quick fix... link or pressing ctrl + +. if you want to globally disable this warning you can add this onwarn handler to your rollup.config.js file inside the configuration for the svelte plugin, like this: plugins: [ svelte({ dev: !prod...
...And 8 more matches

64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both 32-bit and 64-bit jit backends. what widths are the random typedefs everywhere? the following types or typedefs are always 64-bit on 64-bit platforms, and 32-bit on 32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit platforms. for all intents and purposes they are also 32-bit on 64-bit platforms: intn, uintn jsintn, jsuintn, jsbool general problems with pointers when performing bitwise operations on point...
...ten - see bug 501324, bug 512866 for example. amd64 pointers if mucking with pointers on amd64 (or em64-t/intel64), it is important to keep in mind an invariant that bits 63-48 must be sign-extended from bit 47. if you use these bits to squirrel away a payload, they must be adjusted before attempting to dereference the pointer. for more information and platform specific details on virtual address widths, see this article on wikipedia. builtins and calls when passing arguments to lirwriter::inscall(), there are four types: argsize_f - floating point value argsize_i - 32-bit integer argsize_q - 64-bit integer argsize_p - 32-bit integer on 32-bit platforms, 64-bit integer on 64-bit platforms. remember to use argsize_p where appropriate - on pointers or natively sized integers (including jsva...
...r::inscall(), there are four types: argsize_f - floating point value argsize_i - 32-bit integer argsize_q - 64-bit integer argsize_p - 32-bit integer on 32-bit platforms, 64-bit integer on 64-bit platforms. remember to use argsize_p where appropriate - on pointers or natively sized integers (including jsvals). similarly, when adding types to jsbuiltins.h, remember to use _js_ptr for pointer-width values. lir safety it is not immediately clear from reading lir which opcodes should be used for 64-bit safety. if you make a mistake, there's an extremely good chance the sanityfilter in nanojit will catch it while generating code. if this happens you will get an assert that points directly to the ill-typed lir. not all pointer-width values are actually pointers. to avoid equivocating, the rest ...
...And 8 more matches

Using images - Web APIs
rawing images once we have a reference to our source image object we can use the drawimage() method to render it to the canvas. as we will see later the drawimage() method is overloaded and has several variants. in its most basic form it looks like this: drawimage(image, x, y) draws the canvasimagesource specified by the image parameter at the coordinates (x, y). svg images must specify a width and height in the root <svg> element. example: a simple line graph in the following example, we will use an external image as the backdrop for a small line graph. using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. in this example, we're only using one image, so i use the image object's load event handler to execute the d...
...ke your script considerably smaller because we can avoid the need for code to generate the background. in this example, we're only using one image, so i use the image object's load event handler to execute the drawing statements. the drawimage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas. ...
...ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas. drawimage(image, x, y, width, height) this adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas. example: tiling an image in this example, we'll use an image as a wallpaper and repeat it several times on the canvas. this is done simply by looping and placing the scaled images at different positions. in the code below, the first for loop iterates over th...
...And 8 more matches

HTMLIFrameElement - Web APIs
the htmliframeelement interface provides special properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements. ...
...ntation of inline frame elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 8 more matches

HTMLTableElement - Web APIs
the htmltableelement interface provides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an html document. ...
...on of tables in an html document. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 8 more matches

Visualizations with Web Audio API - Web APIs
s for the original code in voice-change-o-matic), we first follow the standard pattern described in the previous section to set up the buffer: analyser.fftsize = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); next, we clear the canvas of what had been drawn on it before to get ready for the new visualization display: canvasctx.clearrect(0, 0, width, height); we now define the draw() function: function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawvisual = requestanimationframe(draw); next, we grab the time domain data and copy it into our array analyser.getbytetimedomaindata(dataarray); next, fill the canvas with a solid colour to start canvasctx.fillstyle = '...
... function draw() { in here, we use requestanimationframe() to keep looping the drawing function once it has been started: var drawvisual = requestanimationframe(draw); next, we grab the time domain data and copy it into our array analyser.getbytetimedomaindata(dataarray); next, fill the canvas with a solid colour to start canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); set a line width and stroke colour for the wave we will draw, then begin drawing a path canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the frequencybincount, as defined earlier on), then define an x variable to define the posi...
...ill draw, then begin drawing a path canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); determine the width of each segment of the line to be drawn by dividing the canvas width by the array length (equal to the frequencybincount, as defined earlier on), then define an x variable to define the position to move to for drawing each segment of the line. ...
...And 8 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
en 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. ...
...the grid-area property. .main-head { grid-area: header; } .content { grid-area: content; } .main-nav { grid-area: nav; } .side { grid-area: sidebar; } .ad { grid-area: ad; } .main-footer { grid-area: footer; } this will not create any layout, however our items now have names we can use to do so. staying outside of any media queries i am now going to set up the layout for the mobile width. here i am keeping everything in source order, trying to avoid any disconnect between the source and display as described in the guide grid layout and accessibility. i have not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid. .wrapper { display: grid; grid-gap: 20px; grid-template-areas...
... in the implicit grid. .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns. @media (min-width: 500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking shape in the value of grid-template-areas. the header spans over two column tracks, as does the nav. in the third ro...
...And 8 more matches

Scaling of SVG backgrounds - CSS: Cascading Style Sheets
erties. the algorithm, in summary the algorithm can for the most part be summarized by these four rules. there are some edge cases that aren't covered by these rules, but this covers the majority of cases. if background-size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins. if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered size preserves that ratio. if the image specifies a size, and the size isn't modified by constrain or cover, that specified size wins. if none of the above cases are met, the image is rendered at the same size as the background area. it's worth noting that the sizing algorithm only cares about the image's di...
...e svg source. dimensionless and proportionless this image is both dimensionless and proportionless. it doesn't care what size it is, nor does it care about remaining at a particular aspect ratio. this would make a good gradient desktop background that would work regardless of your screen size and its aspect ratio. ...
...rdless of your screen size and its aspect ratio. svg source one specified dimension and proportionless this image specifies a width of 100 pixels but no height or intrinsic ratio. this is, basically, a thin strip of wallpaper that could be stretched across the entire height of a block. svg source one specified dimension with intrinsic ratio this image specifies a 100 pixel height but no width. it also specifies an intrinsic aspect ratio of 3:4. this ensures that its width:height ratio is always 3:4, unless it's deliberately scaled to a disproportionate size (that is, by explicitly specifying both width and height that aren't of that ratio). ...
...And 8 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. <'mask-border-slice'> the dimensions for slicing the source i...
... <'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-outset'> the distance of the border mask from the element's outside edge. up to four values may be specified. see mask-border-outset. ...
...And 8 more matches

right - CSS: Cascading Style Sheets
horizontal position of a positioned element. it has no effect on non-positioned 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. syntax /* <length> values */ right: 3px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elements, the distance that the element is moved to the l...
...ues */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elements, the distance that the element is moved to the left of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the left property, while width: auto is treated as a width based on the content; or if left is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for relatively positioned elements, the distance of the element from its normal position ...
...t from its normal position. when position is set to sticky, the right property is used to compute the sticky-constraint rectangle. when position is set to static, the right property has no effect. when both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. ...
...And 8 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
in their initial state. you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical. align and pack the align and pack attributes both specify the layout of elements within a box. they can both take the values start (top or left), center, end (bottom or right), or stretch (extend this element to match the element with the greatest height or width). the align attribute is defined as operating in the axis perpendicular to the orient attribute, while the pack attribute operates along the same axis as the orient attribute. figure 2 shows how setting align="center" pack="start" on two elements will result in completely different output with the only difference being the value for orient. <box flex="1" align="end" pack="end"> <button label=...
...te. figure 2 shows how setting align="center" pack="start" on two elements will result in completely different output with the only difference being the value for orient. <box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: output from listing 2 flex elements ordinarily have fixed height and width. the flex attribute indicates that an element should be expanded to take up all of a window's height or width. flex takes a positive integer as a value, which is a growth multiple on the axis of the parent element's orient 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...
...ue, they will be laid out in the same relative order they appear in the source code. the default value for ordinal is 1. ...
...And 7 more matches

jspage - Archive of obsolete content
ase();var a=this.style[g];if(!$chk(a)){a=[];for(var f in element.shortstyles){if(g!=f){continue; }for(var 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.setst...
...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]=this.getstyle(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",bordersty...
...ight:"@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=element.shortstyles; var b=element.styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@px";});var e="border"+g;f.border[e]=b[e]="@px @ rgb(@, @, @)";var d=e+"width",a=e+"style",c=e+"color"; f[e]={};f.borderwidth[d]=f[e][d]=b[d]="@px";f.borderstyle[a]=f[e][a]=b[a]="@";f.bordercolor[c]=f[e][c]...
...And 7 more matches

resizer - Archive of obsolete content
e is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the window. ...
...an also specify a target element using the element attribute, to use the resizer to resize the specified element instead of the window. ...
...he element attribute, to use the resizer to resize the specified element instead of the window. ...
...And 7 more matches

Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 3 - comments in xml</t...
... </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are appl...
...les contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. ...
...And 7 more matches

HTML text fundamentals - Learn web development
you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; fon...
...ory i am a statistician and my name is trish. ...
...arning: marking up an unordered list try editing the live sample below to create your very own html unordered list. ...
...And 7 more matches

Manipulating documents - Learn web development
bvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a web page is loaded into; this is represented in javascript by the window object. using methods available on this object you can do things like return the window's size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more. the navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. in javascript, this is represented b...
... want to dynamically style. this is done with the htmlelement.style property, which contains inline styling information for each element in the document. you can set properties of this object to directly update element styles. ...
...backgroundcolor versus background-color). make sure you don't get these mixed up, otherwise it won't work. ...
...And 7 more matches

Using the viewport meta tag to control layout on mobile browsers
which case the browser provides scrollbars for the user to scroll around and access all the content. narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. users can then pan and zoom to see different areas of the page. for example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space. this is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. this virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices. enter viewport meta t...
... example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators. learn more about viewports in different mobile browsers in a tale of two viewports at quirksmode.org. viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport. it can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in css pixels at a scale of 100%. (there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the vie...
...eference pixel. it is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. for web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. but remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations. the default pixel ratio depends on the display density. on a display with density less than 200dpi, the ratio is 1.0. on displays with density between 200 and 300dpi, the ratio is 1.5. for displays with density over 300dpi, the ratio is the integer floor(density/150dpi). note that the default r...
...And 7 more matches

Animated PNG graphics
layed by decoders that do not support apng. the canvas is the area on the output device on which the frames are to be displayed. the contents of the canvas are not necessarily available to the decoder. as per the png specification, if a 'bkgd' chunk exists it may be used to fill the canvas if there is no preferrable background. the output buffer is a pixel array with dimensions specified by the width and height parameters of the png 'ihdr' chunk. conceptually, each frame is constructed in the output buffer before being composited onto the canvas. the contents of the output buffer are available to the decoder. the corners of the output buffer are mapped to the corners of the canvas. fully transparent black means red, green, blue and alpha components are all set to zero. for purposes of chunk...
...in the png specification, with three additional chunk types describing the animation and providing additional frame data. to be recognized as an apng, an 'actl' chunk must appear in the stream before any 'idat' chunks. the 'actl' structure is described below. conceptually, at the beginning of each play the output buffer must be completely initialized to a fully transparent black rectangle, with width and height dimensions from the 'ihdr' chunk. the default image may be included as the first frame of the animation by the presence of a single 'fctl' chunk before 'idat'. otherwise, the default image is not part of the animation. subsequent frames are encoded in 'fdat' chunks, which have the same structure as 'idat' chunks, except preceded by a sequence number. information for each frame about ...
...rwise, the default image is not part of the animation. subsequent frames are encoded in 'fdat' chunks, which have the same structure as 'idat' chunks, except preceded by a sequence number. information for each frame about placement and rendering is stored in 'fctl' chunks. the full layout of 'fdat' and 'fctl' chunks is described below. the boundaries of the entire animation are specified by the width and height parameters of the png 'ihdr' chunk, regardless of whether the default image is part of the animation. the default image should be appropriately padded with fully transparent pixels if extra space will be needed for later frames. each frame is identical for each play, therefore it is safe for applications to cache the frames. chunk sequence numbers the 'fctl' and 'fdat' chunks have a...
...And 7 more matches

Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom. wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the document object. ...
... this chapter provides some longer examples of web and xml development using the dom. wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the document object. ...
... this chapter provides some longer examples of web and xml development using the dom. wherever possible, the examples use common apis, tricks, and patterns in javascript for manipulating the document object. ...
...And 7 more matches

HTMLHRElement - Web APIs
the htmlhrelement interface provides special properties (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements. ...
...) for manipulating <hr> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

HTMLObjectElement - Web APIs
the htmlobjectelement interface provides special properties and methods (beyond those on the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources. ...
... representing external resources. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

HTMLTableCellElement - Web APIs
the htmltablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an html document. ...
... data cells, in an html document. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

SVGCircleElement - Web APIs
the svgcircleelement interface is an interface for the <circle> element. ...
...terface for the <circle> element. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

SVGEllipseElement - Web APIs
the svgellipseelement interface provides access to the properties of <ellipse> elements. ...
...llipse> elements. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

SVGTSpanElement - Web APIs
the svgtspanelement interface represents a <tspan> element. ...
...ace represents a <tspan> element. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

SVGTextElement - Web APIs
the svgtextelement interface corresponds to the <text> elements. ...
... <text> elements. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 7 more matches

Taking still photos with WebRTC - Web APIs
some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-sized pieces to make it easier to explain. initialization we start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever size the incoming video is, we're going to scale the resulting image to be 320 pixels wide. height the output height o...
... streaming indicates whether or not there is currently an active stream of video running. ...
...gins to flow. to avoid blocking until that happens, we add an event listener to video for the canplay event, which is delivered when the video playback actually begins. at that point, all the properties in the video object have been configured based on the stream's format. ...
...And 7 more matches

Using CSS animations - CSS: Cascading Style Sheets
ment so that the text slides in from off the right edge of the browser window. note that animations like this can cause the page to become wider than the browser window. to avoid this problem put the element to be animated in a container, and set overflow:hidden on the container. p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } in this example the style for the <p> element specifies that the animation should take 3 seconds to execute from start to finish, using the animation-duration property, and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is named “slidein”. if we wanted any custom styling on the <p> ele...
... would include it here as well; however, in this case we don’t want any custom styling other than the animation effect. the keyframes are defined using the @keyframes at-rule. in this case, we have just two keyframes. the first occurs at 0% (using the alias from). here, we configure the left margin of the element to be at 100% (that is, at the far right edge of the containing element), and the width of the element to be 300% (or three times the width of the containing element). this causes the first frame of the animation to have the header drawn off the right edge of the browser window. the second (and final) keyframe occurs at 100% (using the alias to). the left margin is set to 0% and the width of the element is set to 100%. this causes the header to finish its animation flush against th...
...e codepen button to see the animation in the codepen environment. adding another keyframe let’s add another keyframe to the previous example’s animation. let’s say we want the header’s font size to increase as it moves from right to left for a while, then to decrease back to its original size. ...
...And 7 more matches

Basic Concepts of Multicol - CSS: Cascading Style Sheets
ase examples. key concepts and terminology multicol is unlike any of the other layout methods we have in css in that it fragments the content, including all descendent elements, into columns. this happens in the same way that content is fragmented into pages when we work with css paged media, for example by creating a print stylesheet. the properties defined by the specification are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-width to an element, that element becomes a multi-column container, or multicol container for short. the columns are anonymous boxes and described as column boxes in the specification. defining columns to create a multicol containe...
... the column-count property the column-count property specifies the number of columns that you would like the content to be displayed as. the browser will then assign the correct amount of space to each column box to create the requested number of columns. ...
... in the above example the content is wrapped in paragraph p tags with default styling. therefore, there is a margin above each paragraph. you can see how this margin causes the first line of text to be pushed down. this is because a multicol container creates a new block formatting context (bfc) which means margins on child elements do not collapse with any margin on the container. ...
...And 7 more matches

Grid template areas - CSS: Cascading Style Sheets
isplay: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to...
...i want to only display the footer directly under the main content i would need to leave the three cells underneath the sidebar empty. ...
... rows just as easily as columns. for example we could make our sidebar span down to the end of the footer by replacing the . with sd. ...
...And 7 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. ...
...xt direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. ...
... property border-block-end border-bottom border-block-end-color border-bottom-color border-block-end-style border-bottom-style border-block-end-width border-bottom-width border-block-start border-top border-block-start-color border-top-color border-block-start-style border-top-style border-block-start-width border-top-width border-inline-end border-right border-inline-end-color border-right-color border-inline-end-style border-right-style border-inline-end-width border-right-width border-inline-start border-left border-inline-start-color border-left-color border-inline-start-style border-left-style border...
...And 7 more matches

transition-duration - CSS: Cascading Style Sheets
een the two states will be instantaneous. a negative value for the time renders the declaration invalid. ...
.... a negative value for the time renders the declaration invalid. ...
...itednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -w...
...And 7 more matches

transform - SVG: Scalable Vector Graphics
1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 + 40 = 80 top right corner: oldx=40 oldy=...
...if y is not provided, it is assumed to be 0. in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no transl...
... transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y. if y is not provided, it is assumed to be 0. ...
...And 7 more matches

SVG documentation index - SVG: Scalable Vector Graphics
e is a presentation attribute defining the algorithm to use to determine the inside part of a shape. 74 filter svg, svg attribute, svg filter the filter attribute specifies the filter effects defined by the <filter> element that shall be applied to its element. 75 filterres needsexample, svg, svg attribute, svg filter the filterres attribute indicates the width and height of the intermediate images in pixels of a filter primitive. 76 filterunits needsexample, svg, svg attribute, svg filter the filterunits attribute defines the coordinate system for the attributes x, y, width and height. 77 flood-color svg, svg attribute, svg filter the flood-color attribute indicates what color to use to flood the current filter...
...e. 131 markerheight needsexample, svg, svg attribute the markerheight attribute represents the height of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. 132 markerunits needsexample, svg, svg attribute the markerunits attribute defines the coordinate system for the markerwidth and markerunits attributes and the contents of the <marker>. 133 markerwidth needsexample, svg, svg attribute the markerwidth attribute represents the width of the viewport into which the <marker> is to be fitted when it is rendered according to the viewbox and preserveaspectratio attributes. 134 mask svg, svg attribute the mask attribute is a presentatio...
...t of the path for the initial current text position along the path after converting the path to the <textpath> element's coordinate system. 193 stddeviation filters, svg, svg attribute the stddeviation attribute defines the standard deviation for the blur operation. 194 stemh deprecated, svg, svg attribute the stemh attribute indicates the horizontal stem width of the font. 195 stemv deprecated, svg, svg attribute the stemv attribute indicates the vertical stem width of the font. 196 stitchtiles filters, svg, svg attribute the stitchtiles attribute defines how the perlin noise tiles behave at the border. 197 stop-color needsexample, svg, svg attribute the stop-color attribute indicates what ...
...And 7 more matches

Gradients in SVG - SVG: Scalable Vector Graphics
dial. you must give the gradient an id attribute; otherwise it can't be referenced by other elements inside the file. gradients are defined in a defs section as opposed to on a shape itself to promote reusability. linear gradient linear gradients change along a straight line. to insert one, you create a <lineargradient> node inside the definitions section of your svg file. ...
...inside the linear gradient are several <stop> nodes. these nodes tell the gradient what color it should be at certain positions by specifying an offset attribute for the position, a...
...inside the linear gradient are several <stop> nodes. these nodes tell the gradient what color it should be at certain positions by specifying an offset attribute for the position, and a stop-color attribute. this can be assigned directly or throug...
...And 7 more matches

Paths - SVG: Scalable Vector Graphics
(y) to move to. if the cursor was already somewhere on the page, no line is drawn to connect the two positions. the "move to" command appears at the beginning of paths to specify where the drawing should start. for example: m x y (or) m dx dy in the following example there's only a point at (10,10). note, though, that it wouldn't show up if a path was just drawn normally. for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines. the most generic is the "line to" command, called with l. l takes two parameters—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two a...
... and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be more easily made with a <rect> element). it's composed of horizontal and vertical lines only. ...
...line should end. the other two are control points. (x1,y1) is the control point for the start of the curve, and (x2,y2) is the control point for the end. the control points essentially describe the slope of the line starting at each point. the bézier function then creates a smooth curve that transfers from the slope established at the beginning of the line, to the slope at the other end. ...
...And 7 more matches

Stack Positioning - Archive of obsolete content
ere, all three children are buttons, but the elements do not have to be same type. they may be any element, including boxes and other stacks. the size of a stack is determined by the positions of the child elements. it is always sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. you can override this size with the various style properties such as width and max-width. you can use a script to adjust the value of the left and top attributes and thus make the elements move around. stacks have the advantage that when one absolutely positioned element changes its position, the position of the other elements is not affected. if ...
...at is, the first child of the stack appears at the back, the next child appears next and so on. the last element appears on top. you can use the dom functions to move the order of the elements around. when responding to mouse events, the elements on top will capture the events first. that means that if two buttons overlap, the top button will capture a mouse click where it covers the other one. ...
... appears on top. you can use the dom functions to move the order of the elements around. when responding to mouse events, the elements on top will capture the events first. that means that if two buttons overlap, the top button will capture a mouse click where it covers the other one. width and height the bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack. ...
...And 6 more matches

XUL element attributes - Archive of obsolete content
this value applies to horizontally oriented boxes only. it causes the child elements to be aligned so that their text labels are lined up. stretch this is the default value. the child elements are stretched to fit the size of the box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edge...
...ppear in the xul code. empty type: boolean set to true if the element is a container that contains no children. this will be set by the template builder as needed. equalsize type: one of the values below this attribute can be used to make the children of the element equal in size. always for a horizontally oriented element, this will make all of its children have the width of the widest child. for a vertically oriented element, this will make its children all have the height of the tallest child. never all of the children are displayed at the size required by the content or as specified by the width and height attributes or the css width and height properties. flags type: space-separated list of the values below a set of flags used for miscellaneou...
...d and the first one found in the window is used. left type: string (representing an integer) for elements placed directly within a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack. maxheight type: string (representing an integer) the maximum height of the element. this corresponds to the max-height css property. ...
...And 6 more matches

Sizing items in CSS - Learn web development
ed, 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 understand the different ways we can size things in css. the natural or intrinsic size of things html elements have a natural size, set before they are affected by any css. a straightforward example is an 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. we have given the image in the example below a border so that you can see t...
...he 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. in the example above, try adding some text inside the empty element. the border now contains that text because the height of the element is defined by the content. therefore the size of this <div> in ...
...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. when a size is given to an element (and the content of which then needs to fit into that size) we refer to it as an extrinsic size. take our <div> from the example above — we can give it specific width and height values, and it will now have that size no matter what content is placed into it. as we discovered in our previous lesson on overflow, a set height can cause content to overflow if there is more content than the element has space to fit inside it. due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on th...
...And 6 more matches

Styling tables - Learn web development
ry as your other files. ...
...normally, table columns tend to be sized acco...
...normally, table columns tend to be sized according to how much content they contain, w...
...And 6 more matches

CSS values and units - Learn web development
eful planning you can make it so the size of text or other elements scale relative to everything else on the page. some of the most useful units for web development are listed in the table below. unit relative to em font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. ex x-height of the element's font. ch the advance measure (width) of the glyph "0" of the element's font. rem font size of the root element. lh line height of the element. vw 1% of the viewport's width. vh 1% of the viewport's height. vmin 1% of the viewport's smaller dimension. vmax 1% of the viewpor...
...e of the root element. lh line height of the element. vw 1% of the viewport's width. vh 1% of the viewport's height. vmin 1% of the viewport's smaller dimension. vmax 1% of the viewport's larger dimension. exploring an example in the example below you can see how some relative and absolute length units behave. the first box has a width set in pixels. as an absolute unit this width will remain the same no matter what else changes. the second box has a width set in vw (viewport width) units. this value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. ...
...to see this in action you'll have to try the example after opening it in its own browser tab. the third box uses em units. ...
...And 6 more matches

create fancy boxes - Learn web development
vity. 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.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, 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 add...
...ies 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 boxes, but what happens if the radius size is equal or larger than the actual width of the box? .fancy { /* within a circle, centered text looks prettier. */ text-align : center; /* let's avoid our text touching the border. as our text will still flow in a square, it looks nicer that way, giving the feeling that it's a "real" circle. */ padding : 1em; /* the border will make the circle visible. you could also use a background, as backgrounds...
... square, it looks nicer that way, giving the feeling that it's a "real" circle. */ padding : 1em; /* the border will make the circle visible. you could also use a background, as backgrounds are clipped by border radius */ border : 0.5em solid black; /* let's make sure we have a square. if it's not a square, we'll get an ellipsis rather than a circle ;) */ width : 4em; height : 4em; /* and let's turn the square into a circle */ border-radius: 100%; } yes, we get a circle: backgrounds when we talk about a fancy box, the core properties to handle that are background-* properties. when you start fiddling with backgrounds it's like your css box is turned into a blank canvas you'll fill. before we jump to some practical examples, let's step back...
...And 6 more matches

How can we design for all types of users? - Learn web development
font size must be n% of the previous element whose font size was expressed. if no parent can be found, the default font size within the browser is considered as the base size for the calculation (usually the equivalent of 16 pixels). em-based sizes: em this unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. it is said that "em" is the width of a capital “m” in the alphabet (roughly speaking, an “m” fits into a square). rem-based sizes: rem this unit is proportional to the root element's font size and is expressed as portions of 1, like em. suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at...
...t older browsers display fonts with their own internal engine. browser's engines will ignore any property or value in the css if they can't cope with them, so that your website is still usable if not true to your designer's vision. older browsers are on the way out anyway. note: your mileage may vary. if you have to cater to older browsers, you'll have to use ems and do a bit more math. line width there is a longstanding debate about line length on the web, but here's the story. back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. the solution? columns. of course the problem doesn't go away when we switch to the web. the reader's eyes act like a shuttle going from line to line. to make it easi...
... about line length on the web, but here's the story. back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. the solution? columns. of course the problem doesn't go away when we switch to the web. the reader's eyes act like a shuttle going from line to line. to make it easier on people's eyes, limit line width to around 60 or 70 characters. to achieve this, you can specify a size for your text's container. let's consider this html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <div class="container"> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> <p>[lengthly te...
...And 6 more matches

Example 1 - Learn web development
{ 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 : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellips...
... 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 : 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 ...
.../ 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,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 cl...
...And 6 more matches

Adding vector graphics to the Web - Learn web development
've got elements for creating simple shapes, like <circle> and <rect>. more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode. yes, you can handcode simple svg in a text editor, but for a complex image this quickly starts to get very diff...
...lain svg to save space. also, please refer to this article describing how to prepare svgs for the web. adding svg to your pages in this section we'll go through the different ways in which you can add svg vector graphics to your web pages. the quick way: <img> to embed an svg via an <img> element, you just need to reference it in the src attribute as you'd expect. you will need a height or a width attribute (or both if your svg has no inherent aspect ratio). if you have not already done so, please read images in html. <img src="equilateral.svg" alt="triangle with all three sides equal" height="87" width="100" /> pros quick, familiar image syntax with built-in text equivalent available in the alt attribute. you can make the image into a hyperlink easily by nesting the ...
... svg code inside your html you can also open up the svg file in a text editor, copy the svg code, and paste it into your html document — this is sometimes called putting your svg inline, or inlining svg. make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your document: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time. you can assign classes and ids to svg elements and style them with css, either within the svg or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute a...
...And 6 more matches

Looping code - Learn web development
r again! let's look at an example to perfectly illustrate why loops are such a good thing. ...
...splay: block; } body { margin: 0; } button { position: absolute; top: 5px; left: 5px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0...
...lientwidth; let height = document.documentelement.clientheight; canvas.width = width; canvas.height = height; function random(number) { return math.floor(math.random()*number); } function draw() { ctx.clearrect(0,0,width,height); for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(width), random(height), random(50), 0, 2 * math.pi); ctx.fill(); } } btn.addeventlistener('click',draw); </script> </body> </html> you don't have to understand all the code for now, but let's look at the part of the code that actually draws the 100 circles: for (let i = 0; i < 100; i++) { ctx.beginpath(); ctx.fillstyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(widt...
...And 6 more matches

Object building practice - Learn web development
ly serve to style and position the <h1>, and get rid of any scrollbars or margin around the edge of the page (so that it looks nice and neat). some javascript that serves to set up the <canvas> element and provide a general function that we're going to use. the first part of the script looks like so: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); const width = canvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw. the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants ca...
...nvas.width = window.innerwidth; const height = canvas.height = window.innerheight; this script gets a reference to the <canvas> element, then calls the getcontext() method on it to give us a context on which we can start to draw. the resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it. next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties). note that we are chaining multiple assignments together, to get the variables all set quicker — ...
... color, size) { this.x = x; this.y = y; this.velx = velx; this.vely = vely; this.color = color; this.size = size; } here we include some parameters that define the properties each ball needs in order to function in our program: x and y coordinates — the horizontal and vertical coordinates where the ball starts on the screen. this can range between 0 (top left hand corner) to the width and height of the browser viewport (bottom right hand corner). horizontal and vertical velocity (velx and vely) — each ball is given a horizontal and vertical velocity; in real terms these values are regularly added to the x/y coordinate values when we animate the balls, to move them by this much on each frame. color — each ball gets a color. size — each ball gets a size — this is its ...
...And 6 more matches

nsIScreen
changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) use nsiscreenmanager to obtain references to screens. ...
...enmanager to obtain references to screens. implemented by: @mozilla.org/gfx/screenmanager;1 as a service: var screen = components.classes["@mozilla.org/gfx/screenmanager;1"] .getservice(components.interfaces.nsiscreen); method overview void getavailrect(out long left, out long top, out long width, out long height); void getrect(out long left, out long top, out long width, out long height); void lockminimumbrightness(in unsigned long brightness); void unlockminimumbrightness(in unsigned long brightness); attributes attribute type description colordepth long the screen's color depth; this is the number of bits used to represent a color. read only. pixeldepth long the screen's pixel depth; this i...
... 3 270° of rotation. methods getavailrect() returns a rectangle indicating the portion of the screen that is available for use. note: this returns a rectangle representing the region of the screen that is available for application use. for example, this would exclude the area occupied by the menu bar and dock on mac os x. void getavailrect( out long left, out long top, out long width, out long height ); parameters left the left edge of the available screen rectangle. top the top edge of the available screen rectangle. width the width of the available screen rectangle. height the height edge of the available screen rectangle. getrect() returns a rectangle indicating the entire screen's coordinate space. void getrect( out long left, out ...
...And 6 more matches

CSSMathSum - Web APIs
returned when the stylepropertymapreadonly.get() method is used on a css property whosevalue is created with a calc() function. constructor cssmathsum.cssmathsum() creates a new cssmathsum object. properties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects. event handlers no methods none. ...
...n. constructor cssmathsum.cssmathsum() creates a new cssmathsum object. properties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects. event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator and values, and dig into the values a bit. ...
...sum.cssmathsum() creates a new cssmathsum object. properties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects. event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator and values, and dig into the values a bit. ...
...And 6 more matches

CanvasRenderingContext2D.drawImage() - Web APIs
the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas. ...
...the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas. ...
...the specification permits any canvas image source (canvasimagesource), specifically, a cssimagevalue, an htmlimageelement, an svgimageelement, an htmlvideoelement, an htmlcanvaselement, an imagebitmap, or an offscreencanvas. ...
...And 6 more matches

Compositing example - Web APIs
rves the luma and chroma of the bottom layer, while adopting the hue of the top layer.', 'preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.', 'preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.', 'preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.' ].reverse(); var width = 320; var height = 340; main program when the page loads, this code runs to set up and run the example: window.onload = function() { // lum in srgb var lum = { r: 0.33, g: 0.33, b: 0.33 }; // resize canvas canvas1.width = width; canvas1.height = height; canvas2.width = width; canvas2.height = height; lightmix() colorsphere(); ...
... colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts. ...
...rsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts. ...
...And 6 more matches

HTMLEmbedElement - Web APIs
ent interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <embed> elements. this topic describes the htmlembedelement interface as defined in the standard. it does not address earlier, non-standardized version of the interface. ...
...rdized version of the interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLInputElement - Web APIs
the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
...presentation of <input> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLPreElement - Web APIs
the htmlpreelement interface exposes specific properties and methods (beyond those of the htmlelement interface it also has available to it by inheritance) for manipulating a block of preformatted text (<pre>). ...
...ock of preformatted text (<pre>). ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLSourceElement - Web APIs
the htmlsourceelement interface provides special properties (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating <source> elements. ...
...r manipulating <source> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLTableColElement - Web APIs
the htmltablecolelement interface provides special properties (beyond the htmlelement interface it also has available to it inheritance) for manipulating single or grouped table column elements. ...
...or grouped table column elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLTextAreaElement - Web APIs
the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements. ...
...sentation of <textarea> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

HTMLVideoElement - Web APIs
ediaelement and htmlelement. the list of supported media formats varies from one browser to the other. you should either provide your video in a single format that all the relevant browsers supports, or provide multiple video sources in enough different formats that all the browsers you need to support are covered. ...
...port are covered. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGForeignObjectElement - Web APIs
the svgforeignobjectelement interface provides access to the properties of <foreignobject> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGImageElement - Web APIs
the svgimageelement interface corresponds to the <image> element. ...
... <image> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGLineElement - Web APIs
the svglineelement interface provides access to the properties of <line> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGPathElement - Web APIs
the svgpathelement interface corresponds to the <path> element. ...
...e <path> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGPolygonElement - Web APIs
the svgpolygonelement interface provides access to the properties of <polygon> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGPolylineElement - Web APIs
the svgpolylineelement interface provides access to the properties of <polyline> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGSVGElement - Web APIs
the svgsvgelement interface provides access to the properties of <svg> elements, as well as methods to manipulate them. this interface contains also various miscellaneous commonly-used utility methods, such as matrix operations and the ability to control the time of redraw on visual rendering devices. ...
...endering devices. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...phelement and svgtextpathelement. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGTextPathElement - Web APIs
the svgtextpathelement interface corresponds to the <textpath> element. ...
...extpath> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...efelement and svgaltglyphelement. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

SVGUseElement - Web APIs
svg use dom interface the svguseelement interface corresponds to the <use> element. ...
...he <use> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 6 more matches

Using media queries - CSS: Cascading Style Sheets
media queries are used for the following: to conditionally apply styles with the css @media and @import at-rules. to target specific media for the <style>, <link>, <source>, and other html elements with the media= attribute. to test and monitor media states using the window.matchmedia() and mediaquerylist.addlistener() javascript methods. ...
...ch media feature expression must be surrounded by parentheses. name summary notes any-hover does any available input mechanism allow the user to hover over elements? added in media queries level 4. any-pointer is any available input mechanism a pointing device, and if so, how accurate is it? added in media queries level 4. aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup table, or zero if the d...
...f bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4. device-height height of the rendering surface of the output device deprecated in media queries level 4. device-width width of the rendering surface of the output device deprecated in media queries level 4. display-mode the display mode of the application, as specified ...
...And 6 more matches

max-block-size - CSS: Cascading Style Sheets
the max-block-size css property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. that is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width. the other dimension's maximum length is specified using the max-inline-size property. ...
...ize of an element in the direction opposite that of the writing direction as specified by writing-mode. that is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width. the other dimension's maximum length is specified using the max-inline-size property. ...
.... the other dimension's maximum length is specified using the max-inline-size property. this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind. any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal). see the example in writing-mode, which shows the different writing modes in action. the source for this interactive example is stored in a gi...
...And 6 more matches

text-transform - CSS: Cascading Style Sheets
rectly reinserted by text-transform: lowercase). the language is defined by the lang html attribute or the xml:lang xml attribute. note: support for language-specific cases varies between browsers, so check the browser compatibility table. syntax /* keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* global values */ text-transform: inherit; text-transform: initial; text-transform: unset; capitalize is a keyword that converts the first letter of each word to uppercase. other characters remain unchanged (they retain their original case as written in the element's text). a letter is defined as a character that is part of unicode's letter or number gen...
...cleans this mess up. the capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely-defined behavior. uppercase is a keyword that converts all characters to uppercase. lowercase is a keyword that converts all characters to lowercase. none is a keyword that prevents the case of all characters from being changed. full-width is a keyword that forces the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual east asian scripts (like chinese or japanese). full-size-kana generally used for <ruby> annotation text, the keyword converts all small kana characters to the equivalent full-size kana, to compensate for legibility issues at the small font siz...
... may be difficult for people with cognitive concerns such as dyslexia to read. mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1 formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | capitalize | uppercase | lowercase | full-width | full-size-kana examples none <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transform: none; } strong { float: right; } this demonstrates no text transformation. capitalize (general) <p>initial...
...And 6 more matches

Setting up adaptive streaming media sources - Developer guides
ia players with a link to lookup files or playlists specifying the name and location of these stream folders. mpeg-dash encoding mpeg-dash is an adaptive bitrate streaming technique that enables streaming of media content over the internet delivered from conventional http web servers. a media presentation description (mpd) file is used to hold the information on the various streams and the bandwidths they are associated with. in your video source (src) attribute you point to the mpd instead of to the media file as you would with non-adaptive media. the mpd file tells the browser where the various pieces of media are located, it also includes meta data such as mimetype and codecs and there are other details such as byte-ranges in there too - it is an xml document and in many cases will be ge...
...r both live transmission and vod at a later stage *sidx or segmentindexbox is a structure describing a segment by giving its earliest presentation time and other meta-data and can often make up a large portion of the mpd file. ondemand profile this profile will allow switching between streams 'on demand' - that is to say that you only need provide a set of contiguous files and specify the bandwidth for each one and the appropriate file will be chosen automatically. here's a simple example that provides an audio track representation and four separate video representations. <?xml version="1.0" encoding="utf-8"?> <mpd xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="urn:mpeg:dash:schema:mpd:2011" xsi:schemalocation="urn:mpeg:dash:schema:mpd:2011 dash-mpd.xsd" type="static" ...
...:2011 dash-mpd.xsd" type="static" mediapresentationduration="pt654s" minbuffertime="pt2s" profiles="urn:mpeg:dash:profile:isoff-on-demand:2011"> <baseurl>http://example.com/ondemand/</baseurl> <period> <!-- english audio --> <adaptationset mimetype="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="480" height="360"> <baseurl>elephantsdream_h264bpl30_0100.264.dash</baseurl> <...
...And 6 more matches

<input type="image"> - HTML: Hypertext Markup Language
image rather than text. 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. value none — the value attribute should not be specified. events none. supported common attributes alt, src, width, height, formaction, formenctype, formmethod, formnovalidate, formtarget idl attributes none. methods none. value <input type="image"> elements do not accept value attributes. the path to the image to be displayed is specified in the src attribute. additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the ...
...if provided, it must be a non-empty string appropriate as a label for the button. for example, if ...
...if provided, it must be a non-empty string appropriate as a label for the button. for example, if you have a gr...
...And 6 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
ect of the "arcs" value with fallback to "miter" if not supported. ...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "beve...
...the corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect. note: i...
...And 6 more matches

<feComposite> - SVG: Scalable Vector Graphics
egoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k4 dom interface this element implements the svgfecompositeelement interface. ...
...compositing operators. the first set wipes out the background image by flooding with opaque white. ...
...runits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="inflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1" result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="in" result="comp"/> <femerge> <femergenode in="flood"/> <femergenode in="comp"/> </femerge> </filter> <filter id="outflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-...
...And 6 more matches

Block and Line Layout Cheat Sheet - Archive of obsolete content
frame tree that is "too deep". (see nsframe::isframetreetoodeep().) ns_frame_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...
...nes and other blocks, stacked vertically. a block 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. ...
...nline frame has any children that have a percentage value set (via the style context) for the width or height of 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 th...
...And 5 more matches

Index - Archive of obsolete content
ummary! 182 max xul attributes, xul reference no summary! 183 maxheight xul attributes, xul reference no summary! 184 maxlength xul attributes, xul reference no summary! 185 maxpos xul attributes, xul reference no summary! 186 maxrows xul attributes, xul reference no summary! 187 maxwidth xul attributes, xul reference no summary! 188 member xul attributes, xul reference no summary! 189 menu xul attributes, xul reference no summary! 190 menuactive xul attributes, xul reference no summary! 191 menuitem.key xul attributes, xul reference no summary! 192 menuitem.name xul attrib...
...no summary! 193 menuitem.type xul attributes, xul reference more information on adding checkmarks to menus in the xul tutorial 194 min xul attributes, xul reference no summary! 195 minheight xul attributes, xul reference no summary! 196 minresultsforpopup xul attributes, xul reference no summary! 197 minwidth xul attributes, xul reference no summary! 198 mode no summary! 199 modifiers xul attributes, xul reference no summary! 200 mousethrough xul attributes, xul reference no summary! 201 movetoclick no summary! 202 multiline xul attributes, xul reference no summary! 203 multi...
...e xul attributes, xul reference no summary! 399 treecell.src xul attributes, xul reference no summary! 400 treecol.editable xul attributes, xul reference no summary! 401 treecol.src xul attributes, xul reference no summary! 402 treecol.type xul attributes, xul reference no summary! 403 treecol.width xul attributes, xul reference no summary! 404 treeitem.label xul attributes, xul reference no summary! 405 treelines no summary! 406 type no summary! 407 unread xul, xul attributes, xul reference no summary! 408 uri xul, xul attribute, xul reference no summary! 409 usera...
...And 5 more matches

splitter - Archive of obsolete content
etermines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy element inside the splitter when it is used for collapsing. none no collapsing occurs. before when the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter. r...
...ect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
... before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. ...
...And 5 more matches

Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
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 was abando...
...he class name stuck, kind of like a barnacle. giving the fish some style with the markup all set, it was time to style. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. this was most easily accomplished by floating the div elements themselves. ...
...le. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column table, only without the table. this was most easily accomplished by floating the div elements themselves. since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} by making the content of each card 45% the width of the containing element, and adding 2% margin to both the left and right sides, each card's element box is 49% as wide as the parent. two of them side by side will take up 98% the width of the parent element. this leaves out 2% as "wasted space," so to speak. i did it that way because it's a lot less likely to trigg...
...And 5 more matches

Supporting older browsers - Learn web development
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. ...
...ay find you can give a decent experience by using css in this way. we add a simpler layout based on older and well-supported techniques, then use the newer css to create the layout that over 90% of your audience will see. there are cases, however, when the fallback code will need to include something that the new browsers will also interpret. a good example of this is if we were to add percentage widths to our floated 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. * ...
...ainer. 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 5 more matches

How CSS is structured - Learn web development
pected because something else in the stylesheet has more specificity. recognizing that more than one rule could apply to an element, is the first step in fixing these kinds of issues. properties and values at its most basic level, css consists of two components: properties: these are human-readable identifiers that indicate which stylistic features you want to modify. for example, font-size, width, background-color. values: each property is assigned a value. this value indicates how to style the property. the example below highlights a single property and value. the property name is color and the value is blue. when a property is paired with a value, this pairing is called a css declaration. css declarations are found within css declaration blocks. in the example below, highlighting ...
...imary way of defining layout and styling for a document. the css engine calculates which declarations apply to every single element of a page. important: css properties and values are case-sensitive. the property and value in each pair is separated by a colon. (:) look up different values of properties listed below. write css rules that apply styling to different html elements: font-size width background-color color border important: if a property is unknown, or if a value is not valid for a given property, the declaration is processed as invalid. it is completely ignored by the browser's css engine. important: in css (and other web standards), it has been agreed that us spelling is the standard where there is language variation or uncertainty. for example, color should be spe...
...pelled color, as colour will not work. functions while most values are relatively simple keywords or numeric values, there are some values which take the form of a function. an example would be the calc() function, which can do simple math within css: <div class="outer"><div class="box">the inner box is 90% - 30px.</div></div> .outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } this renders as: a function consists of the function name, and parentheses to enclose the values for the function. in the case of the calc() example above, the values define the width of this box to be 90% of the containing block width, minus 30 pixels. the result of the calculation isn't something that can be computed i...
...And 5 more matches

Styling links - Learn web development
e link styles build on one another, for example the styles in the first rule will apply to all the subsequent ones, and when a link is being activated, it is also being hovered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. ...
...cooler and just as functional as our example above. 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 insert the example we showed above. ...
...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>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</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;"> <input id="soluti...
...And 5 more matches

Client-side form validation - Learn web development
ion> </datalist> </p> <p> <label for="t2">what's your e-mail address?</label> <input type="email" id="t2" name="email"> </p> <p> <label for="t3">leave a short message</label> <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea> </p> <p> <button>submit</button> </p> </form> and now some css to style the html: form { font: 1em sans-serif; max-width: 320px; } p > label { display: block; } input[type="text"], input[type="email"], input[type="number"], textarea, fieldset { width : 100%; border: 1px solid #333; box-sizing: border-box; } input:invalid { box-shadow: 0 0 5px 1px red; } input:focus:invalid { box-shadow: none; } this renders as follows: see validation-related attributes for a complete list of attributes that can ...
...t here is that setting the novalidate attribute on the form is what stops the form from showing its own error message bubbles, and allows us to instead display the custom error messages in the dom in some manner of our own choosing. ...
...tead display the custom error messages in the dom in some manner of our own choosing. ...
...And 5 more matches

How to build custom form controls - Learn web development
essary in order to manage the differences between the active state and the open state that do not exactly match. .select .optlist.hidden { /* this is a simple way to hide the list in an accessible way; we will talk more about accessibility in the end */ max-height: 0; visibility: hidden; } note: we could also have used transform: scale(1, 0) to give the optionlist no height and full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free 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. ...
...== 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 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make su...
... .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 50%, #f0f0f0); } .select .value { /* because the value can be wider than our control, we have to make sure it will not change the control's width. if the content overflows, we display an ellipsis */ display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow: ellipsis; vertical-align: top; } we don't need an extra element to design the down arrow; instead, we're using the :after pseudo-element. it could also be implemented using a simple background image on the select class. .select:after ...
...And 5 more matches

Beginning our React todo list - Learn web development
styles paste the following css code into src/index.css so that it replaces what's currently there: /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.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 { ov...
...t; 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) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; bord...
... #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * ...
...And 5 more matches

MathML Demo: <mspace> - space
mathml demo: <mspace> - space the background color of <mspace> elements has been set to yellow for easier viewing. you can set the width ∑ x y height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
... elements (click the math text to view the numeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
...umeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
...And 5 more matches

Element - Web APIs
, the htmlelement interface is the base interface for html elements, while the svgelement interface is the basis for all svg elements. most functionality is specified further down the class hierarchy. languages outside the realm of the web platform, like xul through the xulelement interface, also implement element. ...
...implement element. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

GlobalEventHandlers.onanimationiteration - Web APIs
which automatically pauses at the end of each iteration, 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. ...
...es at the end of each iteration, 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. ...
...xt iteration. much of this code is the same as in other examples of animation events, so it may look familiar. ...
...And 5 more matches

HTMLAudioElement - Web APIs
the htmlaudioelement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. it's based on, and inherits properties and methods from, the htmlmediaelement interface. ...
..., the htmlmediaelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLBRElement - Web APIs
the htmlbrelement interface represents a html line break element (<br>). it inherits from htmlelement. ...
...>). it inherits from htmlelement. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLBaseElement - Web APIs
the htmlbaseelement interface contains the base uri for a document. this object inherits all of the properties and methods as described in the htmlelement interface. ...
...bed in the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLButtonElement - Web APIs
the htmlbuttonelement interface provides properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <button> elements. ...
...r manipulating <button> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLDListElement - Web APIs
the htmldlistelement interface provides special properties (beyond those of the regular htmlelement interface it also has available to it by inheritance) for manipulating definition list (<dl>) elements. ...
... definition list (<dl>) elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLDataElement - Web APIs
the htmldataelement interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <data> elements. ...
...for manipulating <data> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLDivElement - Web APIs
the htmldivelement interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <div> elements. ...
... for manipulating <div> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLElement - Web APIs
the htmlelement interface represents any html element. some elements directly implement this interface, while others implement it via an interface that inherits it. ...
... that inherits it. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLFieldSetElement - Web APIs
the htmlfieldsetelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset> elements. ...
...sentation of <fieldset> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLHeadElement - Web APIs
the htmlheadelement interface contains the descriptive information, or metadata, for a document. this object inherits all of the properties and methods described in the htmlelement interface. ...
...bed in the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLHeadingElement - Web APIs
the htmlheadingelement interface represents the different heading elements, <h1> through <h6>. it inherits methods and properties from the htmlelement interface. ...
...s from the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLHtmlElement - Web APIs
the htmlhtmlelement interface serves as the root node for a given html document. this object inherits the properties and methods described in the htmlelement interface. you can retrieve the htmlhtmlelement object for a given document by reading the value of the document.documentelement property. ...
...ocument.documentelement property. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLLIElement - Web APIs
the htmllielement interface exposes specific properties and methods (beyond those defined by regular htmlelement interface it also has available to it by inheritance) for manipulating list elements. ...
...) for manipulating list elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLLabelElement - Web APIs
the htmllabelelement interface gives access to properties specific to <label> elements. it inherits methods and properties from the base htmlelement interface. ...
...m the base htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLLegendElement - Web APIs
the htmllegendelement is an interface allowing to access properties of the <legend> elements. it inherits properties and methods from the htmlelement interface. ...
...s from the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLMapElement - Web APIs
the htmlmapelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements. ...
...and presentation of map elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the htmlmediaelement is an event handler, fired whenever an encrypted event occurs, denoting the media is encrypted. this interface inherits from the extendableevent interface. ...
...bleevent interface. ...
...isplay: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLMetaElement - Web APIs
the htmlmetaelement interface contains descriptive metadata about a document. it inherits all of the properties and methods described in the htmlelement interface. ...
...bed in the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLMeterElement - Web APIs
the html <meter> elements expose the htmlmeterelement interface, which provides special properties and methods (beyond the htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements. ...
...presentation of <meter> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLModElement - Web APIs
the htmlmodelement interface provides special properties (beyond the regular methods and properties available through the htmlelement interface they also have available to them by inheritance) for manipulating modification elements, that is <del> and <ins>. ...
...lements, that is <del> and <ins>. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLOListElement - Web APIs
the htmlolistelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating ordered list elements. ...
...nipulating ordered list elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLOptGroupElement - Web APIs
the htmloptgroupelement interface provides special properties and methods (beyond the regular htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup> elements. ...
...sentation of <optgroup> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLOptionElement - Web APIs
the htmloptionelement interface represents <option> elements and inherits all classes and methods of the htmlelement interface. ...
...ods of the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLParagraphElement - Web APIs
the htmlparagraphelement interface provides special properties (beyond those of the regular htmlelement object interface it inherits) for manipulating <p> elements. ...
...s) for manipulating <p> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLParamElement - Web APIs
the htmlparamelement interface provides special properties (beyond those of the regular htmlelement object interface it inherits) for manipulating <param> elements, representing a pair of a key and a value that acts as a parameter for an <object> element. ...
...arameter for an <object> element. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLProgressElement - Web APIs
the htmlprogresselement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements. ...
...sentation of <progress> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLQuoteElement - Web APIs
the htmlquoteelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating quoting elements, like <blockquote> and <q>, but not the <cite> element. ...
... <q>, but not the <cite> element. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLScriptElement - Web APIs
s should be served with the application/javascript mime type, but browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv. if the script is blocked, its element receives an error event; otherwise, it receives a load event. ...
...erwise, it receives a load event. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLShadowElement - Web APIs
the htmlshadowelement interface represents a <shadow> html element, which is used in shadow dom. ...
...ent, which is used in shadow dom. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTableCaptionElement - Web APIs
the htmltablecaptionelement interface special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating table caption elements. ...
...ipulating table caption elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTableRowElement - Web APIs
the htmltablerowelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html table. ...
...ntation of rows in an html table. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTableSectionElement - Web APIs
the htmltablesectionelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html table. ...
...ers and bodies, in an html table. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTemplateElement - Web APIs
the htmltemplateelement interface enables access to the contents of an html <template> element. ...
...ts of an html <template> element. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTimeElement - Web APIs
the htmltimeelement interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <time> elements. ...
...for manipulating <time> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTitleElement - Web APIs
the htmltitleelement interface contains the title for a document. this element inherits all of the properties and methods of the htmlelement interface. ...
...ods of the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLTrackElement - Web APIs
the htmltrackelement interface represents an html <track> element within the dom. this element can be used as a child of either <audio> or <video> to specify a text track containing information such as closed captions or subtitles. ...
... as closed captions or subtitles. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

HTMLUListElement - Web APIs
the htmlulistelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating unordered list elements. ...
...pulating unordered list elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

Capabilities, constraints, and settings - Web APIs
nstraints in the order specified in the constraint set. the most important thing to understand is that most constraints aren't requirements; instead, they're requests. there are exceptions, and we'll get to those shortly. requesting a specific value for a setting most simply, each constraint may be a specific value indicating a desired value for the setting. for example: let constraints = { width: 1920, height: 1080, aspectratio: 1.777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video size is desired, with the standard 16:9 aspect ratio. there's no guarantee that the resulting track will match any of these, but the user agent should do its best to m...
...ptable for a property's value. you can specify ranges with either or both minimum and maximum values, and you can even specify an ideal value within the range, if you choose. if you provide an ideal value, the browser will try to get as close as possible to matching that value, given the other constraints specified. ...
...provide an ideal value, the browser will try to get as close as possible to matching that value, given the other constraints specified. let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"] || !supports["height"] || !supports["framerate"] || !supports["facingmode"]) { // we're missing needed properties, so handle that error. ...
...And 5 more matches

SVGAnimateElement - Web APIs
the svganimateelement interface corresponds to the <animate> element. ...
...animate> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGAnimateMotionElement - Web APIs
the svganimatemotionelement interface corresponds to the <animatemotion> element. ...
...emotion> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGAnimateTransformElement - Web APIs
the svganimatetransformelement interface corresponds to the <animatetransform> element. ...
...ansform> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGDefsElement - Web APIs
the svgdefselement interface corresponds to the <defs> element. ...
...e <defs> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGFEFuncAElement - Web APIs
the svgfefuncaelement interface corresponds to the <fefunca> element. ...
...fefunca> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGFEFuncBElement - Web APIs
the svgfefuncbelement interface corresponds to the <fefuncb> element. ...
...fefuncb> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGFEFuncGElement - Web APIs
the svgfefuncgelement interface corresponds to the <fefuncg> element. ...
...fefuncg> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGFEFuncRElement - Web APIs
the svgfefuncrelement interface corresponds to the <fefuncr> element. ...
...fefuncr> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGFilterElement - Web APIs
the svgfilterelement interface provides access to the properties of <filter> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGGElement - Web APIs
the svggelement interface corresponds to the <g> element. ...
... the <g> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGGeometryElement - Web APIs
the svggeometryelement interface represents svg elements whose rendering is defined by geometry with an equivalent path, and which can be filled and stroked. this includes paths and the basic shapes. ...
...the basic shapes. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGLinearGradientElement - Web APIs
the svglineargradientelement interface corresponds to the <lineargradient> element. ...
...radient> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGMaskElement - Web APIs
the svgmaskelement interface provides access to the properties of <mask> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGPatternElement - Web APIs
the svgpatternelement interface corresponds to the <pattern> element. ...
...pattern> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGRadialGradientElement - Web APIs
the svgradialgradientelement interface corresponds to the <radialgradient> element. ...
...radient> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGSetElement - Web APIs
the svgsetelement interface corresponds to the <set> element. ...
...he <set> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

SVGSwitchElement - Web APIs
the svgswitchelement interface corresponds to the <switch> element. ...
...<switch> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 5 more matches

WebGLRenderingContext.texSubImage2D() - Web APIs
the webglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...ffset, yoffset, format, type, htmlcanvaselement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, htmlvideoelement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagebitmap? ...
..., format, type, htmlvideoelement? pixels); void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, imagebitmap? ...
...And 5 more matches

Variable fonts guide - CSS: Cascading Style Sheets
they let you access all the variations contained in a given font file via css and a single @font-face reference. this article will give you all you need to know to get you started using variable fonts. warning: in order to use variable fonts on your operating system, you need to make sure that it is up to date. ...
...se variable fonts in web pages or the firefox developer tools. variable fonts: what they are, and how they differ to better understand what's different about variable fonts, it is worth reviewing what non-variable ones are like and how they compare. standard (or static) fonts in the past, a typeface would be produced as a number of individual fonts, and each font would represent one specific width/weight/style combination. so you would have separate files for 'roboto regular', 'roboto bold', and 'roboto bold italic' — meaning that you could end up with 20 or 30 different font files to represent a complete typeface (it could be several times that for a large typeface that has different widths as well). in such a scenario, in order to use a typeface for typical use on a site for body copy...
...more data being downloaded (usually around 20k or more per file). variable fonts with a variable font, all of those permutations can be contained in a single file. that file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different size headings in different weights for better readability at each size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to us...
...And 5 more matches

CSS reference - CSS: Cascading Style Sheets
r()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-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-s...
...border-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-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-sp...
...order-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-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradie...
...And 5 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
prefixed with -epub-. webkit-only properties note: avoid using on websites. these properties will only work in webkit applications. ...
...kit applications. ...
...ct-ratio b -webkit-backdrop-filter -webkit-background-composite -webkit-border-after** -webkit-border-after-color** -webkit-border-after-style** -webkit-border-after-width** -webkit-border-before** -webkit-border-before-color** -webkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-bo...
...And 5 more matches

border-block-end - CSS: Cascading Style Sheets
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. 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...
...ponds 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. ...
...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 5 more matches

border-bottom - 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. 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; ... ...
...-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 definition initial valueas each of the properties of the shor...
...ttom: 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 definition initial valueas each of the properties of the shorthand:border-bottom-width: mediumborder-bottom-style: noneborder-bottom-color: currentcolorapplies toall elements. ...
...And 5 more matches

column-rule - CSS: Cascading Style Sheets
note: as with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
...awn 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. it is a shorthand property that sets the individual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color. note: as with all shorthand properties, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit;...
...possibly overriding values previously set using non-shorthand properties). syntax column-rule: dotted; column-rule: solid 8px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order. ...
...And 5 more matches

flex-basis - CSS: Cascading Style Sheets
y sets the initial main size of a flex item. it sets the size of the content box unless otherwise set with box-sizing. 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. ...
...e 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: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. ...
...negative values are invalid. defaults to auto. content indicates automatic sizing, based on the flex item’s content. note: this value was not present in the initial release of flexible box layout, and thus some older implementations will not support it. the ...
...And 5 more matches

flex - CSS: Cascading Style Sheets
o 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: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values. one-value synta...
... this case it is interpreted as flex: <number> 1 0; the <flex-shrink> value is assumed to be 1 and the <flex-basis> value is assumed to be 0. one of the keywords: none, auto, or initial. two-value syntax: the first value must be a <number> and it is interpreted as <flex-grow>. the second value must be one of: a <number>: then it is interpreted as <flex-shrink>. a valid value for width: then it is interpreted as <flex-basis>. three-value syntax: the values must be in the following order: a <number> for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. values initial the item is sized according to its width and height properties. it shrinks to its minimum size to fit the container, but does not grow to absorb any ex...
...for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. values initial the item is sized according to its width and height properties. it shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. this is equivalent to setting "flex: 0 1 auto". auto the item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. this is equivalent to setting "flex: 1 1 auto". none the item is sized according to its width and height properties. it is fully inflexible: it neither shrinks nor grows in relation to the flex container. this is equivalent to setting "flex: 0 0 auto". <'...
...And 5 more matches

font-variant-east-asian - CSS: Cascading Style Sheets
ruby t...
... ruby this keyword forces the use of ...
... ruby this keyword forces the use of special glyphs for ruby characters. as these are usuall...
...And 5 more matches

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. ...
... the sizes attribute has an effect only when the <source> element is the direct child of a <picture> element. src required for <audio> and <video>, address of the media resource. ...
...> element. src required for <audio> and <video>, address of the media resource. the value of this attribute is ignored when the <source> element is placed inside a <picture> element. srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source for the browser to use. each string is composed of: one url specifying an image. a width descriptor, which consists of a string containing a positive integer directly followed by "w", such as 300w. the default value, if missing, is the infinity. a pixel density descriptor, that is a positive floating number directly followed by "x". the default value, if missing, is 1x. each string in the list must have at least a width descriptor or a pixel density descriptor to be valid. amon...
...And 5 more matches

Classes - JavaScript
s are in fact "special functions", and just as you can define function expressions and function declarations, the class syntax has two components: class expressions and class declarations. class declarations one way to define a class is using a class declaration. to declare a class, you use the class keyword with the name of the class ("rectangle" here). class rectangle { constructor(height, width) { this.height = height; this.width = width; } } hoisting an important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. you first need to declare your class and then access it, otherwise code like the following will throw a referenceerror: const p = new rectangle(); // referenceerror class recta...
... const p = new rectangle(); // referenceerror class rectangle {} class expressions a class expression is another way to define a class. class expressions can be named or unnamed. the name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) name property, though). ...
...or class rectangle {} class expressions a class expression is another way to define a class. class expressions can be named or unnamed. the name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) name property, though). // unnamed let rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // output: "rectangle" // named let rectangle = class rectangle2 { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // output: "rectangle2" note: class expressions are subject to the same hoisting restrictions as described in the class declarations section. class body and method ...
...And 5 more matches

Patterns - SVG: Scalable Vector Graphics
« previousnext » patterns patterns are arguably one of the more confusing fill types to use in svg. they're also very powerful, so they're worth talking about and getting at least a fundamental grasp on. like gradients, the <pattern> element should be put in the <defs> section of your svg file. ...
...ttp://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#gradient2)"/> <circle cx="25" cy="25" r="20" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#pattern)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you ...
... can be styled using any of the styles you've learned before, including gradients and opacity. here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their size. in the example above, we've defined a width and height attribute on the pattern element to describe how far the pattern should go before it begins repeating itself again. there are also x and y attributes available if you want to offset the start point of this rectangle somewhere within your drawing. the reason they've been used here is described below. as with the gradientunits attribute used above, patterns also have an attribute, patte...
...And 5 more matches

Compiling an Existing C Module to WebAssembly - WebAssembly
a. luckily, the canvas api has canvasrenderingcontext2d.getimagedata — that gives you an uint8clampedarray containing the image data in rgba: async function loadimage(src) { // load image const imgblob = await fetch(src).then(resp => resp.blob()); const img = await createimagebitmap(imgblob); // make canvas same size as image const canvas = document.createelement('canvas'); canvas.width = img.width; canvas.height = img.height; // draw image onto canvas const ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); return ctx.getimagedata(0, 0, img.width, img.height); } now it's "only" a matter of copying the data from javascript into wasm. for that, you need to expose two additional functions — one that allocates memory for the image inside wasm and one that frees i...
...the pointer returned by malloc() is the address of the first memory cell of that buffer. ...
...the pointer returned by malloc() is the address of the first memory cell of that buffer. when the pointer is returned to javascript land, it is treated as just a number. ...
...And 5 more matches

panel - Archive of obsolete content
ned by a different add-on sdk based extension. if you want to close an existing panel without opening a new one, you can call the hide() or the destroy() method. panel content the panel's content is specified as html, which is loaded from the url supplied in the contenturl option to the panel's constructor. you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 180, height: 180, contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs. to do this, save the html in your add-on's data directory and load it using the data.url() method exported by the self module, like this: var mypanel = ...
...ntrusted" warning) does not work, so panels which trigger it will be broken (bug 1031554). mouse button shortcuts, such as using the middle button to open a link in a new page, don't work. scrolling using keyboard doesn't work properly (bug 1001914) globals constructors panel(options) creates a panel. parameters options : object optional options: name type width number the width of the panel in pixels. optional. height number the height of the panel in pixels. optional. position object, button, widget the position of the panel. ignored if the panel is opened by a widget. this may be one of three things: a toggle button. if this is supplied the panel will be shown attached...
...} }).show(); // show the panel centered vertically and // aligned to the left of the content area require("sdk/panel").panel({ position: { left: 0 } }).show(); // centered panel, default behavior require("sdk/panel").panel({}).show(); as with the css top, bottom, left, and right properties, setting both top and bottom or both left and right will implicitly set the panel's height or width relative to the content window: // show the panel centered horizontally, with: // - the top edge 40px from the top // of the content window // - the bottom edge 100px from the bottom // of the content window require("sdk/panel").panel({ position: { top: 40, bottom: 100 } }).show(); if you set both top and bottom, but also set the panel's height explicitly using the height p...
...And 4 more matches

Canvas code snippets - Archive of obsolete content
number of pixels of a certain color in a canvas the following function will return the number of pixels in a canvas that have the rgb color of r, g and b. this can be very useful to compare for example if a user has painted over another area as explained in this blog post. ...
...sring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.prototype[method] = function() { this.ctx[method].apply(this.ctx, arguments); return this; }; } for (let m of gettermethods) { let method = m; canvas2dcontext.prototype[metho...
...d, the remotepageloaded method fires. this method gets a reference to the iframe's window and draws this window to a canvas object. note that this only works if you are running the page from chrome. if you try running the code as a plain webpage, you will get a 'security error" code: "1000' error. ...
...And 4 more matches

The Box Model - Archive of obsolete content
, screen sizes and resolutions. the xul box model is a significant improvement over the html layout model, which is mostly vertical. with xul you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design. any xul interface can be broken down into the following basic components: boxes text images alignment and flexibility widths and heights margins and paddings menus, toolbar buttons, and even the most complex elements in xul are composed of these simple ingredients. complex elements are created from simpler ones through xbl, which will be covered later on. once you grasp this simple idea, you'll be able to use the dom inspector and css to mold xul elements and layouts with great precision and flexibility. most of t...
...e "parrot" button still has a flex value of 1. the "cat" button is now larger in a 3 to 1 proportion. note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. if the label of the "parrot" button was something much longer, the size ratio would not be kept. you can have even more control over the size of flexible elements using the minwidth, maxwidth, minheight and maxheight attributes, or their css counterparts: min-width, max-width, min-height and max-height. the latter are recommended to keep style code in the skin section of the chrome. as their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much. all css properties involving lengths should b...
...enever possible. using the former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. a common exception to this rule is when your css is directly related to images, where you'll usually handle measurements in pixels (px). also, just like in html, you can control the dimensions of inflexible elements using the 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 ...
...And 4 more matches

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
are specified. ...
... javascript and css since mozil...
... javascript and css since mozilla supports the css standards, it also supports the css dom standard for setting css through javascript. ...
...And 4 more matches

Things I've tried to do with XUL - Archive of obsolete content
short answer: you can't easily, at least not yet. ...
...xperiences here. how do i use percentage-based height/width with xul? short answer: you can't easily, at least not yet. this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that sizes sanely when the user resizes the window is unfortunately very difficult. (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that resizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" ...
...ways maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="1"> <box height="30%" flex="1" style="background: green;"/> <box height="20%" flex="1" style="background: red;"/> <box height="50%" flex="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated. so, as soon as you ...
...And 4 more matches

menulist - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. ...
...if the text does not match any of the items in the list, the menu selection is cleared. if this attribute is false, the selection is never updated to match the text box. ...
...And 4 more matches

stack - Archive of obsolete content
element is placed on the bottom and each successive child is placed above the previous. all elements are displayed at once. child elements may also be placed at absolute positions within the stack. the top, right, bottom, and left attributes on a child of the stack specify the position of that element. ...
... stack. the top, right, bottom, and left attributes on a child of the stack specify the position of that element. the bottom and right attributes can also be used in conjunction with top and left to set the width and/or height of the children of the stack. note that bottom and right attributes, unlike rect, are relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set. in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results. more information is available in th...
...nd "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results. more information is available in the xul tutorial. examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> in this example, the resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. --> </hbox> </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, ...
...And 4 more matches

titlebar - Archive of obsolete content
etting allowevents="true" on the titlebar element. the titlebar will send a command event after the move is complete. examples this xul file will create a hud-style window that can be moved with the mouse. it will close if the mouse button is released. ...
... properties inherited propertie...
... properties inherited properties align, , allowevents, , ...
...And 4 more matches

treecol - Archive of obsolete content
place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> ...
... the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the col...
...And 4 more matches

Fundamental text and font styling - Learn web development
testing as you go. the five names are defined as follows: term definition example serif fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) my big red elephant sans-serif fonts that don't have serifs. my big red elephant monospace fonts where every character has the same width, typically used in code listings. my big red elephant cursive fonts that are intended to emulate handwriting, with flowing, connected strokes. my big red elephant fantasy fonts that are intended to be decorative. my big red elephant font stacks since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font could f...
...uch as percentages), however the most common units you'll use to size text are: px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. why bother? it is quite natural once you get used to it, and you can use em to size everything, not just text. you can have an entire website sized using em, which makes maintenance easy. rems: th...
...numeric boldness values that provide finer grained control than the above keywords, if needed. text-transform: allows you to set your font to be transformed. values include: none: prevents any transformation. uppercase: transforms all text to capitals. lowercase: transforms all text to lower case. capitalize: transforms all words to have the first letter capitalized. full-width: transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like chinese, japanese, korean). text-decoration: sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) available values are: none: unsets any text...
...And 4 more matches

Styling web forms - Learn web development
"range"> <input type="file"> elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. <progress> and <meter> again, we'll describe what can be done in terms of styling these elements in advanced form styling. the real problem with all these controls is that they have a very complex structure, and beyond some basic styling (such as changing the width or margin of the control) you generally don't have the ability to style the controls' internal components (such as the date picker calendar, or the button on the <select> that causes the options list to display) making up those widgets. if you want to thoroughly customize those widgets, you really have to create your own using html, css, and javascript. this is beyond the scope of the core form ...
...reason to use <button> elements over 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...
... 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 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 appli...
...And 4 more matches

Video and Audio APIs - Learn web development
that gets longer as the time elapses. to get an idea of what the finished product will look like, check out our finished version. exploring the css now open the css file and have a look inside. the css for the example is not too complicated, but we'll highlight the most interesting bits here. first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400px; border-radius: 10px; position: absolute; bottom: 20px; left: 50%; margin-left: -200px; background-color: black; box-shadow: 3px 3px 5px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden. in our javascript later on, we will set the control...
...that you can use text properties to style them — like color and text-shadow. last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position: relative; } .timer div { position: absolute; background-color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } .timer span { position: absolute; z-index: 3; left: 19px; } we set the outer .timer <div> to have flex: 5, so it takes up most of the width of the controls bar. we also give it position: relative, so that we can position elements inside it conveniently according to it's boundaries, and not the boundaries of the <body> element. the inner <div> is abso...
... the <span> is also absolutely positioned to sit near the left hand side of the timer bar. ...
...And 4 more matches

Mozilla Quirks Mode Behavior
s 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 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 ...
...or the background attribute sets the background url to empty only in quirks mode. the topmargin, bottommargin, leftmargin, and rightmargin attributes on body are supported only in quirks mode (bug 9258). obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id...
...ment changes the color of text decorations specified on ancestor elements. proposed to apply in all modes: bug 747517. in quirks mode, text-decoration is propagated into floating and absolutely positioned elements. (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in quirks mode, text-decoration is not propagated into tables (bug 572713). maybe (firefox 3) when computing the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be). obsolete since gecko 8.0 prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) text-decoration in quirks mode had line thickness and position adjusted on descendant text to match the descendant. tables td, th, ...
...And 4 more matches

imgIEncoder
modules/libpr0n/public/imgiencoder.idlscriptable please add a summary to this article. ...
...n pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); void startimageencode(in pruint32 width, in pruint32 height, in pruint32 inputformat, in astring outputoptions); constants possible values for input format (note that not all image formats support saving alpha channels): constant value description input_format_rgb 0 input is rgb each pixel is ...
.... xoffset=# -- default: "0" yoffset=# -- default: "0" where to draw the frame, relative to the canvas. jpeg: ----- quality=# -- default: "92" quality of compression, 0-100 (worst-best). quality >= 90 prevents down-sampling of the color channels. ...
...And 4 more matches

CDATASection - Web APIs
a cdata section: <![cdata[ < > & ]]> with all kinds of unescaped text.</foo> the only sequence which is not allowed within a cdata section is the closing sequence of a cdata section itself, ]]>: <![cdata[ ]]> will cause an error ]]> note that cdata sections should not be used within html; they only work in xml. ...
...thin html; they only work in xml. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

CanvasRenderingContext2D - Web APIs
for the drawing surface of a <canvas> element. it is used for drawing shapes, text, images, and other objects. see the interface's properties and methods in the sidebar and below. the canvas tutorial has more explanation, examples, and resources, as well. ...
... html <canvas> element to work with: <canvas id="my-house" width="300" height="300"></canvas> to get the canvas' 2d rendering context, call getcontext() on the <canvas> element, supplying '2d' as the argument: const canvas = document.getelementbyid('my-house'); const ctx = canvas.getcontext('2d'); with the context in hand, you can draw anything you like. this code draws a house: // set line width ctx.linewidth = 10; // wall ctx.strokerect(75, 140, 150, 110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. canvasrenderingcontext2...
... 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. canvasrenderingcontext2d.clearrect() sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content. canvasrenderingcontext2d.fillrect() draws a filled rectangle at (x, y) position whose size is determined by width and height. canvasrenderingcontext2d.strokerect() paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. drawing text the fol...
...And 4 more matches

Manipulating video using canvas - Web APIs
canvas c1 is used to display the current frame of the original video, while c2 is used to display the vide...
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after performing the chroma-keying effect; c2 is prelo...
...r starts playing the video. var processor; processor.doload = function doload() { this.video = document.getelementbyid('video'); this.c1 = document.getelementbyid('c1'); this.ctx1 = this.c1.getcontext('2d'); this.c2 = document.getelementbyid('c2'); this.ctx2 = this.c2.getcontext('2d'); let self = this; this.video.addeventlistener('play', function() { self.width = self.video.videowidth / 2; self.height = self.video.videoheight / 2; self.timercallback(); }, false); }, this code grabs references to the elements in the xhtml document that are of particular interest, namely the video element and the two canvas elements. it also fetches references to the graphics contexts for each of the two canvases. these will be used when we're ...
...And 4 more matches

Drawing text - Web APIs
« previousnext » after having seen how to apply styles and colors in the previous chapter, we will now have a look at how to draw text onto the canvas. drawing text the canvas rendering context provides two methods to render text: filltext(text, x, y [, maxwidth]) fills a given text at the given (x,y) position. optionally with a maximum width to draw. stroketext(text, x, y [, maxwidth]) strokes a given text at the given (x,y) position. optionally with a maximum width to draw. ...
...th a maximum width to draw. stroketext(text, x, y [, maxwidth]) strokes a given text at the given (x,y) position. optionally with a maximum width to draw. a filltext example the text is filled using the current fillstyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle. ...
...context('2d'); ctx.font = '48px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size. there are some more properties which let you adjust the way the text gets displayed on the canvas: font = value the current text style being used when drawing text. this string uses the same syntax as the css font pro...
...And 4 more matches

Optimizing canvas - Web APIs
vas if you find yourself repeating some of the same drawing operations on each animation frame, consider offloading them to an offscreen canvas. you can then render the offscreen image to your primary canvas as often as needed, without unnecessarily repeating the steps needed to generate it in the first place. mycanvas.offscreencanvas = document.createelement('canvas'); mycanvas.offscreencanvas.width = mycanvas.width; mycanvas.offscreencanvas.height = mycanvas.height; mycanvas.getcontext('2d').drawimage(mycanvas.offscreencanvas, 0, 0); avoid floating-point coordinates and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values. ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing ...
...lements. for example, let's say you have a game with a ui on top, the gameplay action in the middle, and a static background on the bottom. in this case, you could split your game into three <canvas> layers. the ui would change only upon user input, the gameplay layer would change with every new frame, and the background would remain generally unchanged. ...
... top, the gameplay action in the middle, and a static background on the bottom. in this case, you could split your game into three <canvas> layers. the ui would change only upon user input, the gameplay layer would change with every new frame, and the background would remain generally unchanged. ...
...And 4 more matches

Transformations - Web APIs
tore() restores the most recently saved canvas state. canvas states are stored on a stack. every time the save() method is called, the current drawing state is pushed onto the stack. a drawing state consists of the transformations that have been applied (i.e. translate, rotate and scale – see below). the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled. the current clipping path, which we'll see in the next section. you can call the save() method as many times as you like. each time the restore() method is called, the last saved state is popped off the...
...next we save this state and make changes to the fill color. we then draw the second and smaller blue rectangle and save the state. again we change some drawing settings and draw the third semi-transparent white rectangle. so far this is pretty similar to what we've done in previous sect...
...e drawing position. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { ctx.save(); ctx.fillstyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)'; ctx.translate(10 + j * 50, 10 + i * 50); ctx.fillrect(0, 0, 25, 25); ctx.restore(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample rotating the second transformation method is rotate(). we use it to rotate the canvas around the current origin. rotate(angle) rotates the canvas clockwise around the current origin by the angle number of radians. the rotation center point is always the canvas origin. to change the center point, we will need to move the canvas ...
...And 4 more matches

DOMRect - Web APIs
of box represented by the domrect is specified by the method or property that returned it. for example, vreyeparameters.renderrect from the defunct webvr api specified the viewport of a canvas into which visuals for one eye of a head mounted display should be rendered. it inherits from its parent, domrectreadonly. ...
...mrectreadonly. ...
...y: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" w...
...And 4 more matches

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. ...
...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. ...
...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 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 a...
...And 4 more matches

GlobalEventHandlers.onanimationcancel - Web APIs
document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ndow (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...escribing the event which occurred. ...
...And 4 more matches

HTMLAreaElement - Web APIs
the htmlareaelement interface provides special properties and methods (beyond those of the regular object htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements. ...
... presentation of <area> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLBodyElement - Web APIs
the htmlbodyelement interface provides special properties (beyond those inherited from the regular htmlelement interface) for manipulating <body> elements. ...
...for manipulating <body> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLDataListElement - Web APIs
the htmldatalistelement interface provides special properties (beyond the htmlelement object interface it also has available to it by inheritance) to manipulate <datalist> elements and their content. ...
...list> elements and their content. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 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. ...
...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 offsetheight will not be a bounding box for a span with wrapped text. syntax left = element.offsetleft; left is an integer representing the o...
... in pixels from 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. ...
...And 4 more matches

HTMLFormElement - Web APIs
the htmlformelement interface represents a <form> element in the dom. it allows access to—and, in some cases, modification of—aspects of the form, as well as access to its component elements. ...
...access to its component elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLLinkElement - Web APIs
ce represents reference information for external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlanchorelement). this object inherits all of the properties and methods of the htmlelement interface. ...
...ods of the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the htmlmediaelement is an event handler, fired when a waitingforkey event occurs, when playback is blocked while waiting for an encryption key. this interface inherits from the extendableevent interface. ...
...bleevent interface. ...
...isplay: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLMediaElement - Web APIs
the htmlmediaelement interface adds to htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...ents both inherit this interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLMenuElement - Web APIs
the htmlmenuelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menu> elements. ...
...for manipulating <menu> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLMenuItemElement - Web APIs
the htmlmenuitemelement interface provides special properties (beyond those defined on the regular htmlelement interface it also has available to it by inheritance) for manipulating <menuitem> elements. ...
...manipulating <menuitem> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLOutputElement - Web APIs
the htmloutputelement interface provides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <output> elements. ...
...resentation of <output> elements. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLPictureElement - Web APIs
the htmlpictureelement interface represents a <picture> html element. it doesn't implement specific properties or methods. ...
...t specific properties or methods. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLSelectElement - Web APIs
the htmlselectelement interface represents a <select> html element. these elements also share all of the properties and methods of other html elements via the htmlelement interface. ...
...ts via the htmlelement interface. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLSpanElement - Web APIs
the htmlspanelement interface represents a <span> element and derives from the htmlelement interface, but without implementing any additional properties or methods. ...
...additional properties or methods. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLStyleElement - Web APIs
ment. it inherits properties and methods from its parent, htmlelement, and from linkstyle. this interface doesn't allow to manipulate the css it contains (in most case). to manipulate css, see using dynamic styling information for an overview of the objects used to manipulate specified css properties using the dom. ...
...ied css properties using the dom. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

HTMLUnknownElement - Web APIs
the htmlunknownelement interface represents an invalid html element and derives from the htmlelement interface, but without implementing any additional properties or methods. ...
...additional properties or methods. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

MediaDevices.getUserMedia() - Web APIs
cannot be included for any reason, the call to getusermedia() will result in an error. while information about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints. ...
... the reason for the difference in behaviour is that the keywords min, max, and exact are inherently mandatory. ...
...n: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted. the reason for the difference in behaviour is that the keywords min, max, and exact are inherently mandatory. whereas plain values and a keyword called ideal are not. here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 576, ideal: 720, max: 1080 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given. plain values are inherently ideal, which means that the first of our resolution examples above cou...
...And 4 more matches

SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolorelement, svganimatemotionelement and svganimatetransformelement. ...
...transformelement. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGClipPathElement - Web APIs
the svgclippathelement interface provides access to the properties of <clippath> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGComponentTransferFunctionElement - Web APIs
the svgcomponenttransferfunctionelement interface defines a base interface used by the component transfer function interfaces. ...
...ction interfaces. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGCursorElement - Web APIs
the svgcursorelement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them. ...
... manipulate them. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGDescElement - Web APIs
the svgdescelement interface corresponds to the <desc> element. ...
...e <desc> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEBlendElement - Web APIs
the svgfeblendelement interface corresponds to the <feblend> element. ...
...feblend> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEColorMatrixElement - Web APIs
the svgfecolormatrixelement interface corresponds to the <fecolormatrix> element. ...
...rmatrix> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEComponentTransferElement - Web APIs
the svgfecomponenttransferelement interface corresponds to the <fecomponenttransfer> element. ...
...ransfer> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFECompositeElement - Web APIs
the svgfecompositeelement interface corresponds to the <fecomposite> element. ...
...mposite> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEConvolveMatrixElement - Web APIs
the svgfeconvolvematrixelement interface corresponds to the <feconvolvematrix> element. ...
...ematrix> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEDiffuseLightingElement - Web APIs
the svgfediffuselightingelement interface corresponds to the <fediffuselighting> element. ...
...ighting> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEDisplacementMapElement - Web APIs
the svgfedisplacementmapelement interface corresponds to the <fedisplacementmap> element. ...
...mentmap> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEDistantLightElement - Web APIs
the svgfedistantlightelement interface corresponds to the <fedistantlight> element. ...
...ntlight> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEDropShadowElement - Web APIs
the svgfedropshadowelement interface corresponds to the <fedropshadow> element. ...
...pshadow> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEFloodElement - Web APIs
the svgfefloodelement interface corresponds to the <feflood> element. ...
...feflood> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEGaussianBlurElement - Web APIs
the svgfegaussianblurelement interface corresponds to the <fegaussianblur> element. ...
...ianblur> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEImageElement - Web APIs
the svgfeimageelement interface corresponds to the <feimage> element. ...
...feimage> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEMergeElement - Web APIs
the svgfemergeelement interface corresponds to the <femerge> element. ...
...femerge> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEMergeNodeElement - Web APIs
the svgfemergenodeelement interface corresponds to the <femergenode> element. ...
...rgenode> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEMorphologyElement - Web APIs
the svgfemorphologyelement interface corresponds to the <femorphology> element. ...
...phology> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEOffsetElement - Web APIs
the svgfeoffsetelement interface corresponds to the <feoffset> element. ...
...eoffset> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFEPointLightElement - Web APIs
the svgfepointlightelement interface corresponds to the <fepointlight> element. ...
...ntlight> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFESpecularLightingElement - Web APIs
the svgfespecularlightingelement interface corresponds to the <fespecularlighting> element. ...
...ighting> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFESpotLightElement - Web APIs
the svgfespotlightelement interface corresponds to the <fespotlight> element. ...
...otlight> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFETileElement - Web APIs
the svgfetileelement interface corresponds to the <fetile> element. ...
...<fetile> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGFETurbulenceElement - Web APIs
the svgfeturbulenceelement interface corresponds to the <feturbulence> element. ...
...bulence> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGGradientElement - Web APIs
the svggradient interface is a base interface used by svglineargradientelement and svgradialgradientelement. ...
...lgradientelement. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGGraphicsElement - Web APIs
the svggraphicselement interface represents svg elements whose primary purpose is to directly render graphics into a group. ...
...tly render graphics into a group. ...
...gram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGMPathElement - Web APIs
the svgmpathelement interface corresponds to the <mpath> element. ...
... <mpath> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGMetadataElement - Web APIs
the svgmetadataelement interface corresponds to the <metadata> element. ...
...etadata> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGScriptElement - Web APIs
the svgscriptelement interface corresponds to the svg <script> element. ...
...<script> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGStopElement - Web APIs
the svgstopelement interface corresponds to the <stop> element. ...
...e <stop> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGStyleElement - Web APIs
svg style interface the svgstyleelement interface corresponds to the svg <style> element. ...
... <style> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGSymbolElement - Web APIs
the svgsymbolelement interface corresponds to the <symbol> element. ...
...<symbol> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

SVGTitleElement - Web APIs
the svgtitleelement interface corresponds to the <title> element. ...
... <title> element. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 4 more matches

WEBGL_compressed_texture_astc - Web APIs
ods. ext.getsupportedprofiles() returns an array of strings containing the names of the astc profiles supported by the implementation. constants the compressed texture formats are exposed by 28 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ...
...mplementation. constants the compressed texture formats are exposed by 28 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d(). ...
...ge2d(). ...
...And 4 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. ...
...he webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image. ...
...And 4 more matches

WebGL2RenderingContext.texSubImage3D() - Web APIs
the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
... the webgl2renderingcontext.texsubimage3d() method of the webgl api specifies a sub-rectangle of the current texture. ...
...l api specifies a sub-rectangle of the current texture. ...
...And 4 more matches

WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image. ...
...get, level, internalformat, 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? ...
...ternalformat, format, type, htmlcanvaselement? pixels); void gl.teximage2d(target, level, internalformat, format, type, htmlvideoelement? pixels); void gl.teximage2d(target, level, internalformat, format, type, imagebitmap? ...
...And 4 more matches

WebGLRenderingContext - Web APIs
information and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only back-reference to the htmlcanvaselement. might be null if it is not associated with a <canvas> element. webglrenderingcontext.commit() pushes frames back to the original htmlcanvaselement, if the context is not directly fixed to a specific canvas. webglrenderingcontext.drawingbufferwidth the read-only width of the current drawing buffer. should match the width of the canvas element associated with this context. webglrenderingcontext.drawingbufferheight the read-only height of the current drawing buffer. should match the height of the canvas element associated with this context. webglrenderingcontext.getcontextattributes() returns a webglcontextattributes object that contains...
...getparameter() returns a value for the passed parameter name. webglrenderingcontext.geterror() returns error information. webglrenderingcontext.hint() specifies hints for certain behaviors. the interpretation of these hints depend on the implementation. webglrenderingcontext.isenabled() tests whether a specific webgl capability is enabled or not for this context. webglrenderingcontext.linewidth() sets the line width of rasterized lines. webglrenderingcontext.pixelstorei() specifies the pixel storage modes webglrenderingcontext.polygonoffset() specifies the scale factors and units to calculate depth values. webglrenderingcontext.samplecoverage() specifies multi-sample coverage parameters for anti-aliasing effects. webglrenderingcontext.stencilfunc() sets the both front and back ...
...}, such as the canvas 2d rendering context. however, the properties and variables you can tweak are different for each api. effect of canvas size on rendering with webgl with scissor() and clear() we can demonstrate how the webgl drawing buffer is affected by the size of the canvas. the size of the first canvas is set to the styled element size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the browser window. the effect is clearly visible when using scissor() and ...
...And 4 more matches

-webkit-text-stroke - CSS: Cascading Style Sheets
<color> the color of the stroke. ...
... <color> the color of the stroke. ...
... <color> the color of the stroke. ...
...And 4 more matches

@media - CSS: Cascading Style Sheets
cument if and only if the media query matches the device on which the content is being used. note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface. syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. /* at the top level of your code */ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media types media types describe the general category of a device. except when using the not ...
...ch media feature expression must be surrounded by parentheses. name summary notes any-hover does any available input mechanism allow the user to hover over elements? added in media queries level 4. any-pointer is any available input mechanism a pointing device, and if so, how accurate is it? added in media queries level 4. aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup table, or zero if the d...
...f bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup table, or zero if the device does not use such a table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4. device-height height of the rendering surface of the output device deprecated in media queries level 4. device-width width of the rendering surface of the output device deprecated in media queries level 4. display-mode the display mode of the application, as specified ...
...And 4 more matches

Using multi-column layouts - CSS: Cascading Style Sheets
e css multi-column layout module extends the block layout mode to allow the easy definition of multiple columns of text. people have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. ...
... the column-count property sets the number of columns to a particular number. e.g., example 1 html <div id="col"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ...
... the column-count property sets the number of columns to a particular number. ...
...And 4 more matches

aspect-ratio - CSS: Cascading Style Sheets
1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. size calculations involving intrinsic aspect ratio always work with the content box dimensions. ...
...this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. ...
...al definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. ...
...And 4 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. the borders in the other dimension can be set with border-inline, which se...
...tom 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. ...
...xt-orientation. the borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end. constituent properties this property is a shorthand for the following css properties: border-block-color border-block-style border-block-width syntax values the border-block is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. ...
...And 4 more matches

border-inline - CSS: Cascading Style Sheets
ctionality, 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-block, which sets border-block-start, and border-block-end. ...
...writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-block, which sets border-block-start, and border-block-end. ...
...plies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-inline is specified with one or more of the following, in any order: <'border-width'> the width of the border. see border-width. <'border-style'> the line style of the border. see border-style. <'color'> the color of the border. see color. ...
...And 4 more matches

border-left - CSS: Cascading Style Sheets
e 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 valueas each of the properties of the shorthand:borde...
...ax 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 valueas each of the properties of the shorthand:border-left-width: mediumborder-left-style: noneborder-left-color: currentcolorapplies toall elements. ...
... <br-width> see border-left-width. <br-style> see border-left-style. <color> see border-left-color. formal definition initial valueas each of the properties of the shorthand:border-left-width: mediumborder-left-style: noneborder-left-color: currentcolorapplies toall elements. ...
...And 4 more matches

border-right - CSS: Cascading Style Sheets
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 <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...
...der-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. ...
...idth> 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 4 more matches

border-top - CSS: Cascading Style Sheets
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 of the properties of the shorthand:border-top-...
... 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 of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elements. ...
...alues <br-width> see border-top-width. <br-style> see border-top-style. <color> see border-top-color. formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elements. ...
...And 4 more matches

columns - CSS: Cascading Style Sheets
the columns css shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths. 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 an element's contents, as well as those columns' widths. 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 well as those columns' widths. 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: column-count column-width syntax /* column width */ columns: 18em; /* column count */ columns: auto; columns: 2; /* both column width and count */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* global values */ columns: inherit; columns: initial; columns: unset; the columns property may be specified as one or two of the values listed below, in any order. ...
...And 4 more matches

<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. ...
...f a particular character or font attribute in the font currently in effect in an element or its parent. note: these units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the page even when the user changes the font size. cap represents the "cap height" (nominal height of capital letters) of the element’s font. ch represents the width, or more precisely the advance measure, of the glyph "0" (zero, the unicode character u+0030) in the element's font. in the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall. em represents the calculated font-size of the element. if used on the font-size property itself, it represents the inherited font-...
...roperties of the root element, it refers to the properties' initial value. viewport-percentage lengths viewport-percentage lengths define the <length> value relative to the size of the viewport, i.e., the visible portion of the document. viewport lengths are invalid in @page declaration blocks. vh equal to 1% of the height of the viewport's initial containing block. vw equal to 1% of the width of the viewport's initial containing block. vi equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis. vb equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis. vmin equal to the smaller of vw and vh. vmax equal to the larger of vw and vh. absolute length units absolute len...
...And 4 more matches

<percentage> - CSS: Cascading Style Sheets
syntax the <percentage> data type consists of a <number> followed by the percentage sign (%). ...
... syntax the <percentage> data type consists of a <number> followed by the percentage sign (%). ...
...ceded by a single + or - sign, although negative values are not valid for all properties. as with all css dimensions, there is no space between the symbol and the number. interpolation when animated, values of the <percentage> data type are interpolated as real, floating-point numbers. the speed of the interpolation is determined by the timing function associated with the animation. ...
...And 4 more matches

Web video codec guide - Web media technologies
xel) is 8,294,400 bytes. at a typical 30 frames per second, each second of hd video would occupy 248,832,000 bytes (~249 mb). a minute of hd video would need 14.93 gb of storage. a fairly typical 30 minute video conference would need about 447.9 gb of storage, and a 2-hour movie would take almost 1.79 tb (that is, 1790 gb). not only is the required storage space enormous, but the network bandwidth needed to transmit an uncompressed video like that would be enormous, at 249 mb/sec—not including audio and overhead. this is where video codecs come in. just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played back or edited. most video codecs are lossy, in that the decoded video does not precisely match ...
...achieve the same level of compression. the more variability—such as noise—there is in the image, the more complex the compression process and the less success the algorithm is likely to have compressing the image to the same degree. unless you configure the encoder in a way that ignores some or all of the variations caused by noise, the compressed video will be larger. resolution (width and height) higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression. the higher the resolution of a video, the larger it gets. this plays a key role in the final size of the video. the degree to which these affect the resulting encoded video will vary depending on t...
...and chroma subsampling. in addition, a series of levels are specified, each defining limits on a range of attributes of the video. these attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process. for example, level av1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. it's worth noting, however, that at least for firefox and chrome, the levels are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. for ...
...And 4 more matches

Mobile first - Progressive web apps (PWAs)
look at what subset of features will be available on mobile, desktop, etc. in tandem and how they will be implemented. then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate. this means that mobiles (often the target devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather ...
...etty much all browsers will need first, then progressively enhance browsers higher up the food chain. note: starting with very little and working up as the need arises usually makes more sense than starting with everything and then covering up things if they aren't needed! mobile constraints we have already mentioned the fact that mobiles generally have less memory, processing power and bandwidth than other devices (although bear in mind that smart tvs are also generally pretty low powered.) they also have less viewport size available. therefore, as well as splitting content into different views, and simplifying the interface and content on each view of your application for mobile as much as possible, it is also a good idea to not include visual effects such as shadows, animations, and gr...
..., so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480px. ...
...And 4 more matches

Example - SVG: Scalable Vector Graphics
behavior. this is done completely in w3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. ...
... extensions. this example should work in firefox 1.5 and above. view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles. first, each mote tries to move towards the cursor, and second each mote ...
... <br/> </p> </form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element. function display() { return document.getelementbyid('display'); } // determine dimensions of the display element. ...
...And 4 more matches

Basic Transformations - SVG: Scalable Vector Graphics
« previousnext » now we're ready to start distorting our beautiful images. but first, let's formally introduce the <g> element. with this helper, you can assign properties to a complete set of elements. actually, that's its only purpose. an example: <svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following transformations are summed up in an element's transform attribute. transformations can be chained simply by concatenating them, separated by whitespace. translation it may be necessary to move an element around, even though you can position it with the according attributes. for this purpose, the translate() transformation stands ready. <svg w...
...med up in an element's transform attribute. transformations can be chained simply by concatenating them, separated by whitespace. translation it may be necessary to move an element around, even though you can position it with the according attributes. for this purpose, the translate() transformation stands ready. ...
...y. <svg width="40" height="50" style="background-color:#bff;"> <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" /> </svg> the example will render a rectangle, translated to the point (30,40) instead of (0,0). if the second value is not given, it is assumed to be 0. rotation rotating an element is quite a common task. use the rotate() transformation for this: <svg width="31" height="31"> <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" /> </svg> this example shows a square that is rotated by 45 degrees. the value for rotate() is given in degrees. multiple transformations transformations can be concatenated easily just by separating them with spaces. for example, translate() and rotate() are common used transformations. ...
...And 4 more matches

New Skin Notes - Archive of obsolete content
devmo has a new skin that is ready for testing. if you go to your user preferences, you can change the skin to "devmo". this is currently just a preview, but we would appreciate help with testing. please add any feedback to this page. thanks! ...
... page. --dria css classes for feature and subfeature boxes, including required graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i finally got this sorted out. when the skin is updated on test/docs, edi...
... --dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86. a few examples: , .these work fine with the old theme, and i expect that this affects a lot of reference articles. that our screen resolutions are now wider than 800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well). but it should work by default with 800 pixels width, imo. --mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'ba...
...And 3 more matches

Space Manager Detailed Design - Archive of obsolete content
ata * indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. * * the local coordinate space origin, the y-offset, and the max size * describe a rectangle that's used to clip the underlying band of * available space, i.e. * {0, ayoffset, amaxsize.width, amaxsize.height} in the local * coordinate space * * @param ayoffset the y-offset of where the band begins. the coordinate is * relative to the upper-left corner of the local coordinate space * @param amaxsize the size to use to constrain the band data * @param abanddata [in,out] used to return the list of trapezoids that * describe the available ...
...successful * ns_error_failure if there is already a region tagged with aframe */ nsresult addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** * resize the rectangular region associated with aframe by the specified * deltas. the height change always applies to the bottom edge or the existing * rect. ...
...he height change always applies to the bottom edge or the existing * rect. you specify whether the width change applies to the left or right edge * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ enum affectededge {leftedge, rightedge}; nsresult resizerectregion(nsiframe* aframe, nscoord adeltawidth, nscoord adeltaheight, affectededge aedge = rightedge); /** * offset the region associated with aframe by the specified amount. * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ nsresult offsetregion(nsiframe* aframe, nscoord dx, nscoord dy); /** * remove the re...
...And 3 more matches

Adding more elements - Archive of obsolete content
ing elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been giv...
...you will notice that if the window is resized, the textbox grows but the other components do not. you will also notice that the label was removed. if you resize the window vertically, the elements do not change size. ...
...re appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal boxes. ...
...And 3 more matches

Box Objects - Archive of obsolete content
are quite useful for xul development. the base box object has two useful features. first, you can retrieve the position and size of the xul element as displayed, and second, you can determine the order of the elements in the box as displayed, instead of their order 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 ...
...rgins 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. *note that x, y refers to the portion of the element that is just inside any borders, which is inconsistent with the other four boxobject position and size references, which include borders as part of the element. the ...
...ch include borders as part of the element. the values are always the position and sizes as currently displayed, so the values will be different if the element is moved or resized. for example, a flexible element will change in size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively. note that retrieving these values will return the size only if it was explicitly specified. these properties will return an empty string if the width or height attributes or properties were not set already. that is, you cannot get the current size ...
...And 3 more matches

More Tree Features - Archive of obsolete content
ed like a container. for example, a directory with no files in it should still be treated like a container whereas a file should not. more about tree columns one additional attribute you can add to the tree is enablecolumndrag. (note the mixed case.) if set to true, the user may drag the column headers around to rearrange the order of the columns. a user will also likely want to change the column widths. you can do this by placing a splitter element in between each treecol element. a small notch will appear in between each column header which the user may drag to change the width of a column. you can use the style class tree-splitter to hide the notch, although the column may still be resized. you can set a minimum or maximum width of a column using the minwidth or maxwidth attributes. you can ...
...e columns in-between sessions. (that feature will see in the later section). thus, once the user has decided on a column layout they like, it will automatically be saved for next time. ...
...yout they like, it will automatically be saved for next time. ...
...And 3 more matches

Splitters - Archive of obsolete content
size. (the last element in the box). this attribute can also be set to grow, in which case the elements to the right of the splitter do not change size when the splitter is dragged, but instead the entire box changes size. the default value is closest. if you set the collapse attribute, you should also add a grippy element inside the splitter which the user can use to collapse the element. ...
...d also add a grippy element inside the splitter which the user can use to collapse the element. the width and height attributes of the elements next the splitter are adjusted when the splitter is dragged. the exact element depends on the resizebefore and resizeafter attributes. ...
...ext the splitter are adjusted when the splitter is dragged. the exact element depends on the resizebefore and resizeafter attributes. splitter example an example would be helpful here: example 1 : source view <hbox flex="1"> <iframe id="content-1" width="60" height="20" src="w1.html"/> <splitter collapse="before" resizeafter="farthest"> <grippy/> </splitter> <iframe id="content-2" width="60" height="20" src="w2.html"/> <iframe id="content-3" width="60" height="20" src="w3.html"/> <iframe id="content-4" width="60" height="20" src="w4.html"/> </hbox> here, four iframes have been created and a splitter has been placed in-between the first and second one. the collapse has been set to a value of before, meaning that if the splitter grippy is clicked on, the first frame would ...
...And 3 more matches

keyset - Archive of obsolete content
if this attribute is set, the element...
...if this attribute is set, the element is disabled. disabled elem...
...if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. ...
...And 3 more matches

member - Archive of obsolete content
information is available in the xul tutorial. ...
...n the xul tutorial. ...
... container type: ? a variable reference to a node that is expected to be a container. ...
...And 3 more matches

menu - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the eleme...
...emactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. ...
...And 3 more matches

Browser Feature Detection - Archive of obsolete content
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 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 t...
...t true true true paddingbottom true true true paddingleft true true true textalign true true true textdecoration true true true textindent true true true texttransform true true true verticalalign 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 ...
...ection true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth true ie7 only true minheight true true true minwidth true ie7 only true orphans true false true outline true false true outlinecolor true false true outlinestyle true false true outlinewidth true false true overflow true true true page ...
...And 3 more matches

-ms-filter - Archive of obsolete content
following example shows how to use an inline style sheet to set the filter on an image. ...
...author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function. ...
...position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <div id="filterto" style="position: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </div> </div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 ...
...And 3 more matches

Building up a basic demo with Three.js - Game development
tory to store your experiments in. save a copy of the latest minimized three.js library inside your directory. open the three.js documentation in a separate tab — it is useful to refer to. ...
...ctory. open the three.js documentation in a separate tab — it is useful to refer to. html structure here's the html structure we will use: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic information like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space. the first <script> element includes the three.js library...
... before reading further, copy this code to a new text file, and save it in your working directory as index.html. renderer a renderer is a tool which displays scenes right in your browser. there are a few different renderers: webgl is the default, and others you can use are canvas, svg, css, and dom. ...
...And 3 more matches

Build the brick field - Game development
the paddle. what a breakout game really needs is some bricks to destroy with the ball, and this is what we'll create now! setting up the brick variables the overall aim of this lesson is to render a few lines of code for the bricks, using a nested loop that works through a two-dimensional array. ...
...s of code for the bricks, using a nested loop that works through a two-dimensional array. first however we need to set up some variables to define information about the bricks such as their width and height, rows and columns, etc. add the following lines to your code below the variables which you have previously declared in your program. var brickrowcount = 3; var brickcolumncount = 5; var brickwidth = 75; var brickheight = 20; var brickpadding = 10; var brickoffsettop = 30; var brickoffsetleft = 30; here we've defined the number of rows and columns of bricks , their width and height, the padding between the bricks so they won't touch each other and a top and left offset so they won't start being drawn right from the edge of the canvas. we will hold all our bricks in a two-dimensional array...
...later. brick drawing logic now let's create a function to loop through all the bricks in the array and draw them on the screen. our code might look like this: function drawbricks() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { bricks[c][r].x = 0; bricks[c][r].y = 0; ctx.beginpath(); ctx.rect(0, 0, brickwidth, brickheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } } } again, we're looping through the rows and columns to set the x and y position of each brick, and we're also painting a brick on the canvas — size brickwidth x brickheight — with each loop iteration. the problem is that we're painting them all in one place, at coordinat...
...And 3 more matches

Extra lives - Game development
of lives, the text label that displays the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives. defining the new text labels defining the texts look like something we already did in the score lesson. ...
...es one of their lives. defining the new text labels defining the texts look like something we already did in the score lesson. add the following lines below the existing scoretext definition inside your create() function: livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, { font: '18px arial', fill: '#0095dd' }); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', { font: '18px arial', fill: '#0095dd' }); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a position on the screen, the actual text to display, and the font styling. the former is anchored on its top right edge to align properly wi...
... the lives handling code to implement lives in our game, let's ...
...And 3 more matches

Advanced styling effects - Learn web development
legible without them. you can find the examples in this section at box-shadow.html (see the source code too). a simple box shadow let's look at a simple example to get things started. ...
... any length and color units that would make sense to do so to define these values. ...
...ook with shadows based on multiple light sources. other 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. ...
...And 3 more matches

How much does it cost to do something on the Web? - Learn web development
t is better to check the license of the file before you use it. sites like pixabay provide images under cc0 license, so you can use, edit and publish them even with modification for commercial use. media editors if you want to include video or audio into your website, you can either embed online services (for example youtube, vimeo, or dailymotion), or include your own videos (see below for bandwidth costs). for audio files, you can find free software (audacity, wavosaur), or paying up to a few hundred dollars (sony sound forge, adobe audition). likewise, video-editing software can be free (pitivi, openshot for linux, imovie for mac), less than $100 (adobe premiere elements), or several hundred dollars (adobe premiere pro, avid media composer, final cut pro). the software you received with y...
...need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files. you need to upload content to a remote server (see hosting below), so you need a modem. your isp can rent internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location. ...
...s computer if you want to produce complicated designs, touch up photos, or produce audio and video files. you need to upload content to a remote server (see hosting below), so you need a modem. your isp can rent internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location. ...
...And 3 more matches

Advanced form styling - Learn web development
and radio buttons styling a checkbox or a radio button is tricky by default. the sizes of check boxes and radio buttons are not meant to be changed with their default designs, and browsers react very differently when you try. ...
... </label> </p> </fieldset> </form> now, let's style these with a custom checkbox design. ...
...can get away with some simple styling to make sizing consistent, uniform styling of things like background-colors, and usage of appearence to get rid of some system-level styling. ...
...And 3 more matches

Advanced text formatting - Learn web development
n always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. a light brown color.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px;...
...nds the cake together. coffee the drink that gets the world running in the morning. ...
...always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page. as confucius' quotes site says:</p> <p>it does not matter how slowly you go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the need to eliminate negative self talk (as mentioned in affirmations for positive thinking.)</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="res...
...And 3 more matches

Getting started with HTML - Learn web development
r your work using the reset button. if you get really stuck, press the show solution button to see the answer. ...
..."playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...n always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. ...
...And 3 more matches

Video and audio content - Learn web development
with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. video and audio on the web web developers have wanted to use video and audio on the web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native web technologies such as html didn't have the ability to embed video and audio on the web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content. this kind of technology worked ok, but it had a number of pro...
...ple code for your own experimentation, in case you are unable to get hold of your own. note: before you begin here, you should also know that there are quite a few ovps (online video providers) like youtube, dailymotion, and vimeo, and online audio providers like soundcloud. such companies offer a convenient, easy way to host and consume videos, so you don't have to worry about the enormous bandwidth consumption. ovps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="r...
...ch obviously takes time and is an unnecessary use of resources. refer to our guide to media types and formats for help selecting the best containers and codecs for your needs, as well as to look up the right mime types to specify for each. other <video> features there are a number of other features you can include when displaying an html video. ...
...And 3 more matches

Useful string methods - Learn web development
case it is probably more useful to test whether the method call isn't equal to a certain result. ...
... document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; useren...
...g literals; they can also be variables, or even variables with a method being invoked on them. ...
...And 3 more matches

Implementing feature detection - Learn web development
llback properties, as described in css fallback behavior and handling css prefixes. @supports in recent times, css has had its own native feature detection mechanism introduced — the @supports at-rule. this works in a similar manner to media queries (see also responsive design problems) — except that instead of selectively applying css depending on a media feature like a resolution, screen width or aspect ratio, it selectively applies css depending on whether a css feature is supported. for example, we could rewrite our previous example to use @supports — see supports-feature-detect.html and supports-styling.css. if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main div { ...
... your-feature-here" in your favorite search engine. bear in mind though that some features, however, are known to be undetectable — see modernizr's list of undetectables. matchmedia we also wanted to mention the window.matchmedia javascript feature at this point too. this is a property that allows you to run media query tests inside javascript. ...
... javascript. it looks like this: if (window.matchmedia("(max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). ...
...And 3 more matches

nsIAccessibleText
anged in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void addselection(in long startoffset, in long endoffset); nsiaccessible getattributerange(in long offset, out long rangestartoffset, out long rangeendoffset); obsolete since gecko 1.9.1 wchar getcharacteratoffset(in long offset); void getcharacterextents(in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype); long getoffsetatpoint(in long x, in long y, in unsigned long coordtype); void getrangeextents(in long startoffset, in long endoffset, out long x, out long y, out long width, out long height, in unsigned long coordtype); void getselectionbounds(in long selectionnum, out long startoffset, out long endoffset); astring gettext(in long startoffse...
...e queried by at more often than other positions. because it does not represent an existing character its bounding box is defined in relation to preceding characters. it should be roughly equivalent to the bounding box of some character when inserted at the end of the text. its height typically being the maximal height of all the characters in the text or the height of the preceding character, its width being at least one pixel so that the bounding box is not degenerate. void getcharacterextents( in long offset, out long x, out long y, out long width, out long height, in unsigned long coordtype ); parameters offset index of the character for which to return its bounding box. the valid range is 0..length. x x coordinate of the bounding box of the referenced character. y y coordinate...
...height height of the bounding box of the referenced character. coordtype specifies if the coordinates are relative to the screen or to the parent window (see constants declared in nsiaccessiblecoordinatetype.constants). ...
...And 3 more matches

AnalyserNode - Web APIs
the output is not connected. ...
...parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/d...
...dth="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/doc...
...And 3 more matches

AudioBufferSourceNode - Web APIs
ent timing accuracy requirements, such as for sounds that must match a specific rhythm and can be kept in memory rather than being played from disk or the network. to play sounds which require accurate timing but must be streamed from the network or played from disk, use a audioworkletnode to implement its playback. ...
...ent its playback. ...
...play: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" wid...
...And 3 more matches

CSSMathValue.operator - Web APIs
will return the string "sum". syntax var astring = cssmathvalue.operator; value a string. ...
... a string. interface value cssmathsum "sum" cssmathproduct "product" cssmathmin "min" cssmathmax "max" cssmathclamp "clamp" cssmathnegate "negate" cssmathinvert "invert" examples we create an element with a width determined using a calc() function, then console.log() the operator. ...
...um "sum" cssmathproduct "product" cssmathmin "min" cssmathmax "max" cssmathclamp "clamp" cssmathnegate "negate" cssmathinvert "invert" examples we create an element with a width determined using a calc() function, then console.log() the operator. ...
...And 3 more matches

Determining the dimensions of elements - Web APIs
there are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. this article is designed to help you make 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? ...
...ht one for your needs. this article is designed to help you make 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? ...
... 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 height. as an example, if the element has wi...
...And 3 more matches

CanvasRenderingContext2D.fillText() - Web APIs
the canvasrenderingcontext2d method filltext(), part of the canvas 2d api, draws a text string at the specified coordinates, filling the string's characters with the current fillstyle. an optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. ...
...hout modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. the text is rendered using the font and text layout configuration as defined by the font, textalign, textbaseline, and direction properties. to draw the outlines of the characters in a string, call the context's stroketext() method. ...
....filltext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context. the text is rendered using the settings specified by font, textalign, textbaseline, and direction. x the x-axis coordinate of the point at which to begin drawing the text, in pixels. y the y-axis coordinate of the point at which to begin drawing the text, in pixels. maxwidth optional the maximum number of pixels wide the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specifie...
...And 3 more matches

CanvasRenderingContext2D.lineCap - Web APIs
rmines the shape used to draw the end points of lines. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. syntax ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints. default value. "round" the ends of lines are rounded. ...
...two guides to see the exact differences between the three are added. each of these lines starts and ends exactly on these guides. ...
...are drawn, each with a different value for the linecap property. two guides to see the exact differences between the three are added. each of these lines starts and ends exactly on these guides. the line on the left uses the default "butt" option. it's drawn completely flush with the guides. the second is set to use the "round" option. ...
...And 3 more matches

Comment - Web APIs
the comment interface represents textual notations within markup; although it is generally not visually shown, such comments are available to be read in the source view. comments are represented in html and xml as content between '<!--' and '-->'. in xml, the character sequence '--' cannot be used within a comment. ...
... within a comment. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

Document - Web APIs
web page loaded in the browser and serves as an entry point into the web page's content, which is the dom tree. the dom tree includes elements such as <body> and <table>, among many others. it provides functionality globally to the document, like how to obtain the page's url and create new elements in the document. ...
...s in the document. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

GlobalEventHandlers.onanimationend - Web APIs
an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ent), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...meter: an animationevent object describing the event which occurred. ...
...And 3 more matches

GlobalEventHandlers.onanimationstart - Web APIs
an html element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ent), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...meter: an animationevent object describing the event which occurred. ...
...And 3 more matches

HTMLAnchorElement - Web APIs
ink elements and provides special properties and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. ...
...s represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/d...
...ke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/w...
...And 3 more matches

HTMLDocument - Web APIs
the htmldocument interface, which may be accessed through the window.htmldocument property, extends the window.htmldocument property to include methods and properties that are specific to html documents. ...
...to html documents. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

KeyboardEvent - Web APIs
had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a tablet or graphics tablet. ...
...blet or graphics tablet. ...
...yle="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" hei...
...And 3 more matches

ProcessingInstruction - Web APIs
eclaration. user-defined processing instructions cannot begin with "xml", as xml-prefixed processing-instruction target names are reserved by the xml specification for particular, standard uses (see, for example, <?xml-stylesheet ?>). the processinginstruction interface inherits methods and properties from node. ...
... methods and properties from node. ...
...agram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

SVGElement - Web APIs
all of the svg dom interfaces that correspond directly to elements in the svg language derive from the svgelement interface. ...
...element interface. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

SyncEvent - Web APIs
the syncevent interface represents a sync action that is dispatched on the serviceworkerglobalscope of a serviceworker. this interface inherits from the extendableevent interface. ...
...xtendableevent interface. ...
...tyle="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width=...
...And 3 more matches

Text - Web APIs
is parsed into information items and text nodes that form its children. new documents have a single text node for each block of text. over time, more text nodes may be created as the document's content changes. the node.normalize() method merges adjacent text objects back into a single node for each block of text. ...
...ach block of text. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 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. ...
...mage in a compressed format. compressed image formats must be enabled by webgl extensions before using these methods. ...
...syntax // webgl 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview? ...
...And 3 more matches

Using IIR filters - Web APIs
nseoutput); we can use this data to draw a filter frequency plot. we'll do so on a 2d canvas context. ...
...data to draw a filter frequency plot. we'll do so on a 2d canvas context. ...
...vas context. ...
...And 3 more matches

WheelEvent - Web APIs
nt. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction. therefore, do not rely on delta* properties to get the content's scrolling direction. instead, detect value changes to scrollleft and scrolltop of the target in the scroll event. ...
...et in the scroll event. ...
...yle="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" hei...
...And 3 more matches

Window: resize event - Web APIs
the on-going discussions. examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...cussions. examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...And 3 more matches

Window - Web APIs
a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. ...
... to the window instead. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces. domparser domparser can parse xml ...
....frames read only returns an array of the subframes in the current window. window.fullscreen this property indicates whether the window is displayed in full screen or not. window.history read only returns a reference to the history object. window.innerheight read only gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar. window.innerwidth read only gets the width of the content area of the browser window including, if rendered, the vertical scrollbar. window.issecurecontext read only indicates whether a context is capable of using features that require secure contexts. window.length read only returns the number of frames in the window. see also window.frames. window.location gets/sets the location, or current url, of t...
...And 3 more matches

XMLDocument - Web APIs
the xmldocument interface represents an xml document. it inherits from the generic document and does not add any specific methods or properties to it: nevertheless, several algorithms behave differently with the two types of documents. ...
...ypes of documents. ...
...splay: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="7...
...And 3 more matches

Logical properties for sizing - CSS: Cascading Style Sheets
he default for many of us, in a design you may well use both physical and logical sizing. you might want some features to always relate to the physical dimensions whatever the writing mode. mappings for dimensions the table below provides mappings between logical and physical properties. ...
...s for dimensions the table below provides mappings between logical and physical properties. these mappings assume that you are in a horizontal-tb writing mode, such as english or arabic, in which case width would be mapped to inline-size. if you were in a vertical writing mode then inline-size would be mapped to height. logical property physical property inline-size width block-size height min-inline-size min-width min-block-size min-height max-inline-size max-width max-block-size max-height width and height example the logical mappings for width and height are inline-size, which sets the length in the inline dimension and block-size, which sets the length in the block dimension. when working in e...
...ze height min-inline-size min-width min-block-size min-height max-inline-size max-width max-block-size max-height width and height example the logical mappings for width and height are inline-size, which sets the length in the inline dimension and block-size, which sets the length in the block dimension. when working in english, replacing width with inline-size and height with block-size will give the same layout. in the live example below i have set the writing mode to horizontal-tb. change it to vertical-rl and you will see that the first example — which uses width and height — remains the same size in each dimension, despite the text becoming vertical. the second example — which uses inline-size and block-size — will follow ...
...And 3 more matches

CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by windows ie 5.5. basic example in this example we have chosen to use a thin scrollbar, with a green track and purple thumb. .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. ...
...r"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dandelion cucumber earthnut pea peanut soko zucchini. </div> result reference css properties scrollbar-width scrollbar-color specifications specification status comment css scrollbars level 1 working draft initial definition. accessibility concerns when you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input. baseline rules for scrollbar usability | adrian roselli browser compa...
...sider they have enough contrast and that their hit area is large enough for people who use touch input. baseline rules for scrollbar usability | adrian roselli browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...And 3 more matches

Grid wrapper - CSS: Cascading Style Sheets
the grid wrapper pattern is useful for aligning grid content within a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired. requirements items placed on the grid should be able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum size the column tracks will grow to. using a numeric unit (pixels, ems, rems) will create a fixed maximum size for the central wrapper, whereas using percentage...
... for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. ...
...er grows or shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. ...
...And 3 more matches

Shorthand properties - CSS: Cascading Style Sheets
pes, as the order has no importance, but this does not work as easily when several properties can have identical values. ...
...e identical values. ...
...-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 3 more matches

background-size - CSS: Cascading Style Sheets
es project, please clone https://github.com/mdn/interactive-examples and send us a pull request. spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
...operty, and the background color will be visible behind background images that have transparency/translucency. ...
...auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* global values */ background-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values contain or cover. using a width value only, in which case the height defaults to auto. using both a width and a height value, in which case the first sets the width and the second sets the height. each value can be a <length>, a <percentage>, or auto. to specify the size of multiple background images, separate the value for each one with a comma. values contain scales the image as large as possible without cropping or s...
...And 3 more matches

block-size - 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 */ block-size: 300px; block-size: 25em; /* <percentage> values */ block-size: 75%; /* keyword values */ block-size: max-content; block-size: min-content; block-size: fit-content(20em); block-size: auto; /* global values */ block-size: inherit; block-size: initial; block-size: unset; if the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. a related property is inline-size, which defines the other dimension of the element. initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same va...
...ent; otherwise, it relates to the height of the element. a related property is inline-size, which defines the other dimension of the element. initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties. ...
...And 3 more matches

calc() - CSS: Cascading Style Sheets
roperty values. it can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. 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 /* property: calc(expression) */ width: calc(100% - 80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value. the expression can be any simple expression combining the following operators, using standard operator precedence rules: + addition. - subtraction. * multiplication. at least one of the arguments must be a <number>. / division. the right-hand side must be ...
...ercentage followed by a subtraction operator and a length. likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage. the * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. division by zero results in an error being generated by the html parser. math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified. it is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses. formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <ca...
... results in an integer. ie. 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. ...
...And 3 more matches

fit-content() - CSS: Cascading Style Sheets
-examples and send us a pull request. the function can be used as a track size in css grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size. syntax the fit-content() function accepts a <length> or a <percentage> as an argument. /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length. <percen...
...acks and to the block size of the grid container for row tracks. otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode. examples sizing grid columns with fit-content html <div id="container"> <div>item as wide as the content.</div> <div> item with more text in it. ...
...id="container"> <div>item as wide as the content.</div> <div> item with more text in it. because the contents of it are wider than the maximum width, it is clamped at 300 pixels. ...
...And 3 more matches

left - CSS: Cascading Style Sheets
he horizontal position of a positioned element. it has no effect on non-positioned 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. syntax /* <length> values */ left: 3px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the distance that the element is moved to the right o...
...values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the distance that the element is moved to the right of its normal position. <percentage> a <percentage> of the containing block's width. auto specifies that: for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element. for relatively positioned elements, the distance of the element from its normal positio...
...the element is relatively positioned.) when position is set to relative, the left property specifies the distance the element's left edge is moved to the right from its normal position. when position is set to sticky, the left property is used to compute the sticky-constraint rectangle. when position is set to static, the left property has no effect. when both left and right are defined, and width constraints don't prevent it, the element will stretch to satisfy both. if the element cannot stretch to satisfy both, the position of the element is overspecified. when this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left. formal definition initial valueautoapplies topositioned elementsinherited...
...And 3 more matches

outline - CSS: Cascading Style Sheets
outline properties in a single declaration. 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: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the o...
...or many elements if its style is not defined. this is because the style defaults to none. a notable exception is input elements, which are given default styling by browsers. 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...
...e a visible focus indicator. provide obvious focus styling if the default focus style is removed. ...
...And 3 more matches

position - CSS: Cascading Style Sheets
ted position value is sticky. it's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. however, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). they can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto. except for the case just described (...
... position within the document, but without the offset affecting other elements. in the example below, note how the other elements are placed as if "two" were taking up the space of its normal location. html <div class="box" id="one">one</div> <div class="box" id="two">two</div> <div class="box" id="three">three</div> <div class="box" id="four">four</div> css .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; } absolute positioning elements that are relatively positioned remain in the normal flow of the document. in contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. the absol...
...tatic). if a positioned ancestor doesn't exist, it is positioned relative to the icb (initial containing block — see also 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. ...
...And 3 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
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 above example shows simple usage of the <video> element. in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other html elements, this element supports the global attributes. autoplay a boolean attribute; if specified, the video a...
...dio, media incoming from webrtc, and so forth), this value is +infinity. height the height of the video's display area, in css pixels (absolute values only; no percentages.) intrinsicsize this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples loop a boolean attribute; if specified, the browser will automatically seek back to the start upon reaching the end of the video. muted a boolean attribute that indicates the default setting of the audio contained in the video. if set, the audio will be initially silenced. its default value is fal...
...bute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the video for playback. the specification does not force the browser to follow the value of this attribute; it is a mere hint. src the url of the video to embed. this is optional; you may instead use the <source> element within the video block to specify the video to embed. width the width of the video's display area, in css pixels (absolute values only; no percentages). events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for f...
...And 3 more matches

Browser detection using the user agent - HTTP
if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxtouchpoints" in navigator)) { /*code here*/}. using this information of whether th...
...what you want to do for screen size is not slash off information on smaller screens. that will only annoy people because it will force them to use the desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more columns with a shorter page on la...
... also consider the following. if more people visit the webpage to see the cats, then it might be a good idea to put all the cats higher in the source code than the dogs so that more people can find what they are looking for faster on smaller screens where the content collapses down to one column. next, always make your code dynamic. the user can flip their mobile device on its side, changing the width and height of the page. or, there might be some weird flip-phone-like device thing in the future where flipping it out extends the screen. do not be the developer having a headache over how to deal with the flip-phone-like device thing. never be satisfied with your webpage until you can open up the dev tools side panel and resize the screen while the webpage looks smooth, fluid, and dynamically r...
...And 3 more matches

Image file type and format guide - Web media technologies
gorithms that still leave fairly large files after compression. tiff supports a variety of compression methods, but the most commonly used are the ccitt group 4 (and, for older fax systems, group 3) compression systems used for by fax software, as well as lzw and lossy jpeg compression. every value in a tiff file is specified using its tag (indicating what kind of information it is, such as the width of the image) and its type (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). this allows different data types to be used for the same properties. for example, the width of an image, imagewidth, is stored using tag 0x0100, and is a one-entry array. by specifying type 3 (s...
...pe (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). this allows different data types to be used for the same properties. for example, the width of an image, imagewidth, is stored using tag 0x0100, and is a one-entry array. ...
...n to that tag (all properties are stored in arrays, even for single values). this allows different data types to be used for the same properties. for example, the width of an image, imagewidth, is stored using tag 0x0100, and is a one-entry array. ...
...And 3 more matches

stroke-linecap - SVG: Scalable Vector Graphics
on a zero length subpath, the path will not be rendered at all. example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.o...
...on a zero length subpath, the stroke consists of a full circle centered at the s...
...on a zero length subpath, the stroke consists of a full circle centered at the subpath's point. ...
...And 3 more matches

SVG and CSS - SVG: Scalable Vector Graphics
below you'll create a simple demonstration that runs in your svg-enabled browser. note: elements referenced by <use> elements inherit the styles from that element. so to apply different styles to them you should use css custom properties. example make a new svg document as a plain text file, doc8.svg. ...
...tion ***/ /* page */ svg { background-color: beige; } #heading { font-size: 24px; font-weight: bold; } #caption { font-size: 12px; } /* flower */ #flower:hover { cursor: crosshair; } /* gradient */ #fade-stop-1 { stop-color: blue; } #fade-stop-2 { stop-color: white; } /* petals */ .segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width); } .segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } /* outer petals */ #outer-petals { opacit...
...stroke: var(--segment-fill-stroke-hover); } .segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width); } .segment-edge:hover { stroke: var(--segment-edge-stroke-hover); } /* outer petals */ #outer-petals { opacity: .75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* non-standard way of styling elements referenced via <use> elements, supported by some older browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblu...
...And 3 more matches

Layout System Overview - Archive of obsolete content
ator 4.x). the decision about when to apply css-specified formatting and when to apply legacy formatting is controlled by the document's doctype specification. these layout modes are referred to as 'standards' and 'navquirks' modes. (doctype and modes are explained in more detail in article mozilla's doctype sniffing. ...
...article mozilla's doctype sniffing. galley and page presentations: the presentation generally is constrained by the width of the window in which the presentation is to be displayed, and a height that extends as far as necessary. this is referred to as the galley mode presentation, and is what one expects from a typical browser. additionally, layout must support a paginated presentation, where the width of the presentation is constrained by the dimensions of the printed output (paper) and the height of each page is fixed. this paged presentation presents several challenges not present in the galley presentation, namely how to break up elements that are larger than a single page, and how to handle changes to page dimensions. the original design of the layout system allowed for multiple, possibly ...
...he most essential frame types are block and inline, and these correspond to the most important layout concepts, the block and line. a block is a rectangular region that is composed of one or more lines. a line is a single row of text or other presentational elements. all layout happens in the context of a block, and all of the contents of a block are formatted into lines within that block. as the width of a block is changed, the contents of the lines must be reformatted. consider for example a large paragraph of text sitting in paragraph: <p> we need documentation for users, web developers, and developers working on mozilla. if you write your own code, document it. much of the existing code <b>isn’t very well documented</b>. in the process of figuring things out, try and document your dis...
...And 2 more matches

crop - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. ...
...e cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. ...
...And 2 more matches

Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoo...
... height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder...
... pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src ...
...And 2 more matches

Box Model Details - Archive of obsolete content
« previousnext » we've seen a lot of features of the box model. here, we'll find out some more details with some examples. more layout details the style properties such as min-width and max-height can be applied to any element. we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larg...
...avior on a horizontal box. you can also prevent this stretching by placing a maximum height on the elements or, better, on the box itself. if a box has a maximum height, the elements inside it are constrained by this. however, the problem with this is that you need to know how big the element will be beforehand. example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible. the best interface is one that can be displayed at various sizes without problems. the box model m...
...ng inside an html element such as a table. however, the layout will be partly controlled by the html element. that means that the flex might not work exactly as you want it. remember that flexibility only has meaning for elements that are directly inside a box or an element that is a type of box. layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. you could also set margins using the css margin property. centering buttons example 4 : source view <hbox pack="center" align="center" flex="1"> <button label="look at me!"/> <button label="push me!"/> </hbox> this example contains a horizontal box...
...And 2 more matches

column - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single column in a columns element. each child of the column element is placed in each successive cell of the grid. the column with the most child elements determines the number of rows in each column. it is common to use columns only to define width and flexibility for the grid column and not place elements directly inside the column. more information is available in the xul tutorial. example see grid for an example. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left...
...y inside the column. more information is available in the xul tutorial. example see grid for an example. ...
...information is available in the xul tutorial. example see grid for an example. ...
...And 2 more matches

dialogheader - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: stri...
... description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. ...
...And 2 more matches

dropmarker - Archive of obsolete content
use a dropmarker, that when pressed, will reveal a popup menu. ...
... pressed, will reveal a popup menu. examples properties accessibletype attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. inhe...
... tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches

image - Archive of obsolete content
xamples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element. the src attribute can be used to specify the url of the image. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. ...
...t displays an image, much like the html img element. the src attribute can be used to specify the url of the image. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes onerror type: script code this event is sent to an image element when an error occurs loading the image. image.on...
... accessibletype type: integer a value indicating the type of accessibility object for the element. src type: url gets and sets the value of the src attribute. ...
...And 2 more matches

listcell - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the elem...
...te is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. ...
...And 2 more matches

listhead - Archive of obsolete content
t for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...is normally preferred to use of the attribute, as it may need to update additional state. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...nteger a value indicating the type of accessibility object for the element. disabled type: boolean gets and sets the value of the disabled attribute. ...
...And 2 more matches

listheader - Archive of obsolete content
em element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...s attribute is copied to the menulist.value property upon user selection of the menuitem. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. inhe...
... tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches

menuitem - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. disabled type: b...
...ue of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...And 2 more matches

progressmeter - Archive of obsolete content
ing the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
...an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...e of the value attribute. for textbox and user editable menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. ...
...And 2 more matches

rows - Archive of obsolete content
ement. the rows element may be nested inside another rows element. the children of these nested rows are counted as normal rows as if they were part of the parent. however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate scrolling may be defined for these rows. non-row related elements placed inside a rows element occupy the full width of the grid and are placed in their corresponding positions between the rows. more information is available in the xul tutorial. example see grid for an example. attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, h...
...ns between the rows. more information is available in the xul tutorial. example see grid for an example. ...
...information is available in the xul tutorial. example see grid for an example. ...
...And 2 more matches

scrollbox - Archive of obsolete content
all men are created equal."/> </vbox> the next bunch of labels is similar, but if the container doesn't give enough room for it, scroll bars will sprout out of nowhere and allow the user to scroll around the big content in the small view space. for the most part, the horizontal and vertical scrollbars will independently handle too-tall and too-wide cases, but each scroll bar takes up additional width and so the appearance of one scroll bar can trigger the other one if it's close to the edge anyway. use overflow:scroll if you want the scroll bars on all the time. <vbox flex="1" style="overflow:auto"> <label value="01 four score and seven years ago "/> <label value="02 our fathers brought forth on "/> <label value="03 this continent, a new nation, "/> <label value="04 conceived in libe...
...isible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...e_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...And 2 more matches

<statusbarpanel> - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no ...
... image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. ...
...And 2 more matches

toolbarspacer - Archive of obsolete content
] firefox only a space between toolbar items. ...
...etween toolbar items. properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. inhe...
... tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches

toolbarspring - Archive of obsolete content
y a flexible space between toolbar items. ...
...toolbar items. properties accessibletype examples (example needed) attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. inheri...
...p, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches

tooltip - Archive of obsolete content
the text will be cropped in the middle, showing both the start and end of the text normally. none the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. ...
... the text will be not be cropped using an ellipsis. however, the text will simply be cut off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. ...
... label type: string the label that will appear on the element. if this is left out, no text appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. ...
...And 2 more matches

treecols - Archive of obsolete content
ed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...pickertooltiptext type: string the text for the tooltip on the column picker. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. inhe...
... tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...
...And 2 more matches

Browser Detection and Cross Browser Support - Archive of obsolete content
netscape 7.01 examples if you are like me, you learn best from examples. studying how other authors use browser detection and cross browser coding techniques is the best way to learn. example 1 - object based feature detection this example illustrates the use of feature detection. ...
... use browser detection and cross browser coding techniques is the best way to learn. example 1 - object based feature detection this example illustrates the use of feature detection. note that gecko 1.0 (netscape 7) and later implement the proprietary internet explorer feature clientwidth while netscape 6 did not. in this example, netscape 7 and internet explorer 5+ will automatically use clientwidth while netscape navigator 4, netscape 6, compuserve 7 and opera will use innerwidth. ...
... internet explorer feature clientwidth while netscape 6 did not. in this example, netscape 7 and internet explorer 5+ will automatically use clientwidth while netscape navigator 4, netscape 6, compuserve 7 and opera will use innerwidth. compare how you would have had to code this using vendor/version based detection approaches. ...
...And 2 more matches

::-ms-fill-lower - Archive of obsolete content
tion 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. ...
... the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...
...s-fill-lower in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-fill-upper - Archive of obsolete content
tion 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. ...
... the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...
...s-fill-upper in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-reveal - Archive of obsolete content
o 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. ...
...only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
...::-ms-reveal in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-thumb - Archive of obsolete content
sentation 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. ...
... only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...
... ::-ms-thumb in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-ticks-after - Archive of obsolete content
lor 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. ...
...the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...-ticks-after in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-ticks-before - Archive of obsolete content
or 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. ...
...he following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...ticks-before in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-track - Archive of obsolete content
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. ...
... only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
... ::-ms-track in its selector. other properties are ignored. ...
...And 2 more matches

::-ms-value - Archive of obsolete content
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. ...
... only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...
... ::-ms-value in its selector. other properties are ignored. ...
...And 2 more matches

Collision detection - Game development
ulations } } } if the center of the ball is inside the coordinates of one of our bricks, we'll change the direction of the ball. for the center of the ball to be inside the brick, all four of the following statements need to be true: the x position of the ball is greater than the x position of the brick. the x position of the ball is less than the x position of the brick plus its width. ...
... making the bricks disappear after they are hit the above code will work as desired and the ball changes its direction. the problem is that the bricks are staying where they are. ...
...awbricks() function before drawing it — if status is 1, then draw it, but if it's 0, then it was hit by the ball and we don't want it on the screen anymore. ...
...And 2 more matches

Build the brick field - Game development
dd a call to initbricks at the end of the create() function: function create(){ // ... initbricks(); } now onto the function itself. add the initbricks() function at the end of our games code, just before the closing </script> tag, as shown below. ...
...in with we've included the brickinfo object, as this will come in handy very soon: function initbricks() { brickinfo = { width: 50, height: 20, count: { row: 3, col: 7 }, offset: { top: 50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the information we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the padding between each row and column of bricks. now, let's start creating the bricks themselves — add an empty group first to contain the bricks, by adding the following line at the bottom of the initbr...
...'s body is set to be immovable (so it won't move when hit by the ball), and we're also setting the anchor to be in the middle and adding the brick to the group. the problem currently is that we're painting all the bricks in one place, at coordinates (0,0). what we need to do is draw each brick at its own x and y position. update the brickx and bricky lines as follows: var brickx = (c*(brickinfo.width+brickinfo.padding))+brickinfo.offset.left; var bricky = (r*(brickinfo.height+brickinfo.padding))+brickinfo.offset.top; each brickx position is worked out as brickinfo.width plus brickinfo.padding, multiplied by the column number, c, plus the brickinfo.offset.left; the logic for the bricky is identical except that it uses the values for row number, r, brickinfo.height, and brickinfo.offset.top. ...
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
ariable that can store only one value. 24 asynchronous glossary, web, webmechanics, asynchronous the term asynchronous refers to or multiple related things happening without waiting for the previous one to complete). 25 attribute codingscripting, glossary, html an attribute extends an element, changing its behavior or providing metadata. 26 bandwidth glossary, infrastructure bandwidth is the measure of how much information can pass through a data connection in a given amount of time. it is usually measured in multiples of bits-per-second (bps), for example megabits-per-second (mbps) or gigabits-per-second (gbps). 27 base64 advanced, base64, javascript, typed arrays, uri, url, unicode problem, atob(), btoa() base...
...properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. the cssom is very similar to the document object model (dom). both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website. 57 css pixel css, css pixel, glossary, height, length, pixel, size, unit, width the css pixel—denoted in css with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes. 58 ...
... the internet is a worldwide network of networks that uses the internet protocol suite (also named tcp/ip from its two most important protocols). 237 intrinsic size css, glossary, intrinsic size in css, the intrinsic size of an element is the size it would be based on its content, if no external factors were applied to it. for example, inline elements are sized intrinsically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do. 238 jpeg beginner, composing, glossary, images, jpeg jpeg (joint photographic experts group) is a commonly used method of lossy compression for digital images. 239 json codingscripting, glossary, intro, json, l10n:priority javascript object notation (json) is...
...And 2 more matches

HTML: A good basis for accessibility - Learn web development
old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
...adouts, especially if the layout is complex and has many nested tables. ...
...ple table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </for...
...And 2 more matches

HTML: A good basis for accessibility - Learn web development
old days, people used to create page layouts using html tables — using different table cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
...adouts, especially if the layout is complex and has many nested tables. ...
...ple table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </for...
...And 2 more matches