attribute.align - Archive of obsolete content
if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...And 5 more matches

Box alignment in Multi-column Layout - CSS: Cascading Style Sheets
the box alignment specification details how alignment works in various layout methods; on this page we explore how box alignment works in the context of multi-column layout. as this page aims to detail things which are specific to multi-column layout and box alignment, it should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods. in multi-column layout the alignment container is the content box of the multicol container. the alignment subject is the column box. the properties which apply to multi-column layouts are detailed below. note: multi-column layout predates the box alignment specification. and the properties listed here, while specified for multicol, may not be supported in browsers. ...
...any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the column-gap property. ...
...any spacing added to the columns due to use of space distribution will be added to the gap between the columns, therefore making the gap larger than might be specified by the column-gap property. ...
...And 5 more matches

align - Archive of obsolete content
if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. ...
...And 4 more matches

text-align-last - CSS: Cascading Style Sheets
the text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. 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 text-align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. 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. ...
...align-last css property sets how the last line of a block or a line, right before a forced line break, is aligned. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 4 more matches

HTMLImageElement.align - Web APIs
the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image relative to its container. you should instead use the css propertiy vertical-align, which does in fact also work on images despite its name. you can also use the float property to float the image to the left or right margin. the align property reflects the html align content attribute. syntax htmlimageelement.align = alignmode; alignmode = htmlimageelement.align; value a domstring specifying one of the following strings which set the alignment mode for the image. baseline alignment these three values specify the alignment of the element relative to the text baseline. these should be replaced by using the css vertical-align property. bottom the bottom edge of the ima...
...tmlimageelement.align = alignmode; alignmode = htmlimageelement.align; value a domstring specifying one of the following strings which set the alignment mode for the image. baseline alignment these three values specify the alignment of the element relative to the text baseline. these should be replaced by using the css vertical-align property. bottom the bottom edge of the image is to be aligned vertically with the current text baseline. default value. middle the center of the object should be aligned vertically with the current baseline. top the top edge of the object should be aligned vertically with the current baseline. it may be worth noting that vertical-align offers several additional options for its value; you may wish to consider these when changing your code to use it. ...
...instead, they cause the image to "float" to the left or right margin, allowing the following text to flow around the image. you should instead use the css float property, specifying as the value either left or right. left floats the image over to place the left edge flush against the curent margin. any text that follows will flow against the image's right edge. ...
...And 2 more matches

initial-letter-align - CSS: Cascading Style Sheets
the initial-letter-align css property specifies the alignment of initial letters within a paragraph. /* keyword values */ initial-letter-align: auto; initial-letter-align: alphabetic; initial-letter-align: hanging; initial-letter-align: ideographic; /* global values */ initial-letter-align: inherit; initial-letter-align: initial; initial-letter-align: unset; syntax one of the keyword values listed below. values auto the user agent selects the value which corresponds to the language of the text. western languages would default to alphabetic, cjk languages to ideographic, and some indic languages to hanging. alphabetic as described above, the cap height of the initial letter aligns with the cap height of the first line of text. ...
... keyword values listed below. values auto the user agent selects the value which corresponds to the language of the text. western languages would default to alphabetic, cjk languages to ideographic, and some indic languages to hanging. alphabetic as described above, the cap height of the initial letter aligns with the cap height of the first line of text. the baseline of the initial letter aligns with the baseline of the nth text baseline. hanging the hanging baseline of the initial letter aligns with the hanging baseline of the first line of text. ideographic the initial letter is centered in the n-line area. formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation t...
...nitial letter aligns with the hanging baseline of the first line of text. ideographic the initial letter is centered in the n-line area. ...
...And 2 more matches

CanvasRenderingContext2D.textAlign - Web APIs
the canvasrenderingcontext2d.textalign property of the canvas 2d api specifies the current text alignment used when drawing text. the alignment is relative to the x value of the filltext() method. for example, if textalign is "center", then the text's left edge will be at x - (textwidth / 2). syntax ctx.textalign = "left" || "right" || "center" || "start" || "end"; options possible values: "left" the text is left-aligned. "right" the text is right-aligned. "center" the text is centered. "start" the text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). "end" the text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales). the defaul...
...e text is right-aligned. "center" the text is centered. "start" the text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). "end" the text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales). the default value is "start". examples general text alignment this example demonstrates the three "physical" values of the textalign property: "left", "center", and "right". html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30p...
...demonstrates the three "physical" values of the textalign property: "left", "center", and "right". html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", a...
... two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", although this is also the default for english-language text. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification. living standard ...

scroll-snap-align - CSS: Cascading Style Sheets
the scroll-snap-align property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). the two values specify the snapping alignment in the block axis and inline axis, respectively. if only one value is specified, the second value defaults to the same value. syntax /* keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /* global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis. ...
...cond value defaults to the same value. syntax /* keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /* global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset; values none the box does not define a snap position in that axis. start the start alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. end the end alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. center the center alignment of this box's scroll snap area, within the scroll container's snapport is a snap position in this axis. safari currently has the tw...
...e syntax in the wrong order, the first value being inline the second block. see bug #191865. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | start | end | center ]{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification. candidate recommendation initial definition ...

buttonalign - Archive of obsolete content
...
... ...

align - Archive of obsolete content
...
... ...

-ms-ime-align - Archive of obsolete content
the -ms-ime-align css property is a microsoft extension aligning the input method editor (ime) candidate window box relative to the element on which the ime composition is active. the extension is implemented in microsoft edge and internet explorer 11. ime candidate lists are positioned on the screen with sufficient size to allow basic text input. in some cases, the ime may enforce a reasonable minimum size. in the case of -ms-ime-align: after, an ime might adjust the candidate window and keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation. initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword val...
...in the case of -ms-ime-align: after, an ime might adjust the candidate window and keyboard input behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation. initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ -ms-ime-align: auto; -ms-ime-align: after; values auto initial value. the ime may align the candidate window in any manner. after the ime should attempt to align the candidate window below the element (in left-to-right and right-to-left layouts). formal syntax auto | after specifications not part of any specification. ...

Alignment container - MDN Web Docs Glossary: Definitions of Web-related terms
the alignment container is the rectangle that the alignment subject is aligned within. this is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block. ...
... the alignment container is the rectangle that the alignment subject is aligned within. this is defined by the layout mode; it is usually the alignment subject’s containing block, and assumes the writing mode of the box establishing the containing block. ...

Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
in css box alignment the alignment subject is the thing (or things) being aligned by the property. for justify-self and align-self, the alignment subject is the margin box of the box the property is set on, using the writing mode of that box. for justify-content and align-content, the writing mode of the box is also used. the definition of the alignment subject depends on the layout mode being used. block containers (including table cells) the entire content of the block as a single unit. multicol containers the column boxes, with any spacing inserted between column boxes added to the relevant column gaps. flex containers for justify-content, the flex items in each flex line. for align-content, the flex lines. note, this only has an effect on multi-line flex containers. grid...
... flex containers for justify-content, the flex items in each flex line. for align-content, the flex lines. note, this only has an effect on multi-line flex containers. grid containers the grid tracks in the appropriate axis, with any spacing inserted between tracks added to the relevant gutters. ...

Fallback alignment - MDN Web Docs Glossary: Definitions of Web-related terms
in css box alignment, a fallback alignment is specified in order to deal with cases where the requested alignment cannot be fullfilled. for example, if you specify justify-content: space-between there must be more than one alignment subject. if there is not, the fallback alignment is used. this is specified per alignment method, as detailed below. ...
...if you specify justify-content: space-between there must be more than one alignment subject. if there is not, the fallback alignment is used. this is specified per alignment method, as detailed below. ...

HTMLTableElement.align - Web APIs
the htmltableelement.align property represents the alignment of the table. syntax htmltableelement.align = alignment; var alignment = htmltableelement.align; parameters alignment domstring with one of the following values: left center right example // set the alignmnet of a table var t = document.getelementbyid('tablea'); t.align = 'center'; specification w3c dom 2 html specification htmltableelement .align. ...

MathML Torture Test
n.realityripple.com/samples/83/2259f5bfe3.png" width="250" height="66" alt="texbook, 18.23" /></td> <td> <math display="block"> <mrow> <mi>f</mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <mtable> <mtr> <mtd columnalign="center"> <mrow> <mn>1</mn> <mo>/</mo> <mn>3</mn> </mrow> </mtd> <mtd columnalign="left"> <mrow> <mtext>if&nbsp;</mtext> <mn>0</mn> <mo>&leq;</mo> <mi>x</mi> ...
...columnalign="left"> <mrow> <mtext>if&nbsp;</mtext> <mn>0</mn> <mo>&leq;</mo> <mi>x</mi> <mo>&leq;</mo> <mn>1</mn> <mo>;</mo> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="center"> <mrow> <mn>2</mn> <mo>/</mo> <mn>3</mn> </mrow> </mtd> <mtd columnalign="center"> <mrow> <mtext>if&nbsp;</mtext> <mn>3</mn> <mo>&leq;</mo> <mi>x</mi> ...
...lumnalign="center"> <mrow> <mtext>if&nbsp;</mtext> <mn>3</mn> <mo>&leq;</mo> <mi>x</mi> <mo>&leq;</mo> <mn>4</mn> <mo>;</mo> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="center"> <mn>0</mn> </mtd> <mtd columnalign="left"> <mtext>elsewhere.</mtext> </mtd> </mtr> </mtable> </mrow> </mrow> </math> </td></tr> <tr> <td>19</td> <td><img src="https://udn.realityripple.com/samples/bf/4ccasc768c.png" width="101" height="44" alt...
...And 66 more matches

filter - CSS: Cascading Style Sheets
ue of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...sian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...her, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...And 56 more matches

justify-items - CSS: Cascading Style Sheets
m all a default way of justifying each box along the appropriate axis. 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. ...
...xample 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 effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. ...
...e effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. for absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...And 18 more matches

place-content - CSS: Cascading Style Sheets
the place-content css shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as grid or flexbox. 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. ...
... justify-content properties) in a relevant layout system such as grid or flexbox. 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. ...
...m such as grid or flexbox. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 17 more matches

justify-self - CSS: Cascading Style Sheets
the css justify-self property sets the way a box is justified inside its alignment container along the appropriate axis. 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 effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...est. the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
... item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...And 15 more matches

MathML attribute reference - MathML
attribute description accent <mo>, <mover>, <munderover> a boolean value specifying whether the operator should be treated as an accent. accentunder <munder>, <munderover> a boolean value specifying whether the operator should be treated as an accent. actiontype <maction> a string value specifying the action happening for this element. ...
...lue specifying whether the operator should be treated as an accent. accentunder <munder>, <munderover> a boolean value specifying whether the operator should be treated as an accent. actiontype <maction> a string value specifying the action happening for this element. align <mtable> <munder>, <mover>, <munderover> <mstack> specifies different alignments of several elements (see element pages for details). unimplemented alignmentscope <mtable> a boolean value specifying whether table columns should act as alignment scopes or not. unimplemented altimg altimg-width altimg-height altimg-valign alttext <math> visual and textual fall-back options. bevelled <mfrac> specifies the st...
... columnlines <mtable> specifies table column borders. ...
...And 15 more matches

place-items - CSS: Cascading Style Sheets
the css place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the align-items and justify-items properties) in a relevant layout system such as grid or flexbox. if the second value is not set, the first value is also used for it. 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. ...
... or flexbox. if the second value is not set, the first value is also used for it. 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. ...
...s stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 13 more matches

Web Video Text Tracks Format (WebVTT) - Web APIs
example 6 consists of the header, a blank line, and then fiv...
...stes™ ::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; } positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see cue settings for more information): webvtt 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% where did he go? 00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% i think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% what are you waiting for? webvtt cues a cue is a single subtitle block that has a single start time, end time, and textual payload. example 6 consists of the header, a blank line, and then five cues separated by blank lines. a cue consists of five components: an optiona...
...ank line, and then five cues separated by blank lines. a cue consists of five components: an optional cue identifier followed by a newline. cue timings. optional cue settings with at least one space before the first and between each setting. one or more newlines. the cue payload text. example 7 - example of a cue 1 - title crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start some time ago in a place rather distant.... cue identifier the identifier is a name that identifies the cue. it can be used to reference the cue from a script. it must not contain a newline and cannot contain the string "-->". it must end with a single newline. they do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...). example 8 - cue identifier from exampl...
...And 12 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
ex properties $fg-boxflex: $fg; // box-flex only supports a flex-grow value so lets grab the // first item in the list and just return that. ...
... note: space-* values not supported in older syntaxes. ...
... justify; -moz-box-pack: justify; -ms-flex-pack: justify; } @else if $value == space-around { -ms-flex-pack: distribute; } @else { -webkit-box-pack: $value; -moz-box-pack: $value; -ms-flex-pack: $value; } -webkit-justify-content: $value; justify-content: $value; } // shorter version: @mixin flex-just($args...) { @include justify-content($args...); } flexbox align items flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-items sets the default alignment for all of the flex container's items, including anonymous flex items. align-self allows this default alignment to be overridden for individual flex items. (for anonymous flex items, align-self always ma...
...And 12 more matches

place-self - CSS: Cascading Style Sheets
the place-self css shorthand property allows you to align an individual item in both the block and inline directions at once (i.e. the align-self and justify-self properties) in a relevant layout system such as grid or flexbox. if the second value is not present, the first value is also used for it. 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. ...
...flexbox. if the second value is not present, the first value is also used for it. 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. ...
...le is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 12 more matches

<tr>: The Table Row element - HTML: Hypertext Markup Language
ur tabular data. attributes this element includes the global attributes. there are also several deprecated attributes, which you should avoid but may need to know when reading older code. deprecated attributes the following attributes may still be implemented in browsers but are no longer part of the html specification and may be missing or may not work as expected. they should be avoided. ...
...o several deprecated attributes, which you should avoid but may need to know when reading older code. deprecated attributes the following attributes may still be implemented in browsers but are no longer part of the html specification and may be missing or may not work as expected. they should be avoided. alignobsolete since html5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row individually. possible values are: left align the content of each cell at its left edge. center center the contents of each cell between their left and right edges. right align the content of each cell at its right edge. justify widen whitespaces within the text of each cell so...
...n every cell in the row individually. possible values are: left align the content of each cell at its left edge. center center the contents of each cell between their left and right edges. right align the content of each cell at its right edge. justify widen whitespaces within the text of each cell so that the text fills the full width of each cell (full justification). char align each cell in the row on a specific character (such that each row in the column that is configured this way will horizontally align its cells on that character). ...
...And 12 more matches

Positioning - Archive of obsolete content
positioning popups there are several ways in which the location of a popup on screen may be controlled. default positioning of popups a top level menu popup is, by default, placed with the upper edge of the popup flush with the lower edge of the menu or button it is associated with. horizontally, the left edge of the menu popup is aligned with the left edge of the menu or button. a submenu, however, is placed by default to the right of the parent menu item, such that the top edge of the menu is aligned with the top edge of the parent menu item. however, the submenu will appear to the left instead for right to left locales. for both top level menus and submenus, they may appear above or to the left instead of their usual placement if there is not enough room to display the menu at f...
...popups can be controlled in two ways. first, the position can be specified when using the popup's openpopup method. this is used when a popup is opened by a script. second, the position can be specified using several attributes placed on the menupopup, panel or tooltip element. these attributes are described below and function the same for all three elements. the position attribute specifies the alignment of the popup with respect to the element that the popup is attached to. for a menupopup placed inside a menu, button or toolbarbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or toolbarbutton. for a menupopup or panel attached using the popup attribute, the position attribute controls how the popup is anchored to the element with the popup ...
... <menuitem label="paste"/> </menupopup> <label value="clipboard" popup="edititems"/> in this example, a menupopup is attached to a label via the popup attribute, which will cause the popup to appear when the label is left-clicked. the position attribute is used to specify that the popup should appear at the 'end_before' location, which will cause the popup to appear to the right of the label aligned along the top edge. there are several possible values for the position attribute, described here, along with images which show how a popup would be aligned in each case. the following assumes a left to right user interface. for right to left user interfaces, the same values should be used, but will cause the popup to appear and be aligned on the opposite side. the position attribute can be sp...
...And 11 more matches

Border-image generator - CSS: Cascading Style Sheets
st-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { 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 no-repeat; } .ui-...
...t; 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 no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*********************...
...it-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; bac...
...And 11 more matches

CSS property compatibility table for form controls - Learn web development
border unless background:none is applied. text and font color[1] yes yes if the border-color property is not set, some webkit based browsers will apply the color property to the border as well as the font on <textarea>s. font yes yes see the note about line-height letter-spacing yes yes text-align yes yes text-decoration partial partial see the note about opera text-indent partial[1] partial[1] ie9 supports this property only on <textarea>s, whereas opera only supports it on single line text fields. text-overflow partial partial text-shadow partial partial text-transform yes ...
... 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 yes yes font yes yes see the note about line-height. ...
... 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 and font color yes yes font yes yes see the note about line-height. letter-spacing yes yes text-align yes yes text-decoration partial partial text-indent yes yes text-overflow no no text-shadow partial partial text-transform n.a. n.a. border and background background no no supported but there is too much inconsistency between browsers to be reliable. ...
...And 10 more matches

Box-shadow generator - CSS: Cascading Style Sheets
elvetica, sans-serif; -moz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #...
...r: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > ...
... solid #ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .title { text-align: center; font-weight: bold; line-height: 2em; border-bottom: 1px solid #43a6e1; color: #666; } /* * stack of layers for shadow */ #layer_manager { width: 17%; background-color: #fefefe; margin: 0 1% 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button { width: 30%; height: 25px; margin:0 0 10px; colo...
...And 10 more matches

<tbody>: The Table Body element - HTML: Hypertext Markup Language
> element as a child. permitted parents within the required parent <table> element, the <tbody> element can be added after a <caption>, <colgroup>, and a <thead> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. ...
...he required parent <table> element, the <tbody> element can be added after a <caption>, <colgroup>, and a <thead> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
...aption>, <colgroup>, and a <thead> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes. if this attribute is not set, th...
...And 10 more matches

<mtable> - MathML
thml <mtable> element allows you to create tables or matrices. inside a <mtable> only <mtr> and <mtd> elements may appear. these elements are similar to <table> , <tr> and <td> elements of html. note: the <mtable> element resets the displaystyle attribute to false. if you want to use this element as an inline-block, you might want to set <mtable displaystyle="true">...</mtable>. attributes align specifies the vertical alignment of the table with respect to its environment. possible values are: axis (default): the vertical center of the table aligns on the environment's axis (typically the minus sign). baseline: the vertical center of the table aligns on the environment's baseline. bottom: the bottom of the table aligns on the environments baseline. center: see baseline. top...
...a negative integer value counts rows from the bottom of the table. ...
...a negative integer value counts rows from the bottom of the table. ...
...And 9 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
t ways to refer to elements in css and javascript. there are also special kinds of element that only come into play after being referenced by another element. orient whether a box's contents will be vertically or horizontally arrayed depends on the elements in their initial state. you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical. ...
...lements in css and javascript. there are also special kinds of element that only come into play after being referenced by another element. orient whether a box's contents will be vertically or horizontally arrayed depends on the elements in their initial state. you can explicitly set or change this layout using the orient attribute, with options for horizontal and vertical. ...
...tial 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. ...
...And 8 more matches

Color picker tool - CSS: Cascading Style Sheets
r { 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-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .input .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .inp...
...icker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { 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 no-repeat; } .ui-...
...t; 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 no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, hel...
...And 8 more matches

justify-content - CSS: Cascading Style Sheets
ems along the main-axis of a flex container, and the inline axis of a grid container. the interactive example below demonstrates some of the values using grid 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. ...
... contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the alignment is done after the lengths and auto margins are applied, meaning that, if in a flexbox layout there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space. ...
...d the center */ justify-content: start; /* pack items from the start */ justify-content: end; /* pack items from the end */ justify-content: flex-start; /* pack flex items from the start */ justify-content: flex-end; /* pack flex items from the end */ justify-content: left; /* pack items from the left */ justify-content: right; /* pack items from the right */ /* baseline alignment */ /* justify-content does not take baseline values */ /* normal alignment */ justify-content: normal; /* distributed alignment */ justify-content: space-between; /* distribute items evenly the first item is flush with the start, the last is flush with the end */ justify-content: space-around; /* distribute items evenly ...
...And 8 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
itle>none</title> </rect> <svg viewbox="0 0 100 100" width="160" height="60" preserveaspectratio="none" x="0" y="30"> <use href="#smiley" /> </svg> </svg> path { fill: yellow; stroke: black; stroke-width: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:active { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport. the alignment value must be one of the...
...aling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport. the alignment value must be one of the following keywords: none do not force uniform scaling. scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. note that if <align> is none, then the optional <meetorslice> value is ignored. xminymin - force uniform scaling. align the <min-x> of the element's viewbox with the smallest x value of the viewport. align the <min-y> of the element's viewbox with the smallest y value of the viewport. xmidymin - force uniform scaling. ...
...the element's bounding box exactly matches the viewport rectangle. note that if <align> is none, then the optional <meetorslice> value is ignored. xminymin - force uniform scaling. align the <min-x> of the element's viewbox with the smallest x value of the viewport. align the <min-y> of the element's viewbox with the smallest y value of the viewport. xmidymin - force uniform scaling. align the midpoint x value of the element's viewbox with the midpoint x value of the viewport. align the <min-y> of the element's viewbox with the smallest y value of the viewport. xmaxymin - force uniform scaling. align the <min-x>+<width> of the element's viewbox with the maximum x value of the viewport. align the <min-y> of the element's viewbox with the smallest y value of the viewport. ...
...And 8 more matches

SVG documentation index - SVG: Scalable Vector Graphics
tribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. 20 accumulate needscompattable, needsexample, svg, svg attribute this attribute controls whether or not the animation is cumulative. 21 additive needscompattable, needsexample, svg, svg attribute no summary! 22 alignment-baseline svg, svg attribute the alignment-baseline attribute specifies how an object is aligned with respect to its parent. this property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. for example, this allows alphabetic baselines in roman text to stay aligned across font size changes. it defaults to the baseline with the sam...
... 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. ...
...svg attribute the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is divided to yield the destination color value. 61 dominant-baseline reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. 62 dur svg, svg attribute the dur attribute indicates the simple duration of an animation. 63 dx svg, svg attribute the dx attribute indicates a shift along the x-axis on the positi...
...And 8 more matches

Plug-in Basics - Plugins
le> <style type="text/css"> .myplugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object data="foo_movie.swf" type="application/x-shockwave-flash" class="myplugin"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object type="*" class="myplugin"> <param name="pluginspage" ...
...ling mime types are repeated. the rest of this section is a brief introduction to this html element. for more information on the object element and other elements used for plug-in display, see w3c html 4.01 specification. to embed a variety of object types in an html page, use the object element. <object classid="classfile" data="datalocation" codebase="classfiledir" type="mimetype" align="alignment" height="pixheight" width="pixwidth" id="name" > ... </object> the first set of object element attributes are urls. classid is the url of the specific object implementation. this attribute is similar to the code attribute of the applet element. though gecko does not support this object attribute, you can nest object elements with different attributes to use the object ele...
...orm (see the example above). data represents the url of the object's data; this is equivalent to the src attribute of embed. codebase represents the url of the plug-in; this is the same as the codebase attribute of the applet element. for plug-ins, codebase is the same as pluginspace. type represents the mime type of the plug-in; this is the same as the type attribute of embed. height, width, align are basic img/embed/applet attributes supported by object. height and width are required for object elements that resolve to embed elements. use the id attribute, which specifies the name of the plug-in, if the plug-in is communicating with javascript. this is equivalent to the name attribute of applet and embed. it must be unique. using the appropriate attributes it's up to you to provide en...
...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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 7 more matches

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
css was defined in one large document. as css became a more feature rich language, maintaining one huge specification became problematic, with different parts of css moving on at different speeds. css was therefore modularised, and the various css specifications are different modules that make up css today. these modules relate to each other, and are at different stages of development. ...
...became problematic, with different parts of css moving on at different speeds. css was therefore modularised, and the various css specifications are different modules that make up css today. these modules relate to each other, and are at different stages of development. the box alignment module for many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. ...
...e modularised, and the various css specifications are different modules that make up css today. these modules relate to each other, and are at different stages of development. the box alignment module for many people the first reason they start to look at flexbox is because of the ability to properly align flex items inside a flex container. flexbox provides access to properties that allow the alignment of items on their cross axis and justification of items on the main axis. these properties started life in the flexbox specification, but are now also part of the box alignment specification. this specification details how alignment works in all layout — not just flexbox. box alignment deals with alignment and justification, and also distribution of space along an axis. the reason that th...
...And 7 more matches

Typical use cases of Flexbox - CSS: Cascading Style Sheets
een items. these are the uses that flexbox was designed for. you can read more about the difference between flexbox and css grid layout in relationship of flexbox to other layout methods, where we discuss how flexbox fits into the overall picture of css layout. in reality we also often use flexbox for jobs that might be better done by grid layout, as a fallback for grid, and also in order to get alignment capabilities. this is something that may well change once box alignment is implemented in block layout. in this guide i look at some of the typical things you might use flexbox for today. navigation a common pattern for navigation is to have a list of items displayed as a horizontal bar. this pattern, as basic as it seems, was difficult to achieve before flexbox. it forms the most simple of...
...with that space, and have a couple of options. we either display the space outside of the items — therefore spacing them out with white space between or around them — or we absorb the extra space inside the items and therefore need a method of allowing the items to grow and take up this space. space distributed outside the items to distribute the space between or around the items we use the alignment properties in flexbox, and the justify-content property. you can read more about this property in aligning items in a flex container, which deals with aligning items on the main axis. in the below live example we display the items at their natural size and by using justify-content: space-between make equal amounts of space between the items. you can change how the space is distributed using ...
...— all items grow and shrink from a flex-basis of auto. this would mean that the longer item would have more space. in the live example below try changing flex: auto to flex: 1. this is the shorthand for flex: 1 1 0 and causes all of the items become the same width, as they are working from a flex-basis of 0 allowing all of the space to be distributed evenly. ...
...And 7 more matches

Fundamental text and font styling - Learn web development
prerequisites: basic computer literacy, html basics (study introduction to html), css basics (study introduction to css). ...
...es, which we'll look at separately in this article: font styles: properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc. text layout styles: properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box. note: bear in mind that the text inside an element is all affected as one single entity. you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an eleme...
...nsform: 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 decorations already present. underline: underlines the text. overline: gives the text an overline. l...
...And 6 more matches

Basics
) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x if x < 0 x otherwise you can also typeset 2d mathematical constructs such as matrices. the following example shows the i-th step of the multiplication of a matrix a by a vector x (notice how ai1 , ... , ain , x1 are on the same baseline, other alignments are possible): i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ... a n n ] [ x1 x2 x3 : xn ] in mozilla, mathml runs inside the main browser. so it responds to other browser operations such as the zoom (try view -> text zoom), and you can do...
...q(x) = a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-1 . you can also do other weird and risky things which are not portable, bongo warns, such as mixing mathml with other markups lizard + bongo = ∫ a b d x + mathml and javascript html content <p> and you can turn to javascript and the dom for dynamic operations. </p> <div style="text-align:center"> fill the gaps in this matrix with resizable input fields. </div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow...
...this matrix with resizable input fields. ...
...And 6 more matches

MathML Demo: <mtable> - tables and matrices
as a visual aid, the examples deliberately draw attention to the math axis and the baseline: ----------------------- this is the math axis ..................... this is the baseline external vertical align is center ---... 1 22 333 4444 x 55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below. when align="center" or align="baseline", the middle of the table coincides with the baseline. external vertical align is axis ---... ...
...\hline's above and below. when align="center" or align="baseline", the middle of the table coincides with the baseline. external vertical align is axis ---... 1 22 333 4444 x 55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here 7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed". by default -- when the align attribute is not set, or when align="axis", the middle of the table coincides with the math axis. external vertical align is top ---... 1 22 333 4444 55555 x + 1 666666 a b c 7777777 11 cols arg is"r|c:l". external vertical align is bottom ---... 1 22 333 4444 55555 666666 x 2 a b c 7777777 11 cols arg is "r...
... 1 22 333 4444 55555 666666 x 2 a b c 7777777 11 cols arg is "r|cl". mathml doesn't specify how to only display certain sides of the table border, as in "|rcl", but these can be obtained in mozilla using the 'border' property of css, e.g., "|rcl" can be achieved with the css declaration "mtable { border-left: solid thin }". math axis test, using externally aligned arrays inside symmetric fences. ---... [ 1 666666 x 2 c axis ] [ 1 666666 x 2 c center ] + ⌊ 1 55555 x + 1 c bottom ⌋ + ⌈ 1 4444 x c top ⌉ + ∥ 1 4444 4444 4444 x center ∥ post text. now for a display ---... 1 4444 4444 4444 x 7777777 ...
...And 6 more matches

HTMLEmbedElement - Web APIs
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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 more matches

SVGTSpanElement - Web APIs
the svgtspanelement interface represents a <tspan> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 more matches

SVGTextElement - Web APIs
the svgtextelement interface corresponds to the <text> elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 more matches

SVGTextPathElement - Web APIs
the svgtextpathelement interface corresponds to the <textpath> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 6 more matches

CSS Flexible Box Layout - CSS: Cascading Style Sheets
css flexible box layout is a module of css that defines a css box model optimized for user interface design, and the layout of items in one dimension. in the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. both horizontal and vertical alignment of the children can be easily manipulated. basic example in the following example a container has been set to display: flex, which means that the three child items become flex items. the value of justify-content has been set to space-between in order to space the items out evenly on the main axis. an equal amount of space is placed between each item with the left and right items being flush with the ed...
...hich means that the three child items become flex items. the value of justify-content has been set to space-between in order to space the items out evenly on the main axis. an equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. ...
...eing flush with the edges of the flex container. you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment. ...
...And 6 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
words as offset values to push the item around. in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <div class="container"> <div class="item">item</div> </div> another place you might see physical keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing...
...r what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. browsers are pretty good at dealing with text direction, and you don’t even need to be working in a rtl language to take a look. in the example below, i have two paragraphs. one has no text-align property set, the second has text-align set to left. i have added dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr. you can see that the first paragraph remains left to right, due to the text-align value being left . the second however, switches direction and the text runs from right to left . this is a very simple example ...
... of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about text direction. which is why in grid layout we use the keyword start when aligning something to the start of the container. for me, working in english, start may well be on the left, however it doesn’t have to be, and the word start infers no physical location. block and inline once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. we need a new reference point, and this is where understanding th...
...And 6 more matches

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
this early implementation is also the version of grid layout implemented in edge up to version 15. the ie/edge (≤15) version of the specification is prefixed with an -ms prefix and the properties implemented in ie/edge (≤15) are as follows: grid-template-columns as -ms-grid-columns grid-template-rows as -ms-grid-rows grid-row-start as -ms-grid-row grid-column-start as -ms-grid-column align-self as -ms-grid-row-align justify-self as -ms-grid-column-align the ie version has additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span. this version does not include auto-placement capability, or grid template areas. some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties. as these properties ar...
...ally used floats to create multiple column layouts. if you have floated an item, which is also a grid item in a supporting browser, the float will no longer apply to the item. the fact is that a grid item takes precedence. in the example below, i have a simple media object. ...
...supporting browser, the float will no longer apply to the item. the fact is that a grid item takes precedence. in the example below, i have a simple media object. in a non-supporting browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...And 6 more matches

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
line. these items are sharing the available space and not lining up underneath the items above. this is because when you wrap flex items, each new row (or column when working by column) becomes a new flex container. space distribution happens across the row. a common question then is how to make those items line up. this is where you want a two-dimensional layout method: you want to control the alignment by row and column, and this is where grid comes in. the same layout with css grids in this next example, i create the same layout using grid. this time we have three 1fr column tracks. we do not need to set anything on the items themselves; they will lay themselves out one into each cell of the created grid. as you can see they stay in a strict grid, lining up in rows and columns. with five...
...acks that respond to the size of the content, however, they will also change the entire track. if you are using flexbox and find yourself disabling some of the flexibility, you probably need to use css grid layout. an example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. in that case, a grid is likely to be a better choice. box alignment the feature of flexbox that was most exciting to many of us was that it gave us proper alignment control for the first time. it made it easy to center a box on the page. flex items can stretch to the height of the flex container, meaning that equal height columns were possible. these were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish...
...ox that was most exciting to many of us was that it gave us proper alignment control for the first time. it made it easy to center a box on the page. flex items can stretch to the height of the flex container, meaning that equal height columns were possible. these were things we have wanted to do for a very long time, and have come up with all kinds of hacks to accomplish, at least visually. the alignment properties from the flexbox specification have been added to a new specification called box alignment level 3. this means that they can be used in other specifications, including grid layout. in the future, they may well apply to other layout methods as well. in a later guide in this series, i’ll be taking a proper look at box alignment and how it works in grid layout. for now, here is a c...
...And 6 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
r-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-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-...
...olumn-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-font-smoothing -webkit-highlight -webkit-hyphenate-character -webkit-hyphenate-limit-after -webkit-hyphenate-limit-before -webkit-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webk...
...tandards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. ...
...And 6 more matches

<col> - HTML: Hypertext Markup Language
his element includes the global attributes. span this attribute contains a positive integer indicating the number of consecutive columns the <col> element spans. if not present, its default value is 1. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. ...
...tribute contains a positive integer indicating the number of consecutive columns the <col> element spans. if not present, its default value is 1. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. ...
...col> element spans. if not present, its default value is 1. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell if this attribute is not set, its value is inherited from the align of the <colgroup> element this <col> element belongs too. if there are none, the left value...
...And 6 more matches

<colgroup> - HTML: Hypertext Markup Language
yling rules associated with it or, even more, to the cells of the column's members of the group. the span attribute is not permitted if there are one or more <col> elements within the <colgroup>. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. ...
...f the column's members of the group. the span attribute is not permitted if there are one or more <col> elements within the <colgroup>. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. ...
...are one or more <col> elements within the <colgroup>. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute specifies how horizontal alignment of each column cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes. if this attribute is not set, th...
...And 6 more matches

<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
ement as of html5. html 4 the <tfoot> element cannot be placed after any <tbody> and <tr> element. note that this directly contradicts the above normative requirement from html5. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. ...
.... note that this directly contradicts the above normative requirement from html5. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
...5. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if ...
...And 6 more matches

<thead>: The Table Head element - HTML: Hypertext Markup Language
permitted parents a <table> element. the <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. ...
...n> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
...ot> and <tr> element. implicit aria role rowgroup permitted aria roles any dom interface htmltablesectionelement attributes this element includes the global attributes. deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the content to the right of the cell justify, inserting spaces into the textual content so that the content is justified in the cell char, aligning the textual content on a special character with a minimal offset, defined by the char and charoff attributes unimplemented (see bug 2212). if ...
...And 6 more matches

Index - Archive of obsolete content
nsions now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer 393 making a mozilla installation modifiable add-ons, extensions mozilla's user interface is made up of xul (described below), xbl (a topic for another tutorial), javascript, css, and image files. xul, xbl, javascript, and css file...
...s, xul reference no summary! 756 accessible xul attributes, xul reference no summary! 757 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 758 activetitlebarcolor xul attributes, xul reference no summary! 759 afterselected xul attributes, xul reference no summary! 760 align reference, référence(2), xul no summary! 761 allowevents xul attributes, xul reference no summary! 762 allownegativeassertions xul attributes, xul reference no summary! 763 alternatingbackground xul attributes, xul reference no summary! 764 alwaysopenpopup xul attributes, xul reference no summary! ...
...ce no summary! 782 buttonaccesskeydisclosure xul attributes, xul reference no summary! 783 buttonaccesskeyextra1 xul attributes, xul reference no summary! 784 buttonaccesskeyextra2 xul attributes, xul reference no summary! 785 buttonaccesskeyhelp xul attributes, xul reference no summary! 786 buttonalign xul attributes, xul reference no summary! 787 buttondir xul attributes, xul reference no summary! 788 buttondisabledaccept xul attributes, xul reference no summary! 789 buttonlabelaccept xul attributes, xul reference no summary! 790 buttonlabelcancel xul attributes, xul reference no summary! 791 ...
...And 5 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. 15 algorithm codingscripting, glossary an algorithm is a self-contained series of instructions to perform a function. ...
...ng, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. 15 algorithm codingscripting, glossary an algorithm is a self-contained series of instructions to perform a function. ...
...riority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest. 15 algorithm codingscripting, glossary an algorithm is a self-contained series of instructions to perform a function. ...
...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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

HTMLImageElement - Web APIs
the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

HTMLInputElement - Web APIs
the htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGCircleElement - Web APIs
the svgcircleelement interface is an interface for the <circle> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGEllipseElement - Web APIs
the svgellipseelement interface provides access to the properties of <ellipse> elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGLineElement - Web APIs
the svglineelement interface provides access to the properties of <line> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGPathElement - Web APIs
the svgpathelement interface corresponds to the <path> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGPolygonElement - Web APIs
the svgpolygonelement interface provides access to the properties of <polygon> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGPolylineElement - Web APIs
the svgpolylineelement interface provides access to the properties of <polyline> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

SVGRectElement - Web APIs
the svgrectelement interface provides access to the properties of <rect> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 5 more matches

Border-radius generator - CSS: Cascading Style Sheets
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 no-repeat; } .ui-...
...t; 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 no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "s...
...elect: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: 500px; border: 1px solid #ccc; border-radius: 3px; text-align: center; overflow: hidden; position: relative; } #preview .content { width: 100%; height: 100%; display: block; } #preview input { color: #333; border: 1px solid #ccc; border-radius: 3px; } #subject { width: 400px; height: 150px; margin: 0 auto; border: 3px solid #c60; background: #fff; position: relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display:...
...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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

HTMLVideoElement - Web APIs
ormats 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGAnimateElement - Web APIs
the svganimateelement interface corresponds to the <animate> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGAnimateMotionElement - Web APIs
the svganimatemotionelement interface corresponds to the <animatemotion> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGAnimateTransformElement - Web APIs
the svganimatetransformelement interface corresponds to the <animatetransform> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGDefsElement - Web APIs
the svgdefselement interface corresponds to the <defs> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGFEFuncAElement - Web APIs
the svgfefuncaelement interface corresponds to the <fefunca> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGFEFuncBElement - Web APIs
the svgfefuncbelement interface corresponds to the <fefuncb> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGFEFuncGElement - Web APIs
the svgfefuncgelement interface corresponds to the <fefuncg> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGFEFuncRElement - Web APIs
the svgfefuncrelement interface corresponds to the <fefuncr> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGForeignObjectElement - Web APIs
the svgforeignobjectelement interface provides access to the properties of <foreignobject> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGGElement - Web APIs
the svggelement interface corresponds to the <g> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGImageElement - Web APIs
the svgimageelement interface corresponds to the <image> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGLinearGradientElement - Web APIs
the svglineargradientelement interface corresponds to the <lineargradient> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGRadialGradientElement - Web APIs
the svgradialgradientelement interface corresponds to the <radialgradient> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGSVGElement - Web APIs
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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGSetElement - Web APIs
the svgsetelement interface corresponds to the <set> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGSwitchElement - Web APIs
the svgswitchelement interface corresponds to the <switch> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

SVGUseElement - Web APIs
svg use dom interface the svguseelement interface corresponds to the <use> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 4 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. ...
... the page to the bottom — in the block direction. the cross axis the cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. understanding which axis is which is important when we start to look at aligning and justifying flex items; flexbox features properties that align and justify content along one axis or the other. start and end lines another vital area of understanding is how flexbox makes no assumption about the writing mode of the document. in the past, css was heavily weighted towards horizontal and left-to-right writing modes. modern layout methods encompass the range of writing modes...
...uller understanding in the guide controlling ratios of flex items on the main axis. before we can make sense of these properties we need to consider the concept of available space. what we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. this concept of available space is also important when we come to look at aligning items. if we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. this leaves 200 pixels of available space. if we don’t change the initial values then flexbox will put that space after the last item. if we instead would like the items to grow and fill the space, then we need to have a method of distributing t...
...And 4 more matches

Linear-gradient Generator - CSS: Cascading Style Sheets
ght: 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: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .input input { width: 30px; height: 18px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .input[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .inp...
...0.5s; } .ui-color-picker .switch_mode:hover { background-color: #ccc; cursor: pointer; } /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; 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; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-righ...
...idth: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui slider */ .ui-slider { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, ...
...And 4 more matches

Index - Archive of obsolete content
ributes, xul reference no summary! 9 accessible xul attributes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul reference no summary! 12 afterselected xul attributes, xul reference no summary! 13 align reference, référence(2), xul no summary! 14 allowevents xul attributes, xul reference no summary! 15 allownegativeassertions xul attributes, xul reference no summary! 16 alternatingbackground xul attributes, xul reference no summary! 17 alwaysopenpopup xul attributes, xul reference no summary! 1...
...ference no summary! 35 buttonaccesskeydisclosure xul attributes, xul reference no summary! 36 buttonaccesskeyextra1 xul attributes, xul reference no summary! 37 buttonaccesskeyextra2 xul attributes, xul reference no summary! 38 buttonaccesskeyhelp xul attributes, xul reference no summary! 39 buttonalign xul attributes, xul reference no summary! 40 buttondir xul attributes, xul reference no summary! 41 buttondisabledaccept xul attributes, xul reference no summary! 42 buttonlabelaccept xul attributes, xul reference no summary! 43 buttonlabelcancel xul attributes, xul reference no summary! 44 bu...
...1 placeholder xul attributes, xul reference no summary! 282 popup xul attributes, xul reference no summary! 283 popup.left xul attributes, xul reference no summary! 284 popup.position xul attributes, xul reference no summary! 285 popup.top xul attributes, xul reference no summary! 286 popupalign no summary! 287 popupanchor no summary! 288 position xul attributes, xul reference no summary! 289 predicate xul attributes, xul reference no summary! 290 preference xul attributes, xul reference no summary! 291 preference-editable xul attributes, xul reference no summary! 2...
...And 3 more matches

Box Model Details - Archive of obsolete content
ill never be smaller than this size but they may grow larger. here the window should appear just over 200 pixels wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox. ...
...the hbox. the align attribute controls this behavior 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 ...
...e that can be displayed at various sizes without problems. the box model may be difficult to understand without trying various various things out for yourself. the following is an outline of both types of boxes: horizontal boxes lay out their elements next to each other horizontally. flexible elements are flexed horizontally. packing controls their horizontal placement of child elements. alignment controls how the row of elements are aligned vertically. vertical boxes lay out their elements vertically in a column. flexible elements are flexed vertically. packing controls the vertical placement of child elements. alignment controls how the column of child elements are aligned horizontally. you can put boxes anywhere in a xul file, including inside an html element such as a ta...
...And 3 more matches

Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. ...
...er row or row-reverse then the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. in the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows. ...
...is column or column-reverse then the cross axis runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. in the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows. ...
...And 3 more matches

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
ble box layout module, a layout model for displaying items in a single dimension — as a row or as a column. in the specification, flexbox is described as a layout model for user interface design. the key feature of flexbox is the fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. ...
...olumn. in the specification, flexbox is described as a layout model for user interface design. the key feature of flexbox is the fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. ...
...l for user interface design. the key feature of flexbox is the fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. ...
...And 3 more matches

Styling tables - Learn web development
we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spaci...
...we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spacing on the headings and cells, as we ...
...lly tweaking the font styling to make things easier to read: we have set a global sans-serif font stack; this is purely a stylistic choice. we've also set our custom font on the headings inside the <thead> and <tfoot> elements, for a nice grungy, punky look. we've set some letter-spacing on the headings and cells, as we feel it aids readability. again, mostly a stylistic choice. ...
...And 3 more matches

CDATASection - Web APIs
ll 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,anda...
...And 3 more matches

HTMLAnchorElement - Web APIs
s and methods (beyond those of the regular htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLBRElement - Web APIs
the htmlbrelement interface represents a html line break element (<br>). it inherits from htmlelement. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLBodyElement - Web APIs
the htmlbodyelement interface provides special properties (beyond those inherited from the regular htmlelement interface) for manipulating <body> elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLHtmlElement - Web APIs
erface 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLLinkElement - Web APIs
ernal 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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>. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLOptionElement - Web APIs
the htmloptionelement interface represents <option> elements and inherits all classes and methods of the htmlelement interface. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLPictureElement - Web APIs
the htmlpictureelement interface represents a <picture> html element. it doesn't implement specific properties or methods. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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>). ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLScriptElement - Web APIs
ascript 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLShadowElement - Web APIs
the htmlshadowelement interface represents a <shadow> html element, which is used in shadow dom. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLStyleElement - Web APIs
om 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLTemplateElement - Web APIs
the htmltemplateelement interface enables access to the contents of an html <template> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

HTMLTextAreaElement - Web APIs
the htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 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. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGClipPathElement - Web APIs
the svgclippathelement interface provides access to the properties of <clippath> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGComponentTransferFunctionElement - Web APIs
the svgcomponenttransferfunctionelement interface defines a base interface used by the component transfer function interfaces. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGCursorElement - Web APIs
the svgcursorelement interface provides access to the properties of <cursor> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGDescElement - Web APIs
the svgdescelement interface corresponds to the <desc> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEBlendElement - Web APIs
the svgfeblendelement interface corresponds to the <feblend> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEColorMatrixElement - Web APIs
the svgfecolormatrixelement interface corresponds to the <fecolormatrix> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEComponentTransferElement - Web APIs
the svgfecomponenttransferelement interface corresponds to the <fecomponenttransfer> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFECompositeElement - Web APIs
the svgfecompositeelement interface corresponds to the <fecomposite> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEConvolveMatrixElement - Web APIs
the svgfeconvolvematrixelement interface corresponds to the <feconvolvematrix> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEDiffuseLightingElement - Web APIs
the svgfediffuselightingelement interface corresponds to the <fediffuselighting> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEDisplacementMapElement - Web APIs
the svgfedisplacementmapelement interface corresponds to the <fedisplacementmap> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEDistantLightElement - Web APIs
the svgfedistantlightelement interface corresponds to the <fedistantlight> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEDropShadowElement - Web APIs
the svgfedropshadowelement interface corresponds to the <fedropshadow> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEFloodElement - Web APIs
the svgfefloodelement interface corresponds to the <feflood> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEGaussianBlurElement - Web APIs
the svgfegaussianblurelement interface corresponds to the <fegaussianblur> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEImageElement - Web APIs
the svgfeimageelement interface corresponds to the <feimage> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEMergeElement - Web APIs
the svgfemergeelement interface corresponds to the <femerge> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEMergeNodeElement - Web APIs
the svgfemergenodeelement interface corresponds to the <femergenode> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEMorphologyElement - Web APIs
the svgfemorphologyelement interface corresponds to the <femorphology> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEOffsetElement - Web APIs
the svgfeoffsetelement interface corresponds to the <feoffset> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFEPointLightElement - Web APIs
the svgfepointlightelement interface corresponds to the <fepointlight> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFESpecularLightingElement - Web APIs
the svgfespecularlightingelement interface corresponds to the <fespecularlighting> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFESpotLightElement - Web APIs
the svgfespotlightelement interface corresponds to the <fespotlight> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFETileElement - Web APIs
the svgfetileelement interface corresponds to the <fetile> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFETurbulenceElement - Web APIs
the svgfeturbulenceelement interface corresponds to the <feturbulence> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGFilterElement - Web APIs
the svgfilterelement interface provides access to the properties of <filter> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGGradientElement - Web APIs
the svggradient interface is a base interface used by svglineargradientelement and svgradialgradientelement. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGGraphicsElement - Web APIs
the svggraphicselement interface represents svg elements whose primary purpose is to directly render graphics into a group. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGMPathElement - Web APIs
the svgmpathelement interface corresponds to the <mpath> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGMaskElement - Web APIs
the svgmaskelement interface provides access to the properties of <mask> elements, as well as methods to manipulate them. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGMetadataElement - Web APIs
the svgmetadataelement interface corresponds to the <metadata> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGPatternElement - Web APIs
the svgpatternelement interface corresponds to the <pattern> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGScriptElement - Web APIs
the svgscriptelement interface corresponds to the svg <script> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGStopElement - Web APIs
the svgstopelement interface corresponds to the <stop> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGStyleElement - Web APIs
svg style interface the svgstyleelement interface corresponds to the svg <style> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGSymbolElement - Web APIs
the svgsymbolelement interface corresponds to the <symbol> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

SVGTitleElement - Web APIs
the svgtitleelement interface corresponds to the <title> element. ...
...yle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 3 more matches

CSS reference - CSS: Cascading Style Sheets
om (the rule management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...management system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...system) is object-based. at-rule syntax as the structure of at-rules varies widely, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...And 3 more matches

<td>: The Table Data Cell element - HTML: Hypertext Markup Language
attributes abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. note: do not use this attribute as it is obsolete in the latest standard. alternatively, you can put the abbreviated description inside the cell and place the long content in the title attribute. align this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char...
...ifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes unimplemented (see bug 2212). the default value when this attribute is not specified is left. note: to achieve the same effect as the left, center, right or justify values, apply the css text-align property to the element. to achieve the same effect as the char v...
...unimplemented in css3. ...
...And 3 more matches

<th> - HTML: Hypertext Markup Language
s to. rowgroup: the header belongs to a rowgroup and relates to all of its cells. these cells can be placed to the right or the left of the header, depending on the value of the dir attribute in the <table> element. colgroup: the header belongs to a colgroup and relates to all of its cells. auto the default value when this attribute is not specified is auto. deprecated attributes align obsolete since html5 this enumerated attribute specifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its e...
...ifies how the cell content's horizontal alignment will be handled. possible values are: left: the content is aligned to the left of the cell. center: the content is centered in the cell. right: the content is aligned to the right of the cell. justify (with text only): the content is stretched out inside the cell so that it covers its entire width. char (with text only): the content is aligned to a character inside the <th> element with minimal offset. this character is defined by the char and charoff attributes. the default value when this attribute is not specified is left. note: do not use this attribute as it is obsolete in the latest standard. to achieve the same effect as the left, center, right or justify values, apply the css text-align property to the element. t...
...unimplemented in css3. ...
...And 3 more matches

MathML element reference - MathML
he underlying mathematical meaning and is not supposed to be rendered by the mathml parser (see bug 276028). if you want to learn more about content markup you should consider chapter 4 in the mathml 3 specification. mathml elements implement the mathmlelement class. ...
... mathematical meaning and is not supposed to be rendered by the mathml parser (see bug 276028). if you want to learn more about content markup you should consider chapter 4 in the mathml 3 specification. mathml elements implement the mathmlelement class. ...
...g and is not supposed to be rendered by the mathml parser (see bug 276028). if you want to learn more about content markup you should consider chapter 4 in the mathml 3 specification. mathml elements implement the mathmlelement class. ...
...And 3 more matches

Images, Tables, and Mysterious Gaps - Archive of obsolete content
box. it isn't possible for an author to change the baseline's position directly, so wherever it ends up is where it will be. the space below the baseline is referred to as "descender space" since that's where the descenders in lowercase letters like "j", "y", and "q" are drawn. figure 4 shows what happens when we add an image to the mix. note where the image sits by default: its bottom edge is aligned with the baseline of the line box. this placement can be changed with vertical-align-- we'll talk about that in a bit-- but almost nobody ever changes the value from its default. let's take away the text, and leave only the image, as was done in figure 5. so we have an image sitting on the baseline of a line box that contains only the image. now consider what happens when we put that line in...
...le image in them, as in figure 8. of course, while we have a single-pixel spacer cell in figure 9, there is still unwanted space underneath the navigation buttons across the top. getting rid of this space could be as easy as putting each image in its own cell and making them all block-level, but let's leave them all together in a single cell so we can illustrate another approach. using vertical alignment the other main choice is leave the image inline and alter the vertical alignment of the image with respect to the line box. for example, you could try the following: td img {vertical-align: bottom;} this will cause the bottom edges of the images to be aligned with the bottom of the line box, instead of the baseline. as we can see in figure 10, this has the intended effect: the space undern...
... again, we could class images, cells, or rows in order to narrow down the focus of the effect. ...
...And 2 more matches

Element Positioning - Archive of obsolete content
<button label="happy"/> <button label="sad"/> </box> if you resize the window, the box will stretch to fit the window size. the buttons are not flexible, so they will not change their widths. the result is extra space that will appear on the right side of the window, inside the box. you may wish, however, for the extra space to appear on the left side instead, so that the buttons stay right aligned in the window. you could accomplish this by placing a spacer inside the box, but that gets messy when you have to do it numerous times. a better way is to use an additional attribute pack on the box. this attribute indicates how to pack the child elements inside the box. for horizontally oriented boxes, it controls the horizonal positioning of the children. for vertically oriented boxes, it co...
...o the box containing the elements to be packed, not to the elements themselves. we can change the earlier example to center the elements as follows: example 4: source view <box flex="1" pack="center"> <button label="happy"/> <button label="sad"/> </box> now, when the window is resized, the buttons center themselves horizontally. compare this behavior to that of the previous example. box alignment if you resize the window in the happy-sad example above horizontally, the box will grow in width. if you resize the window vertically however, you will note that the buttons grow in height. this is because the flexibility is assumed by default in the other direction. you can control this behavior with the align attribute. for horizontal boxes, it controls the position of the children vertic...
..., you will note that the buttons grow in height. this is because the flexibility is assumed by default in the other direction. you can control this behavior with the align attribute. for horizontal boxes, it controls the position of the children vertically. for vertical boxes, it controls the position of the children horizontally. the possible values are similar to those for pack. start this aligns elements along the top edge for horizontal boxes and along the left edge for vertical boxes. center this centers the child elements in the box. end this aligns elements along the bottom edge for horizontal boxes and along the right edge for vertical boxes. baseline this aligns the elements so that the text lines up. this is only useful for horizontal boxes. stretch this value, the defaul...
...And 2 more matches

Popup Menus - Archive of obsolete content
buttons each have a tooltip. the first uses the default tooltip style. the second uses a custom tooltip that has a different background color and styled text. the tooltip is associated with the more button using the tooltip attribute, which is set to the corresponding id of the tooltip element. note that the tooltip element is still placed inside a popupset element like other popup types. popup alignment by default, the popup and context windows will appear where the mouse pointer is. tooltips will be placed slightly below the element so that the mouse pointer does not obscure it. there are cases however, where you will want to indicate in more detail where the popup appears. for example, the popup menu that appears when you click the back button in a browser should appear underneath the bac...
...n, you can use an additional attribute, position, on the menupopup. you can also add it to the menupopup element. this attribute is used to indicate the placement of the popup relative to the element invoking the popup. it can be set to a number of values, which are described briefly below: after_start the popup appears below the element with the left edges of the element and the popup window aligned. if the popup window is larger than the element, is extends to the right. this is the value used for the drop-down menus associated with the browser's back and forward buttons. after_end the popup appears below the element with the right edges of the element and the popup window aligned. before_start the popup appears above the element with the left edges of the element and the popup window...
...d. if the popup window is larger than the element, is extends to the right. this is the value used for the drop-down menus associated with the browser's back and forward buttons. after_end the popup appears below the element with the right edges of the element and the popup window aligned. before_start the popup appears above the element with the left edges of the element and the popup window aligned. before_end the popup appears above the element with the right edges of the element and the popup window aligned. end_after the popup appears to the right of the element with the bottom edges of the element and the popup window aligned. end_before the popup appears to the right of the element with the top edges of the element and the popup window aligned. start_after the popup appears t...
...And 2 more matches

XUL element attributes - Archive of obsolete content
« xul reference home the following attributes are common to all xul elements: align type: one of the values below the align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it specifies how its children will be aligned horizontally. start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space i...
...lting in the children being placed in the center of the box. end child elements are placed on the right or bottom edge of the box. if the box is larger than the total size of the children, the extra space is placed on the left or top side. baseline 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 attr...
...lements 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 edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. ...
...And 2 more matches

tooltip - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
... position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or ...
...attribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately. moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to...
...And 2 more matches

HTML text fundamentals - Learn web development
eight: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
... code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">milk eggs bread hummus</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; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = texta...
...turn right go straight across the first two roundabouts turn left at the third roundabout the school is on your right, 300 meters up the road</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; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = texta...
...And 2 more matches

nsIHTMLEditor
editor/idl/nsihtmleditor.idlscriptable please add a summary to this article. ...
... editor/idl/nsihtmleditor.idlscriptable please add a summary to this article. ...
...event); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring atagname); void decreasefontsize(); void dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlightcolorstate(out boo...
...And 2 more matches

AudioBufferSourceNode - Web APIs
ust 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. ...
...yle="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" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,an...
...ints="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="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="cons...
...And 2 more matches

Comment - Web APIs
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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,anda...
...And 2 more matches

Element.msZoomTo() - Web APIs
: mszoomtooptions contentx[in]: the x-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, horizontally. contenty[in]: the y-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, vertically. ...
...s the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, horizontally. contenty[in]: the y-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, vertically. viewportx[in]: the alignment point of the viewport. the scroll/zoom operation attempts to align this point with the contentx point. center: default. aligns the horizontal center of the viewport to the element's contentx value. left: aligns the left-most point of the viewport to the element's contentx value. right: aligns the right-most point of the viewport to the element's contentx value. integer: aligns the specified x-coordinate of the viewport to the element's contentx value. ...
...e contentx point. center: default. aligns the horizontal center of the viewport to the element's contentx value. left: aligns the left-most point of the viewport to the element's contentx value. right: aligns the right-most point of the viewport to the element's contentx value. integer: aligns the specified x-coordinate of the viewport to the element's contentx value. viewporty[in]: the alignment point of the viewport. the scroll/zoom operation attempts to align this point with the contenty point. middle: default. aligns the vertical center of the viewport to the element's contenty value. top: aligns the top-most point of the viewport to the element's contenty value. ...
...And 2 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...And 2 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 2 more matches

Index - Web APIs
the canvasrenderingcontext2d method stroketext(), part of the canvas 2d api, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. 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. 607 canvasrenderingcontext2d.textalign api, canvas, canvasrenderingcontext2d, property, reference the canvasrenderingcontext2d.textalign property of the canvas 2d api specifies the current text alignment used when drawing text. 608 canvasrenderingcontext2d.textbaseline api, canvas, canvasrenderingcontext2d, property, reference the canvasrenderingcontext2d.textbaseline property of the canvas 2d api specif...
...8 domquad api, dom, dom reference, domquad, experimental, geometry a domquad is a collection of four dompoints defining the corners of an arbitrary quadrilateral. returning domquads lets getboxquads() return accurate information even when arbitrary 2d or 3d transforms are present. it has a handy bounds attribute returning a domrectreadonly for those cases where you just want an axis-aligned bounding rectangle. 749 domrect api, dom, dom reference, domrect, geometry, geometry interfaces, interface, rectangle, reference a domrect represents a rectangle. 750 domrect.domrect() api, constructor, dom reference, domrect, experimental, geometry, reference the domrect() constructor creates a new domrect object. 751 domrectreadonly api...
...oc the srcdoc property of the htmliframeelement specifies the content of the page. 1712 htmlimageelement api, element, graphic, html dom, htmlimageelement, image, interface, reference, img, picture the htmlimageelement interface represents an html <img> element, providing the properties and methods used to manipulate image elements. 1713 htmlimageelement.align api, align, html, html dom, htmlimageelement, image, obsolete, property, reference, alignment, float, img the obsolete align property of the htmlimageelement interface is a string which indicates how to position the image relative to its container. 1714 htmlimageelement.alt api, element, html, html dom, htmlimageelement, image, property, reference, text, alt, alternate, f...
...And 2 more matches

ProcessingInstruction - Web APIs
uctions 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,anda...
...And 2 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...And 2 more matches

Text - Web APIs
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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,anda...
...And 2 more matches

WheelEvent - Web APIs
lues 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. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,anda...
...And 2 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...And 2 more matches

<img>: The Image Embed element - HTML: Hypertext Markup Language
user preferences or bandwidth conditions. see our responsive images tutorial for an example. width the intrinsic width of the image in pixels. must be an integer without a unit. usemap the partial url (starting with #) of an image map associated with the element. note: you cannot use this attribute if the <img> element is inside an <a> or <button> element. ...
...ferences or bandwidth conditions. see our responsive images tutorial for an example. width the intrinsic width of the image in pixels. must be an integer without a unit. usemap the partial url (starting with #) of an image map associated with the element. note: you cannot use this attribute if the <img> element is inside an <a> or <button> element. ...
...xample. width the intrinsic width of the image in pixels. must be an integer without a unit. usemap the partial url (starting with #) of an image map associated with the element. note: you cannot use this attribute if the <img> element is inside an <a> or <button> element. deprecated attributes align aligns the image with its surrounding context. use the float and/or vertical-align css properties instead of this attribute. ...
...And 2 more matches

SVG Presentation Attributes - SVG: Scalable Vector Graphics
svg presentation attributes are css properties that can be used as attributes on svg elements. ...
... value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; animatable: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content elemen...
... value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; animatable: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. value: auto|baseline|super|sub|<percentage>|<l...
...And 2 more matches

text-anchor - SVG: Scalable Vector Graphics
the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
... the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
... the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
...And 2 more matches

The Box Model - Archive of obsolete content
types of operating systems, 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 ...
... 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 the examples shown in the rest of this section were generated using the xul box alignment example. we recommend you play around with it for a while to get an idea of how the basic parts of the box model work. in order to use this page, you'll need to install the remote xul manager extension and add developer.mozilla.org to the whitelist. boxes a xul box is very similar to an html div. it's an invisible rectangular container with no styling at all (divs may have some default styl...
...ner margin. sometimes you also need to define flexible spaces between elements. in this case you should use a spacer element with a flex value. a spacer element is completely invisible and doesn't do more than take space. you should only use it when you need flexible space. if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your xul document. alignment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having c...
...xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having center alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. it also wouldn't make sense to use flexibility or packing in the hbox if it didn't have any available horizontal space; the container elem...

CSS3 - Archive of obsolete content
le() functional notations may be postponed to the next iteration of this module. several types definition, like <ident> and <custom-ident>, have been deferred to css values and units module level 4. css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap. css cascading and inheritance level 3 candidate recommendation adds: the initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and styl...
...-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. the css text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text. the css text-align property with a <string> value to align on that character. this is useful to align number on the decimal point. the css word-spacing and letter-spacing properties with range constraints to control flexibility in justification. ...
... on the decimal point. the css word-spacing and letter-spacing properties with range constraints to control flexibility in justification. adds: control on how whitespaces are displayed using the css text-space-collapse and tab-size properties. control on line breaks and word boundaries using the css line-break, word-break, hyphens, text-wrap, overflow-wrap, and text-align-last properties. control on how justification is happening, in order to support more type of scripts, using the css text-justify property. control on edge effect using the css text-indent and hanging-punctuation properties. a few features present in early css text level 3 draft have being postponed to the next iteration of this module . css transforms level 1 ...
... note: this specification is a merge of css 2d-transforms, css 3d-transforms and svg transforms. css transitions working draft allows the definition of transitions effects between two properties values by adding the css transition, transition-delay, transition-duration, transition-property, and transition-timing-function properties. css box alignment module level 3 working draft selectors level 4 working draft css lists module level 3 working draft extends the list counter mechanism so that list markers can be styled and web developers can define new list counter schemes. motion path module level 1 working draft css fonts mod...

JXON - Archive of obsolete content
: [{ "@type": "hidden", "@name": "instid", "@value": 1234 }, { "@type": "hidden", "@name": "currency", "@value": "gbp" }, { "@type": "hidden", "@name": "amount", "@value": 0 }, { "@type": "hidden", "@name": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@class": "produc...
... }, { "input": { "@type": "radio", "@name": "nome", "@id": "rel_pullover", "@value": "pullover" }, "label": { "@for": "rel_pullover", "keyvalue": "pullover" }, "@class": "product" }] } }, { "th": { "@style": "text-align: right;", "keyvalue": "quantity:" }, "td": { "input": { "@type": "text", "@name": "myinput", "@onkeypress": "return numbersonly(this, event);", "@onpaste": "return false;" } } }] }, "p": { "input": { "@type": "submit", "@value": "purchase!" } }, "...
...d, okeyevent) { return okeyevent.charcode === 0 || /\d/.test(string.fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th style="text-align: right;">product:</th> <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><la...
...lue="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> <tr> <th style="text-align: right;">quantity:</th> <td> <input type="text" name="myinput" onkeypress="return numbersonly(this, event);" onpaste="return false;" /> </td> </tr> </table> <p> <input type="submit" value="purchase!" /> </p> </form> </div> other examples example #1: how to use jxon to create an html document instead of an xml document: /* the structure of my ...

listcell - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
... appears. for an editable menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute 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. ...
...etattributens(), setuserdata style classes listcell-iconic use this class to have an image appear on the listcell. specify the image using the image attribute. note that both an image and a label are added when this style is set. the label will take up extra space even when no label text is set. ...
... an image and a label are added when this style is set. the label will take up extra space even when no label text is set. if it is desired to center the image, use css to hide the label. ...

menupopup - Archive of obsolete content
ned. position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or ...
...tribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately. moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position t...
...ick, if the user clicked something to open the popup). openpopupatscreen( x, y, iscontextmenu ) return type: no return value open the popup at a specific screen position specified by x and y. this position may be adjusted if it would cause the popup to be off of the screen. the x and y coordinates are measured in css pixels. showpopup( element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup element. there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup wi...
...e popup appears, either at a specific screen position, or relative to some element in the window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. the anchor argument corresponds to the popupanchor attribute on the element. the align argument corresponds to the popupalign attribute on the element. the anchor and align arguments are ignored if either x or y are not -1. to have a popup appear relative to another element yet still offset by some numbe...

panel - Archive of obsolete content
label, left, level, noautofocus, noautohide, norestorefocus, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, titlebar, top, type properties accessibletype, label, popupboxobject, popup, state methods hidepopup, moveto, openpopup, openpopupatscreen, sizeto examples the following example shows how a panel may be attached to a label. ...
..., the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ignorekeys type: boolean if false, the default value, the escape key may be used to close the panel. if true, the escape key cannot be used to close the panel. label type: string for panels with titlebars, the label on the titlebar. ...
...ned. position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or ...
...tribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata hidepopup() return type: no return value closes the popup immediately. moveto( x, y ) return type: no return value moves the popup to a new location defined by screen coordinates (and not client coordinates). if both x and y have the value -1 the call will realign the popup with its anchor node. openpopup( anchor , position , x , y , iscontextmenu, attributesoverride, triggerevent ) return type: no return value opens the popup relative to a specified node at a specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position t...

Flex - MDN Web Docs Glossary: Definitions of Web-related terms
ainer, and the element's children to each become a flex item. the items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...
...element's children to each become a flex item. the items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...
...ldren to each become a flex item. the items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...
...rid layout. ...

HTML: A good basis for accessibility - Learn web development
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. ...
... complex and has many nested tables. ...
...h 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"> </form> </td> <td width=...
...all rights reversed.</p> </td> </tr> </tab...

HTML: A good basis for accessibility - Learn web development
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. ...
... complex and has many nested tables. ...
...h 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"> </form> </td> <td width=...
...all rights reversed.</p> </td> </tr> </tab...

Flexbox - Learn web development
vering it any further in this article. the minimum size value we discussed above. this can be specified individually using the flex-basis longhand value. we'd advise against using the longhand flex properties unless you really have to (for example, to override something previously set). they lead to a lot of extra code being written, and they can be somewhat confusing. horizontal and vertical alignment you can also use flexbox features to align flex items along the main or cross axis. let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar. at the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner. first, take a local copy of this example. now,...
...ss axis. let's explore this by looking at a new example — flex-align0.html (see it live also) — which we are going to turn into a neat, flexible button/toolbar. at the moment you'll see a horizontal menu bar, with some buttons jammed into the top left hand corner. first, take a local copy of this example. now, add the following to the bottom of the example's css: div { display: flex; align-items: center; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. we've done this via two new properties. align-items controls where the flex items sit on the cross axis. by default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. if the parent ...
...x items will become as long as the longest flex items. this is how our first example got equal height columns by default. the center value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. this is why our current example's buttons are centered vertically. you can also have values like flex-start and flex-end, which will align all items at the start and end of the cross axis respectively. see align-items for the full details. you can override the align-items behavior for individual flex items by applying the align-self property to them. for example, try adding the following to your css: button:first-child { align-self: flex-end; } have a look at what effect this has, and remove it again when you've finished. j...
...s time we are laying them out like a column. article { flex: 1 200px; } article:nth-of-type(3) { flex: 3 200px; display: flex; flex-flow: column; } next, we select the first <div>. we first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <button> elements) to also be laid out like flex items. here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier. article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; } finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. this has a very interesting effect, wh...

create fancy boxes - Learn web development
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 are clipped by border radius */ border : 0.5em solid black; /* let's make sure we ha...
...n more amazing styles. most of the time, that leads to polluting the dom by adding extra html element for the unique purpose of style. even if it is necessary, it's somewhat considered bad practice. one solution to avoid such pitfalls is to use css pseudo-elements. a cloud <div class="fancy">hi! i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding : 80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. f...
...at some point, to accomplish such box embellishment is a matter of creativity, both in design and technical use of css properties. by doing such it's possible to create optical illusions that can bring your boxes alive like in this example: <div class="fancy">hi! i want to be fanc...
... class="fancy">hi! i want to be fancy.</div> let's create some partial drop shadow effect. the box-shadow property allow us to create inner light and a flat drop shadow effect, but with some little extra work it becomes possible to create a more natural geometry by using pseudo-element and the transform property. ...

AnalyserNode - Web APIs
1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following 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" f...
...tyle="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/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,an...
...ints="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="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,mona...
... properties inherits properties from its parent, audionode. analysernode.fftsize is an unsigned long value representing the size of the fft (fast fourier transform) to be used to determine the...

Attr - Web APIs
esents one of a dom element's attributes as an object. in most dom methods, you will directly retrieve the attribute as a string (e.g., element.getattribute()), but certain functions (e.g., element.getattributenode()) or means of iterating return attr types. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mo...
...you should revise your code accordingly. see deprecated properties and methods for a complete list. properties name r...

CharacterData - Web APIs
ract interface represents a node object that contains characters. this is an abstract interface, meaning there aren't any object of type characterdata: it is implemented by other interfaces, like text, comment, or processinginstruction which aren't abstract. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,a...
... characterdata.data is a domstring representing the textual data contained in this object. characterdata.length read only returns an unsigned long r...

CompositionEvent - Web APIs
the dom compositionevent represents events that occur due to the user indirectly entering text. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,mo...
... properties this interface also inherits properties of its parent, uievent, and its ancestor — event. compositionevent.data read only returns the characters generated by the input met...

Document - Web APIs
t 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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale ...
...depending on the document's type (e.g. html, xml, svg, …), a larger api is available: html documents, served with the "text/html" content type, also implement the htmldocument interface, w...

DocumentFragment - Web APIs
standard document. the key difference is due to the fact that the document fragment isn't part of the active document tree structure. changes made to the fragment don't affect the document (even on reflow) or incur any performance impact when changes are made. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monac...
... properties this interface has no specific properties, but inherits those of its parent, node, and implements those of the parentnode interface. parentnode.children read only return...

DocumentType - Web APIs
the documenttype interface represents a node containing a doctype. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,an...
... documenttype.entities read only a namednodemap of entities declared in the dtd. every node in this map implements the entity interface. documenttype.internalsubset read only ...

Element - Web APIs
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. ...
...tyle="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="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andal...
... 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/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale...
...it implements the properties of parentnode, childnode, nondocumenttypechildnode, and animatable. element.attributes read only returns a namednodemap object con...

FocusEvent - Web APIs
the focusevent interface represents focus-related events, including focus, blur, focusin, and focusout. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,a...
... properties this interface also inherits properties from its parent uievent, and indirectly from event. focusevent.relatedtarget is an eventtarget representing a secondary target for this even...

IDBOpenDBRequest - Web APIs
interface of the indexeddb api provides access to the results of requests to open or delete databases (performed using idbfactory.open and idbfactory.deletedatabase), using specific event handler attributes. note: this feature is available in web workers. ...
...tyle="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/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,...
...ts="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/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas...
... methods no methods, but inherits methods from its parents idbrequest and eventtarget. events listen to these events using addeventlistener() or by assigning an event listener to the oneventnam...

InputEvent - Web APIs
the inputevent interface represents an event notifying of editable content change. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,a...
... properties this interface inherits properties from its parents, uievent and event. inputevent.dataread only returns a domstring with the inserted characters. this may be an empty string if the change doesn't insert...

InstallEvent - Web APIs
on that is dispatched on the serviceworkerglobalscope of a serviceworker. as a child of extendableevent, it ensures that functional events such as fetchevent are not dispatched during installation. this interface inherits from the extendableevent interface. ...
...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="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale...
...ts="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="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consola...
... properties inherits properties from its ancestor, event. installevent.activeworker read only returns the serviceworker that is currently controlling the page. methods inherits methods from ...

KeyboardEvent - Web APIs
o 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. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monac...
... constants the keyboardevent interface defines the following constants. keyboard locations the following constants identify which part of the keyboard the key event originates from. they are accessed as key...

MouseEvent - Web APIs
t. though the mouseevent.initmouseevent() method is kept for backward compatibility, creating of a mouseevent object should be done using the mouseevent() constructor. several more specific events are based on mouseevent, including wheelevent and dragevent. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,a...
... properties this interface also inherits properties of its parents, uievent and event. mouseevent.altkey read only returns true if the alt key was down when the mouse event was fired. mouseevent.button read only t...

OfflineAudioContext - Web APIs
o-processing graph built from linked together audionodes. in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the result to an audiobuffer. ...
...tyle="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/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monac...
...="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/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="con...
... properties also inherits properties from its parent interface, baseaudiocontext. offlineaudiocontext.length read only an integer representing the size of the buff...

ServiceWorkerGlobalScope - Web APIs
onous requests, like those initiated via the fetch() method, can be used. this interface inherits from the workerglobalscope interface, and its parent eventtarget, and therefore implements properties from windowtimers, windowbase64, and windoweventhandlers. ...
...tyle="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" 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/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,...
...,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/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-f...
... serviceworkerglobalscope.registration read only contains the serviceworkerregistration object that represents the service worker's registrati...

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. ...
...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="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale...
...ts="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="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,mo...
... properties inherits properties from its ancestor, event. syncevent.tag read only returns the developer-defined identifier for this syncevent. syncevent.lastchance read only returns true if the user age...

TouchEvent - Web APIs
ovement, addition and removal of contact points, and so forth. touches are represented by the touch object; each touch is described by a position, size and shape, amount of pressure, and target element. lists of touches are represented by touchlist objects. ...
...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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...ne 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" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,a...
... properties this interface inherits properties from its parent, uievent and event. touchevent.altkey read only a boolean value indicating whether or not the alt key was down when the touch event was fired. toucheven...

Controlling multiple parameters with ConstantSourceNode - Web APIs
</div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertic...
... setting up let's start by looking at the global variable initialization. let context = null; let ...
... setting up let's start by looking at the global variable initialization. let context = null; let playbutton = null; let volumecontrol = null;...
...ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time. setting up let's start by looking at the global variable initialization. let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode3 = null; let constantnode = null; let gainnode1 = nul...

XMLHttpRequest - Web APIs
are used to interact with servers. you can retrieve data from a url without having to do a full page refresh. this enables a web page to update just part of a page without disrupting what the user is doing. xmlhttprequest is used heavily in ajax programming. ...
...yle="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" 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/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="c...
...,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/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-fam...
... if your communication needs to involve receiving event data or message data from a server, consider using server-sent events through the eventsource interface. for full-duplex communicati...

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
f you prefer and avoid using named lines at all. rather than setting the end line number, i have chosen to say how many tracks this element should span, using the span keyword. i like this approach as when working with a multiple-column layout system we usually think of blocks in terms of the number of tracks of the grid they span, and adjust that for different breakpoints. to see how the blocks align themselves to the tracks, use the firefox grid inspector. it clearly demonstrates how our items are placed. there are some key differences with how a grid layout works over the grid systems you may have used previously. as you can see, we do not need to add any markup to create a row, grid systems need to do this to stop elements popping up into the row above. with css grid layout, we can plac...
...i want them never to become smaller than 200 pixels, and then to share any available remaining space equally – so we always get equal width column tracks. we achieve this with the minmax() function in our repeat notation for track sizing. .listing { list-style: no...
...s using a little touch of flexbox. i set the list item to display: flex and the flex-direction to column. i can then use an auto margin on the .cta to push this bar down to the bottom of the box. .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: center; } .listing .body { padding: 10px; } this is really one of the key reasons i would use flexbox rather than grid, if i am just aligning or distributing something in a single dimension, that’s a flexbox use case. this is all looking fairly complete now, however we sometimes have these cards which contain far more content than the others. it might be nice to cause those to span tw...
...ing item goes here.</p></div> <div class="cta"><a href="">call to action!</a></div> </li> </ul> * {box-sizing: border-box;} img {max-width: 100%; display: block;} body { font: 1.2em helvetica, arial, sans-serif; } a:link, a:visited { text-decoration: none; color: #f08c00; } h2 { background-color: #f08c00; color: #fff; text-align: center; margin: 0; padding: 20px; } .listing li { border: 1px solid #ffe066; border-radius: 5px; display: flex; flex-direction: column; } .listing .cta { margin-top: auto; border-top: 1px solid #ffe066; padding: 10px; text-align: center; } .listing .body { padding: 10px; } .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; gri...

Logical properties for floating and positioning - CSS: Cascading Style Sheets
. logical property or value physical property or value float: inline-start float: left float: inline-end float: right clear: inline-start clear: left clear: inline-end clear: right inset-inline-start left inset-inline-end right inset-block-start top inset-block-end bottom text-align: start text-align: left text-align: end text-align: right in addition to these mapped properties there are some additional shorthand properties made possible by being able to address block and inline dimensions. these have no mapping to physical properties, aside from the inset property. logical property purpose inset-inline sets both of the abov...
...sical mapping. inset-inline — sets both logical inline insets. inset-block — sets both logical block insets. note: the browsers that have implemented the logical properties specification have so far implemented the direct mappings and not the new shorthands. look to the browser compatibility data section on each property page reference for more details. ...
...inset-inline — sets both logical inline insets. inset-block — sets both logical block insets. note: the browsers that have implemented the logical properties specification have so far implemented the direct mappings and not the new shorthands. look to the browser compatibility data section on each property page reference for more details. example: logical values for text-align the text-align property has logical values that relate to text direction — rather than using left and right we can use start and end. in the below example i have set text-align: right in the first block and text-align: end in the second. if you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second. ...
...ection — rather than using left and right we can use start and end. in the below example i have set text-align: right in the first block and text-align: end in the second. if you change the value of direction to rtl you will see that the alignment stays to the right for the first block, but goes to the logical end on the left in the second. this works in a more consistent way when using box alignment that uses start and end rather than physical directions for alignment. ...

Using CSS transforms - CSS: Cascading Style Sheets
dth: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-...
...by default the perspective is centered on the viewer, which is not always adequate. changing the perspective origin this example shows cubes with popular perspective-origin values. html <section> <figure> <caption><code>perspective-origin: top left;</code></caption> <...
...*/ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90d...
... ...

panel - Archive of obsolete content
object. if this is supplied the panel will be shown attached to the widget. an object which specifies where in the window the panel should be shown. the rest of this section describes this object. the position object has one or more of the following properties: top, right, bottom and left. their values are expressed in pixels. any other properties will be ignored. ...
...scribes this object. the position object has one or more of the following properties: top, right, bottom and left. their values are expressed in pixels. any other properties will be ignored. ...
...ls. any other properties will be ignored. ...

Documentation for BiDi Mozilla - Archive of obsolete content
n nsframetraversal.cpp) provides visual frame navigation capability. details of rendering are dependent on user preferences and system capabilities. where the system is capable of tasks such as reversing and shaping text, symmetric swapping, numeric translation, etc., no special text rendering is needed, though there may be a call to a native api to set the base text direction (for example settextalign on windows). for systems without bidi capabilities, the methods in nsiubidiutils are used. note that we are not affected by buggy bidi implementations on specific platforms, since the platform never sees a text fragment with mixed directionality, and is not expected to do anything more complicated than displaying left-to-right text from left to right or right-to-left text from right to left. in ...
... a bidi point of view) as it is displayed by mozilla. text pasted from the clipboard is treated exactly as if it came from a logical source. form controls: based on bidi options in preferences, the text mode of form controls may be "logical", "visual" or "like containing document". we have also tested behaviour of all controls with dir=rtl and added support where necessary. some support added for alignment in tables and lists, and fixes for problems with different combinations of dir and align. improvements to lists with hebrew and arabic list-style-type summary of new classes class name xpcom interface (if applicable) implementation comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unic...
... nsibidikeyboard widget/public/nsibidikeyboard.idl widget/src/%platform%/nsbidikeyboard.cpp sets and queries the directionality of the current keyboard language. ...

Monitoring downloads - Archive of obsolete content
ing(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr); // source row.appendchild(cell); cell = document.createelement('listcell'); cell.setattribute("label", (statement.getint64(1) / 1024).tofixed(1) + "kb"); // size cell.setattribute("style", "text-align:right"); row.appendchild(cell); var thedate = new date(statement.getint64(2) / 1000); // start time cell = document.createelement('listcell'); var datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); thedate = new date(statement.getint64(3)); // end time cell = document.createele...
...); // end time cell = document.createelement('listcell'); datestr = thedate.tolocalestring(); cell.setattribute("label", datestr); row.appendchild(cell); var speed = statement.getdouble(4) / 1024.0; cell = document.createelement('listcell'); cell.setattribute("label", speed.tofixed(1) + "kb/sec"); cell.setattribute("style", "text-align:right"); row.appendchild(cell); var status = statement.getint32(5); var style = "color:black"; cell = document.createelement('listcell'); var statusstr; switch(status) { case 0: statusstr = "downloading"; break; case 1: statusstr = "complete"; style = "color:green"; break; ...
...thods take as a parameter the zero-based index number of the column whose value you wish to retrieve. note that the start time is being divided by 1000 before we create a javascript date object from it. that's to adjust the value from the granularity stored in the database to that expected by javascript. to right-justify the numeric columns, we set the appropriate cells' style attribute to text-align:right. exercises for the reader there are some obvious things that could be done to improve this extension. if you're learning to use the download manager or storage apis, they're things you might look into doing for practice: add code to update the download log window on the fly, instead of generating a static list when it's first opened. add additional statistics. what's the average d...

popupanchor - Archive of obsolete content
if omitted, no anchoring occurs. instead the popup content comes up directly underneath the mouse event coordinates. this point (either directly under the mouse or attached to one of the fo...
...th the mouse event coordinates. ...
...e four corners) is called the originating point.by default the popup content appears with its top left point located directly underneath the point at which the user's mouse goes down (on tooltips the content is displaced by the height of the mouse cursor). popupanchor works in conjunction with popupalign to position the popup content on the element. the default value for both popupanchor and popupalign is "none." ...

bbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
... « xul reference home [ examples | attributes | properties | methods | related ] a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

window - Archive of obsolete content
py & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!! ...
...ate changes. title type: string the text to appear in the title bar of the window. 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. windowtype type: string set to a string which can be used to identify the type of window. this might be used, for example, to distinguish between a browser window and an editor window. some of mozilla's window handling functions use this attribute to group windows of the same type together. values for window type as ...
...ndling functions use this attribute to group windows of the same type together. ...

Summary of Changes - Archive of obsolete content
this section outlines all of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...
...tlines all of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...
...ete discussion of these items, see the sections in which they are described. ...

CSS - Archive of obsolete content
the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element...
...the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-sc...
...the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css pro...

Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms
. a value of flex causes the element to become a block level flex container, and inline-flex an inline level flex container. ...
...lex causes the element to become a block level flex container, and inline-flex an inline level flex container. ...
... the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items. ...

Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
in css the block or column axis is the axis used when laying out blocks of text. ...
... in css the block or column axis is the axis used when laying out blocks of text. ...
...out one below the other, on the block axis. ...

MDN Web Docs Glossary: Definitions of Web-related terms
technologies contain long lists of jargon and abbreviations that are used in documentation and coding. this glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web. ...
...ts of jargon and abbreviations that are used in documentation and coding. this glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the web. ...
...ling) dynamic programming language dynamic typing e ecma ecmascript effective connection type element empty element encapsulation encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint first-class function flex flex container flex item fl...

Example 1 - Learn web development
00px */ 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 : 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 { ...
...00px */ 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 : 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 { ...
...x */ 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 : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20px */ top : 0; right : 0; padding-top : .1em; 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...

Your first form - Learn web development
inside your html head. ...
...style> inside the style tags, add the following css: form { /* center the form on the page */ margin: 0 auto; width: 400px; /* form outline */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-...
.../* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: .5em; } save an...

Advanced text formatting - Learn web development
world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...ove 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="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'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.inner...
...rts a tab character).</p> <textarea id="code" class="input" style="min-height: 50px; width: 95%"> <p>nasa sure does some exciting work.</p> </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'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.inner...

Getting started with HTML - Learn web development
ter).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> &lt;p&gt;a link to my favorite website.&lt;/p&gt; </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; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = texta...
...er).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> &lt;p&gt;this is my page&lt;/p&gt; </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; } h1 { color: blue; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } img { max-width: 100%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() ...

Manipulating documents - Learn web development
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. ...
...kground-color). make sure you don't get these mixed up, otherwise it won't work. there is another common way to dynamically manipulate styles on your document, which we'll look at now. delete the previous five lines you added to the javascript. add the following inside your html <head>: <style> .highlight { color: white; background-color: black; padding: 10px; width: 250px; text-align: center; } </style> now we'll turn to a very useful method for general html manipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to. in this case we will set a class name of highlight on our paragraph: para.setattribute('class', 'highlight'); refresh your page, and you'll see no change — the ...

Useful string methods - Learn web development
f (greetings[i]) { let listitem = 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(...
...here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; 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(...
...here let result = input; let listitem = document.createelement('li'); listitem.textcontent = result; 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...

Debugging Frame Reflow
ewport once the problem is reduced to a single frame level, placing a breakpoint at displayreflowenterprint in nsframe.cpp is a very efficient way to step through the reflow tree. other reflow debug options gecko_display_reflow_flag_pixel_errors setting this option via set gecko_display_reflow_flag_pixel_errors = 1 enables a verification for each coordinate value that the coordinates are aligned at pixel boundaries. row 0268a594 r=0 a=uc,uc c=uc,20 cnt=870 value 20 is not a whole pixel cell 0268a6c0 r=0 a=uc,uc c=uc,15 cnt=871 block 0268a764 r=0 a=uc,uc c=uc,uc cnt=872 block 0268a764 d=0,0 me=0 cell 0268a6c0 d=0,0 me=0 row 0268a594 d=uc,20 value 20 is not a whole pixel rowg 0268a02c d...
...gecko_display_reflow_indent_undisplayed_frames setting this option via set gecko_display_reflow_indent_undisplayed_frames = 1 will cause an advance of the indent e...
... block 0268a764 d=0,0 me=0 cell 0268a6c0 d=0,0 me=0 row 0268a594 d=uc,20 value 20 is not a whole pixel rowg 0268a02c d=uc,695 value 695 is not a whole pixel while unaligned values at the entrance of a frame reflow can be ignored, when they appear at the exit of a routine this can cause display errors like stray lines. os2 is very vulnerable to pixel alignment errors as text is drawn on pixel boundaries. gecko_display_reflow_indent_undisplayed_frames setting this option via set gecko_display_reflow_indent_undisplayed_frames = 1 will cause an advance of the indent even for frames which are blocked via the reflow rules file. original document information author(s): bernd mielke last updated date: december 4, 2004 copyright informati...

The Firefox codebase: CSS Guidelines
codebase should be written, it is notably relevant for firefox front-end engineers. basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment). the overriding css section contains more information about this. avoid magic numbers; prefer automatic sizing or alignment methods. some examples to avoid: absolutely positioned elements hardcoded values such as: vertical-align: -2px; . the reason you should avoid such "hardcoded" values is that, they don't necessarily work for all font-size configurations. avoid setting styles in javascript. it's generally better to set a class and then specify the styles in css. classlist is generally better tha...
... margin: 0px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: red; not this: border: red; put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common. but camelcase is also used sometimes. try to follow the style of existing or related code. other tips assume ="true" in attribute selectors. example: use option[checked], not option[checked="true"]. avoid id selec...
... is useful to know that certain css properties are going to lean one way or the other: color - 99% of the time it will be theme css, overflow - 99% content. 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css. if it is esthetics related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both ...

source-editor.jsm
tring amode); void settext(string atext, [optional] number astart, [optional] number aend); selection operations void dropselection(); number getcaretoffset(); object getcaretposition(); object getselection(); void setcaretoffset(number aoffset); void setcaretposition(number aline, [optional] number acolumn, [optional] number aalign); void setselection(number astart, number aend); breakpoint management void addbreakpoint(number alineindex, [optional] string acondition); array getbreakpoints(); boolean removebreakpoint(number alineindex); properties attribute type description dirty boolean set this value to false whenever you save the text; t...
...aretoffset() sets the current caret position (insertion point) for newly-entered text. void setcaretoffset( number aoffset ); parameters aoffset the 0-based offset into the text at which to place the caret. setcaretposition() sets the current caret position given a line number and column number. void setcaretposition( number aline, [optional] number acolumn, [optional] number aalign ); parameters aline the 0-based line number on which to place the caret. acolumn optional the 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by aline. aalign optional how to position the line with respect to the viewport when scrolling the line into view. this may be one of sourceeditor.v...
...rameters aline the 0-based line number on which to place the caret. acolumn optional the 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by aline. aalign optional how to position the line with respect to the viewport when scrolling the line into view. this may be one of sourceeditor.vertical_align.top, sourceeditor.vertical_align.center, and sourceeditor.vertical_align_bottom. see alignment constants for details. the default is sourceeditor.vertical_align.top. setmode() sets the current syntax highlighting mode for the text being edited. void setmode( string amode ); parameters amode a string indicating the file type being edited. see editor mode constants for possible values. ...

Mozilla MathML Status
lank or not listed at all. if only the main features of an element are implemented then its section is marked as supported but details of unsupported attributes are specified below. the top-level math element see § 2.2. attribute notes display implemented. maxwidth, overflow not implemented. see bug 534962. altimg, altimg-width, altimg-height, altimg-valign, alttext accepted, but do not have any effect on the rendering. mathml is always enabled since bug 660762. cdgroup accepted, but does not have any effect on the rendering. attributes shared by all mathml elements see § 2.1.6 and § 3.1.10. attribute notes id, class, style implemented. xref accepted, but does not have any effect on the rend...
... and limit schemata element [- attribute] notes msub implemented. msup implemented. msubsup implemented. munder implemented. mover implemented. munderover implemented. mmultiscripts implemented. tabular math element [- attribute] notes mtable implemented. mtable - alignmentscope not implemented. see bug 122253. mtable - columnspacing, rowspacing, framespacing implemented. see bug 330964. mtable - columnwidth not implemented. see bug 958953. mtable - equalrows, equalcolumns not implemented. see bug 958954. mtable - side, minlabelspacing not implemented. see bug 356870. mtr implemented. mlabel...
...g, framespacing implemented. see bug 330964. mtable - columnwidth not implemented. see bug 958953. mtable - equalrows, equalcolumns not implemented. see bug 958954. mtable - side, minlabelspacing not implemented. see bug 356870. mtr implemented. mlabeledtr not implemented. see bug 689641. mtd implemented. * - groupalign. not implemented. see bug 122253. maligngroup not implemented. see bug 122253. malignmark not implemented. see bug 122253. elementary math element [- attribute] notes mstack not implemented. see bug 534967. mlongdiv not implemented. see bug 534967. msgroup not implemented. see bug 534967. msrow not implem...

nsISelection2
in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection region constants defined in nsiselectioncontroller). aissynchronous when true, scrolls the selection into view before returning. if false, posts a request which is processed at some point after the method returns. avpercent how to align the frame vertically. a value of 0 means the frame's upper edge is aligned with the top edge of the visible area. a value of 100 means the frame's bottom edge is aligned with the bottom edge of the visible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 centers the frame vertically. a value of -1 means move ...
...for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. ...
...ible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 centers the frame vertically. a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. a value of 50 centers the frame horizontally . a value of -1 means move the frame the minimum amount necessary in order for the entire fram...

nsISelectionPrivate
in boolean aissynchronous, in short avpercent, in short ahpercent ); parameters aregion the region inside the selection to scroll into view (see selection region constants defined in nsiselectioncontroller). aissynchronous when true, scrolls the selection into view before returning. if false, posts a request which is processed at some point after the method returns. avpercent how to align the frame vertically. a value of 0 means the frame's upper edge is aligned with the top edge of the visible area. a value of 100 means the frame's bottom edge is aligned with the bottom edge of the visible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 centers the frame vertically. a value of -1 means move ...
...for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. ...
...ible area. for values in between, the point "avpercent" down the frame is placed at the point "avpercent" down the visible area. a value of 50 centers the frame vertically. a value of -1 means move the frame the minimum amount necessary in order for the entire frame to be visible vertically (if possible). ahpercent how to align the frame horizontally. a value of 0 means the frame's left edge is aligned with the left edge of the visible area. a value of 100 means the frame's right edge is aligned with the right edge of the visible area. for values in between, the point "ahpercent" across the frame is placed at the point "ahpercent" across the visible area. a value of 50 centers the frame horizontally . a value of -1 means move the frame the minimum amount necessary in order for the entire fram...

AnimationEvent - Web APIs
the animationevent interface represents events providing information related to animations. ...
...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/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,anda...
... properties also inherits properties from its parent event. animationevent.animationname read only is a domstring containing the value of the animation-name that generated the an...

AudioContext - Web APIs
nything else, as everything happens inside a context. it's recommended to create one audiocontext and reuse it instead of initializing a new one each time, and it's ok to use a single audiocontext for several different audio source and pipeline concurrently. ...
...tyle="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/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,mo...
... properties also inherits properties from its parent interface, baseaudiocontext. audiocontext.baselatency read only returns the number of seconds of processing latency incurred by the audioco...

AudioNode - Web APIs
ule. examples include: an audio source (e.g. an html <audio> or <video> element, an oscillatornode, etc.), the audio destination, intermediate processing module (e.g. ...
...tyle="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/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco...
... description the audio routing graph each audionode has inputs and outputs, and multiple audio nodes are connected to build a processing graph. this graph is contained in an audiocont...

BaseAudioContext - Web APIs
ocontext and offlineaudiocontext respectively. you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. a baseaudiocontext can be a target of events, therefore it implements the eventtarget interface. ...
...tyle="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/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consola...
...5 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/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio da...

BeforeInstallPromptEvent - Web APIs
the beforeinstallpromptevent is fired at the window.onbeforeinstallprompt handler before a user is prompted to "install" a web site to a home screen on mobile. this interface inherits from the event interface. ...
...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/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,m...
... properties inherits properties from its parent, event. beforeinstallpromptevent.platforms read only returns an array of domstring items containing the platforms on which the ev...

BeforeUnloadEvent - Web APIs
n to leave the page (see example below). when no value is provided, the event is processed silently. some implementations only show the dialog box if the frame or any embedded frame receives a user gesture or user interaction. see browser compatibility for more information. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" 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/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,a...
...6,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/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("b...

BluetoothDevice - Web APIs
the bluetoothdevice interface of the web bluetooth api represents a bluetooth device inside a particular script execution environment. ...
...tyle="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/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas...
...name; readonly attribute bluetoothremotegattserver? gatt; readonly attribute frozenarray uuids; promise watchadvertisements(); void unwatchadvertisements(); re...

BroadcastChannel - Web APIs
tion between different documents (in different windows, tabs, frames or iframes) of the same origin. messages are broadcasted via a message event fired at all broadcastchannel objects listening to the channel. note: this feature is available in web workers. ...
...tyle="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/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consola...
... properties this interface also inherits properties from its parent, eventtarget. broadcastchannel.name read only returns a domstring, the name of the channel. event handlers broa...

CSSCounterStyleRule - Web APIs
the csscounterstylerule interface represents an @counter-style at-rule. ...
...g style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" 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">cssrule</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/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,mona...
... csscounterstylerule.name is a domstring object that contains the serialization of the <counter-style-name> defined for the associated rule. csscounterstylerule.system is a domstring object ...

CSSPrimitiveValue - Web APIs
ative to the parent value (or another property value). there is one exception for color percentage values: since a color percentage value is relative to the range 0-255, a color percentage value can be converted to a number (see also the rgbcolor interface). ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monac...
... cssprimitivevalue.primitivetype read only an unsigned short representing the type of the value. possible values are: constant description css_attr the value is an attr() functio...

CSSValueList - Web APIs
some properties allow an empty list in their syntax. in that case, these properties take the none identifier. so, an empty list means that the property has the value none. the items in the cssvaluelist are accessible via an integral index, starting from 0. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,and...
... cssvaluelist.lengthread only an unsigned long representing the number of cssvalues in the list. methods cssvaluelist.item() this method is used to retrieve a cssvalue by ordinal index. the order in this collec...

DOMRect - Web APIs
od 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. ...
...="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" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,mo...
... properties domrect inherits properties from its parent, domrectreadonly. the difference is that they are not read-only anymore. domrectreadonly.x the x coordinate of the domrect's origin. domrectreadonly.y the y coor...

EffectTiming.fill - Web APIs
<div> serves as a button that will trigger the animation to begin. ...
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; ma...
...ght:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0px; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 160px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 2em "lucida grande", "open sans", sans-serif; } while there's other css involved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating. that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; positi...

Element.scrollIntoView() - Web APIs
the element interface's scrollintoview() method scrolls the element's parent container such that the element on which scrollintoview() is called is visible to the user syntax element.scrollintoview(); element.scrollintoview(aligntotop); // boolean parameter element.scrollintoview(scrollintoviewoptions); // object parameter parameters aligntotop optional is a boolean value: if true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. corresponds to scrollintoviewoptions: {block: "start", inline: "nearest"}. this is the default value. if false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. corresponds to scrollintoviewoptions: {block: "end", inline: "nearest"}. scrollintovie...
... one of start, center, end, or nearest. defaults to nearest. ...
... one of start, center, end, or nearest. defaults to nearest. ...

ErrorEvent - Web APIs
the errorevent interface represents events providing information related to errors in scripts or in files. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" 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/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale m...
... errorevent.message read only is a domstring containing a human-readable error message describing the problem. errorevent.filename read only is a domstring containing the name of the script file in which the error ...

ExtendableEvent - Web APIs
ltiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises. note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 1180274.) this interface inherits from the event interface. ...
...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="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,and...
...it is not available when it is a window, or the scope of another kind of worker. constructor extendableevent() creates a new extendableevent object. properties doesn't implem...

File - Web APIs
of a blob, and can be used in any context that a blob can. in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files. see using files from web applications for more information and examples. ...
...<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/blob" 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">blob</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/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mo...
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the unix epoch (january 1st, 1970 at midnight). file.prototype.lastmodifieddate read only retur...

GlobalEventHandlers.onanimationend - Web APIs
. ...
...first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don'...
...height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to...

GlobalEventHandlers.onanimationiteration - Web APIs
animation events, so it may look familiar. ...
...first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't ...
...height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to s...

GlobalEventHandlers.onanimationstart - Web APIs
. ...
...first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don'...
...height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; font: 14px "open sans", "arial", sans-serif; } #text { width: 46px; padding: 10px; position: relative; text-align: center; align-self: center; color: white; font: bold 1.4em "lucida grande", "open sans", sans-serif; } leaving out some bits of the css that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. first is the box itself. we set its size, position, color, and layout. note that there's nothing there about animation. that's because we don't want the box to...

HTMLFormControlsCollection - Web APIs
ion of html form control elements. it represents the lists returned by the htmlformelement interface's elements property and the htmlfieldsetelement interface's elements property. this interface replaces one method from htmlcollection, on which it is based. ...
...e="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-fa...
... methods this interface inherits the methods of its parent, htmlcollection. htmlformcontrolscollection.nameditem() returns the radionodelist or the element in the collection whos...

HTMLOptionsCollection - Web APIs
ollection interface represents a collection of <option> html elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items. this object is returned only by the options property of select. ...
...e="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family=...
...you can either remove options from the end by lowering the value, or add blank options at the end by raising the va...

HashChangeEvent - Web APIs
the hashchangeevent interface represents events that fire when the fragment identifier of the url has changed. the fragment identifier is the part of the url that follows (and includes) the # symbol. ...
...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/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,and...
... hashchangeevent.newurl read only the new url to which the window is navigating. hashchangeevent.oldurl read only the previous url from which the window was navigated. methods this inter...

IDBCursorWithValue - Web APIs
. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. ...
...g style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,...
... properties inherits properties from its parent interface, idbcursor. idbcursorwithvalue.value read only returns the value of the current cursor. example in this example we create a transaction, retri...

IDBDatabase - Web APIs
resenting interactions with data in the database. all objects in indexeddb — including object stores, indexes, and cursors — are tied to a particular transaction. thus, you cannot execute commands, access data, or open anything outside of a transaction. ...
...tyle="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/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,mon...
... idbdatabase.version read only a 64-bit integer that contains the version of the connected database. when a database is first created, this attribute is an empty string. ...

IDBRequest - Web APIs
occurs while performing the operation, the exception is made available through the result property and an error event is fired (idbrequest.onerror). the interface idbopendbrequest is derived from idbrequest. note: this feature is available in web workers. ...
...tyle="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/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,mona...
... idbrequest.error read only returns a domexception in the event of an unsuccessful request, indicating what went wrong. idbrequest.result read only returns the result of the request. if the the request failed and the ...

IDBTransaction - Web APIs
tions, idbtransaction to set the mode of the transaction (e.g. is it readonly or readwrite), and you access an idbobjectstore to make a request. you can also use an idbtransaction object to abort transactions. note: this feature is available in web workers. ...
...tyle="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/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,...
...,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/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var object...

MediaKeyMessageEvent - Web APIs
the mediakeymessageevent interface of the encryptedmediaextensions api contains the content and related data when the content decryption module generates a message for the session. ...
...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/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monac...
... properties inherits properties from its parent, event. mediakeymessageevent.message read only returns an arraybuffer with a message from the content decryption module. messages...

MediaKeySession.onkeystatuseschange - Web APIs
keystatuseschange property of the mediakeysession is an event handler, fired whenever a keystatuschange event ocurrs, denoting there has been a change in the keys or their statuses within a session. this interface inherits from the extendableevent interface. ...
...tyle="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/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas...
...} specifications specification status comment encrypted media extensionsthe definition of 'onkeystatuseschange' in that specification. recommendation initial definiti...

MediaKeySession.onmessage - Web APIs
the onmessage property of the mediakeysession is an event handler, fired whenever a mediakeymessageevent occurs, denoting a message is generated by the content decryption module. this interface inherits from the extendableevent interface. ...
...tyle="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/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas...
...} specifications specification status comment encrypted media extensionsthe definition of 'onmessage' in that specification. recommendation initial definition. ...

MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an htmlmediaelement object. a mediasource object can be attached to a htmlmediaelement to be played in the user agent. ...
...tyle="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/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,mon...
... properties mediasource.sourcebuffers read only returns a sourcebufferlist object containing the list of sourcebuffer objects associated with this mediasource. ...

MediaStreamTrackEvent - Web APIs
the mediastreamtrackevent interface represents events which indicate that a mediastream has had tracks added to or removed from the stream through calls to media stream api methods. these events are sent to the stream when these changes occur. ...
...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/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,mona...
... track read only a mediastreamtrack object representing the track which was added to the stream. constructor mediastreamtrack...

MessageEvent - Web APIs
channels (see rtcdatachannel.onmessage). the action triggered by this event is defined in a function set as the event handler for the relevant message event (e.g. using an onmessage handler as listed above). note: this feature is available in web workers. ...
...svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" 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/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale...
... properties this interface also inherits properties from its parent, event. messageevent.data read only the data sent by the message emitter. messageevent.origin read only a usvstring representing the origin of...

Node - Web APIs
rface may not apply to one of its child interfaces; in that case, the inheriting node may return null or throw an exception, depending on circumstances. for example, attempting to add children to a node type that cannot have children will throw an exception. ...
...tyle="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="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,an...
... node.baseuriread only returns a domstring representing the base url of the document containing the node. node.baseuriobject read only (not available to web content.) the nsi...

PageTransitionEvent - Web APIs
the pagetransitionevent event object is available inside handler functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" 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/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco...
... pagetransitionevent.persisted read only indicates if the document is loading from a cache. example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener(...

PerformanceLongTaskTiming - Web APIs
the performancelongtasktiming interface of the the long tasks api reports instances of long tasks. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-f...
... specifications specification status comment long tasks api 1the definition of 'performancelongtasktiming' in that specif...

PerformanceMark - Web APIs
performancemark is an abstract interface for performanceentry objects with an entrytype of "mark". entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance timeline. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="con...
... performanceentry.name returns the name given to the mark when it was cr...

PerformanceMeasure - Web APIs
is an abstract interface for performanceentry objects with an entrytype of "measure". entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance timeline. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="...
... performanceentry.name returns the name given to the measure when...

PerformanceNavigationTiming - Web APIs
performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. for example, this interface can be used to determine how much time it takes to load or unload a document. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font...
... performanceentry.name read only r...

PerformancePaintTiming - Web APIs
pixels. an application can register a performanceobserver for "paint" performance entry types and the observer can retrieve the times that paint events occur. use this information to help identify areas that take too long to provide a good user experience. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-fami...
... performanceentry.name ...

PerformanceResourceTiming - Web APIs
dns lookup start and end times, response start and end times, etc.. additionally, the interface extends performanceentry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-f...
... properties this interface extends the following performanceentry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "reso...

ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>). ...
...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/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andal...
... properties also inherits properties from its parent event. progressevent.lengthcomputable read only is a boolean flag indicating if the total work to be done, and the amount of work...

PromiseRejectionEvent - Web APIs
nterface represents events which are sent to the global script context when javascript promises are rejected. these events are particularly useful for telemetry and debugging purposes. for details on promise rejection events, see promise rejection events in using promises. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" 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/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,mona...
... properties also inherits properties from its parent event. promiserejectionevent.promise read only ...

RTCDTMFSender - Web APIs
tched telephone network (pstn) or other legacy telephone service, including extant voice over ip (voip) services. for that reason, dtmf can't be used between two webrtc-based devices, because there is no mechanism provided by webrtc for receiving dtmf codes. ...
...tyle="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/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,m...
...see tonebuffer for details on the format of the tone buffe...

RTCPeerConnection - Web APIs
the rtcpeerconnection interface represents a webrtc connection between the local computer and a remote peer. it provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed. ...
...tyle="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/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consol...
... 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/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only r...

RadioNodeList - Web APIs
the radionodelist interface represents a collection of radio elements in a <form> or a <fieldset> element. ...
...vg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,an...
... radionodelist.value if the underlying element collection contains radio buttons, the value property represents the checked radio button. on retrieving the value property, the value of the currently...

SourceBuffer - Web APIs
the sourcebuffer interface represents a chunk of media to be passed into an htmlmediaelement and played, via a mediasource object. this can be made up of one or several media segments. ...
...tyle="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/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,mo...
... sourcebuffer.appendwindowstart controls the timestamp for the start of the append window. this is a timestamp range that can be used to filter what media data is appended to th...

SourceBufferList - Web APIs
fer list containing the sourcebuffers appended to a particular mediasource can be retrieved using the mediasource.sourcebuffers property. the individual source buffers can be accessed using array operator (i.e. []) or functions such as foreach() for example. ...
...tyle="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/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consola...
... event handlers sourcebufferlist.onaddsourcebuffer the event handler for the addsourcebuffer event. sourcebufferlist.onremovesourcebuffer the event handler for th...

StaticRange - Web APIs
hod to specify a range of content in the dom whose contents don't update to reflect changes which occur within the dom tree. it offers the same set of properties and methods as abstractrange. abstractrange and staticrange are not available from web workers. ...
...le="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,m...
... properties the properties below are inherited from its parent interface, abstractrange. staticrange.collapsed read only re...

StorageEvent - Web APIs
a storageevent is sent to a window when a storage area it has access to is changed within the context of another document. ...
...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/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale...
...ts="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/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type descript...

TaskAttributionTiming - Web APIs
interface of the long tasks api returns information about the work involved in a long task and its associate frame context. the frame context, also called the container, is the iframe, embed or object that is being implicated, on the whole, for a long task. ...
..."display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-famil...
... taskattributiontiming.containersrc read only returns the container's src attribute. taskattributiontiming.containerid read only retu...

TimeEvent - Web APIs
the timeevent interface, a part of svg smil animation, provides specific contextual information associated with time events. ...
...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/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...for this event type, indicates the repeat number for the animation. timeevent.view read only is a windowproxy that identifies the win...

UIEvent - Web APIs
r backward compatibility, you should create a uievent object using the uievent() constructor. several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...
...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" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
... properties this interface also inherits properties of its parent, event. uievent.cancelbubble is a boolean indicating whether the bubbling of the event has been canceled or not. uievent.detailread only returns a lo...

VTTCue - Web APIs
null if none is assigned. vttcue.vertical returns an enum representing the cue writing direction. vttcue.snaptolines returns true if the vttcue.line attribute is an integer number of lines or a percentage of the video size. vttcue.line returns the line positioning of the cue. this can be the string auto or a number whose interpretation depends on the value of vttcue.snaptolines. vttcue.linealign returns an enum representing the alignment of the vttcue.line. vttcue.position returns the indentation of the cue within the line. this can be the string auto or a number representing the percentage of the vttcue.region, or the video size if vttcue.region is null. vttcue.positionalign returns an enum representing the alignment of the cue. this is used to determine what the vttcue.position is...
... vttcue.text returns a domstring with the contents of the cue. methods getcueashtml() returns the cue text as a documentfragment. ...
... vttcue.text returns a domstring with the contents of the cue. methods getcueashtml() returns the cue text as a documentfragment. ...

WebGLContextEvent - Web APIs
bcontextevent interface is part of the webgl api and is an interface for an event that is generated in response to a status change to the webgl rendering context. inheritance this interface inherits properties and methods from its parent interface, event. ...
...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/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,a...
... webglcontextevent.statusmessage a read-only property containing additional information about the event. methods this interface doesn't define any own methods, but inherits methods from i...

WebGLRenderingContext.getParameter() - Web APIs
gl.renderer domstring gl.sample_buffers glint gl.sample_coverage_invert ...
... gl.stencil_pass_depth_pass glenum gl.stencil_ref glint gl.stencil_test glboolean gl.stencil_value_mask gluint gl.stencil_writemask gluint gl.subpixel_bits glint gl.texture_binding_2d webgltexture or null gl.texture_binding_cube_map webgltexture or null gl.unpack_alignment glint gl.unpack_colorspace_conversion_webgl glenum gl.unpack_flip_y_webgl glboolean gl.unpack_premultiply_alpha_webgl glboolean gl.vendor domstring gl.version domstring gl.viewport int32array (with 4 elements) webgl 2 you can query the following pname parameters when using a webgl2re...
...transform_feedback_active glboolean gl.transform_feedback_binding webgltransformfeedback or null see bindtransformfeedback. gl.transform_feedback_buffer_binding webglbuffer or null see bindbuffer. gl.transform_feedback_paused glboolean gl.uniform_buffer_binding webglbuffer or null see bindbuffer. gl.uniform_buffer_offset_alignment glint see pixelstorei. gl.unpack_image_height glint see pixelstorei. gl.unpack_row_length glint see pixelstorei. gl.unpack_skip_images glint see pixelstorei. gl.unpack_skip_pixels glint see pixelstorei. gl.unpack_skip_rows glint see pixelstorei. gl.vertex_array_binding webglvertexarrayobject or null ...

WebGL constants - Web APIs
back_value_mask 0x8ca4 stencil_back_writemask 0x8ca5 viewport 0x0ba2 returns an int32array with four elements for the current viewport dimensions. scissor_box 0x0c10 returns an int32array with four elements for the current scissor box dimensions. ...
... stencil_back_writemask 0x8ca5 viewport 0x0ba2 returns an int32array with four elements for the current viewport dimensions. scissor_box 0x0c10 returns an int32array with four elements for the current scissor box dimensions. ...
..._vertex_uniform_blocks 0x8a2b max_fragment_uniform_blocks 0x8a2d max_combined_uniform_blocks 0x8a2e max_uniform_buffer_bindings 0x8a2f max_uniform_block_size 0x8a30 max_combined_vertex_uniform_components 0x8a31 max_combined_fragment_uniform_components 0x8a33 uniform_buffer_offset_alignment 0x8a34 active_uniform_blocks 0x8a36 uniform_type 0x8a37 uniform_size 0x8a38 uniform_block_index 0x8a3a uniform_offset 0x8a3b uniform_array_stride 0x8a3c uniform_matrix_stride 0x8a3d uniform_is_row_major 0x8a3e uniform_block_binding 0x8a3f...

XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest. ...
...tyle="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/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family...
... xmlhttprequesteventtarget.onerror contains the function to call when a request encounters an error and the erro...

ARIA: switch role - Accessibility
e("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
...se"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
... result the result looks like this: specifications ...

@supports - CSS: Cascading Style Sheets
:is()) /* this rule won't be applied in browsers which don't support :is() */ :is(ul, ol) > li { … ...
...:is()) /* this rule won't be applied in browsers which don't support :is() */ :is(ul, ol) > li { … /* css applied when the :is(…) se...
...:is()) /* this rule won't be applied in browsers which don't support :is() */ :is(ul, ol) > li { … /* css applied when the :is(…) selector is supported */ } @supports not selector(:is(a, b)) { /* fallback fo...

Inline formatting context - CSS: Cascading Style Sheets
rection are respected. in the example below you can see how the margin, border, and padding on the inline <span> element are added. note: i am using the logical, flow-relative properties — padding-inline-start rather than padding-left — so that they work in the inline dimension whether the text is horizontal or vertical. read more about these properties in logical properties and values. ...
...e how the margin, border, and padding on the inline <span> element are added. note: i am using the logical, flow-relative properties — padding-inline-start rather than padding-left — so that they work in the inline dimension whether the text is horizontal or vertical. read more about these properties in logical properties and values. alignment in the block direction inline boxes may be aligned in the block direction in different ways, using the vertical-align property, which will align on the block axis in vertical writing modes (therefore not vertically at all!). in the example below the large text is making the line box of the first sentence larger, therefore the vertical-align property can be used to align the inline boxes either side of it. i have used the value top, try changing...
...ways, using the vertical-align property, which will align on the block axis in vertical writing modes (therefore not vertically at all!). in the example below the large text is making the line box of the first sentence larger, therefore the vertical-align property can be used to align the inline boxes either side of it. i have used the value top, try changing it to middle, bottom, or baseline. alignment in the inline direction if there is additional space in the inline direction, the text-align property can be used to align the inline boxes within their line box. try changing the value of text-align below to end. effect of floats line boxes usually have the same size in the inline direction, therefore the same width if working in a horizontal writing mode, or height if working in a vert...

Mozilla CSS extensions - CSS: Cascading Style Sheets
with -moz-. mozilla-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...
...ne-widthobsolete since gecko 1.9.2 p -moz-padding-end [superseded by the standard version padding-inline-start] -moz-padding-start [superseded by the standard version padding-inline-end] -moz-perspective [prefixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefi...
...moz-japanese-informal -moz-kannada -moz-khmer -moz-lao -moz-malayalam -moz-myanmar -moz-oriya -moz-persian -moz-simp-chinese-formal -moz-simp-chinese-informal -moz-tamil -moz-telugu -moz-thai -moz-trad-chinese-formal -moz-trad-chinese-informal -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable text-align -moz-center -moz-left -moz-right text-decoration -moz-anchor-decoration -moz-user-select -moz-all -moz-none width, min-width, and max-width -moz-min-content -moz-fit-content -moz-max-content -moz-available pseudo-elements and pseudo-classes a – d ::-moz-anonymous-block eg@:- bug 331432 ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link ...

Cubic Bezier Generator - CSS: Cascading Style Sheets
.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(-2 * basic_scale_size + cx(0), ly(i)); ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant...
... ctx.filltext(math.round(i * 10) / 10, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("output (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ...
...(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), ...

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

scroll-margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...he aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
...es sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the sec...

scroll-margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
...the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
...es sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for th...

scroll-margin-inline - CSS: Cascading Style Sheets
croll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how...
...he aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
...es sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin values, a different one for the sec...

scroll-margin - CSS: Cascading Style Sheets
e example's content. the value specified for scroll-margin determines how much of the page that's primarily outside the snapport should remain visible. thus, the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how...
...the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. html the html that represents the blocks is very simple: <div class="scroller"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css let's walk through the css. ...
...es sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled as follows: .scroller > div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller > div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the x axis, in our case) are the designated snap points. last of all we specify the scroll margin-values, a different one for th...

matrix3d() - CSS: Cascading Style Sheets
div> <div class="face bottom">6</div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey...
... html <div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit. ...
... the matrix below describes the following transformations: translates every x point by -50px translates eve...

<caption>: The Table Caption element - HTML: Hypertext Markup Language
plicit aria role no corresponding role permitted aria roles no role permitted dom interface htmltablecaptionelement attributes this element includes the global attributes. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute indicates how the caption must be aligned with respect to the table. it may have one of the following values: left the caption is displayed to the left of the table. top the caption is displayed above the table. right the caption is displayed to the right of the table. bottom the caption is displayed below the table. usage note: do not use this a...
...ollowing values: left the caption is displayed to the left of the table. top the caption is displayed above the table. right the caption is displayed to the right of the table. bottom the caption is displayed below the table. usage note: do not use this attribute, as it has been deprecated. the <caption> element should be styled using the css properties caption-side and text-align. usage notes the <caption> element should be the first child of its parent <table> element. when the <table> element that contains the <caption> is the only descendant of a <figure> element, you should use the <figcaption> element instead of <caption>. example this simple example presents a table that includes a caption. <table> <caption>example caption</caption> <tr> <th>login</...
...hould use the <figcaption> element instead of <caption>. example this simple example presents a table that includes a caption. <table> <caption>example caption</caption> <tr> <th>login</th> <th>email</th> </tr> <tr> <td>user1</td> <td>user1@sample.com</td> </tr> <tr> <td>user2</td> <td>user2@sample.com</td> </tr> </table> caption { caption-side: top; align: right; } table { border-collapse: collapse; border-spacing: 0px; } table, th, td { border: 1px solid black; } table {background: red;} do not alter caption. for that you need display: block. specifications specification status comment html living standardthe definition of '<caption>' in that specification. living standard html5the definiti...

<mlabeledtr> - MathML
sent a label in a row either on the left or on the right side (determined using the side attribute on the <mtable> element). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. ...
...the left or on the right side (determined using the side attribute on the <mtable> element). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. ...
... of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <mtable> for this row. possible values are: left, center and right. groupalign href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <mtable> for this row. possible values are: axis, baseline, bottom, center and top. examples rendering: <math> ...

<mtd> - MathML
the mathml <mtd> element represents a cell in a table or a matrix. it may only appear in a <mtr> element. this element is similar to the <td> element of html. attributes class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: left, center and right. columnspan a non-negative integer value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. ...
... possible values are: axis, baseline, bottom, center and top. ...
... possible values are: axis, baseline, bottom, center and top. rowspan a non-negative integer value that indicates on how many rows does the cell extend. ...

baseline-shift - SVG: Scalable Vector Graphics
the baseline-shift attribute allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. the shifted object might be a sub- or superscript. note: as a presentation attribute baseline-shift can be used as a css property. note: this property is going to be deprecated and authors are advised to use vertical-align instead. as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts. super the dominant-baseline is shifted to the default...
...ue) or lowers (negative value) the dominant-baseline of the parent text content element by the specified length. a percentage value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified percentage of the line-height. specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification. working draft removed the baseline value, as it is a redundant keyword within the vertical-align property. scalable vector graphics (svg) 2the definition of 'alignment-baseline' in that specification. candidate recommendation refers to the definition in css inline layout and notes that vertical-align should be preferred. scalable ...
... recommendation initial definition browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

v-hanging - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-hanging' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-hanging' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-hanging' in that specification. ...

Forms related code snippets - Archive of obsolete content
own = ondocclick); })(); </script> <style type="text/css"> table.zdp-calendar { border: 1px solid #666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; } span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-radius: 5px; } span.zdp-increase-month, span.zdp-increase-year, span.zdp-decrease-month, span.zdp-decrease-year { display: block; ...
...: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-radius: 5px; cursor: pointer; } span.zdp-decrease-month, span.zdp-decrease-year { float: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly class="date-picker" name="date-to" /> </p> </form> </body> </html> ...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
so that they are arranged horizontally. ...
...the clock.dtd file inside the fr-fr folder must be encoded as utf-8. listing 9: content for clock.dtd locale\en-us\clock.dtd: <!entity helloworld.clock "clock">...

MMgc - Archive of obsolete content
sisting of 3 parts: a page-granular memory allocator called the gcheap a set of fixed size allocators for sizes up to 2k a large allocator for items over 2k when you want to allocate something we figure out what size class it's in and then ask that allocator for the memory. each fixed size allocator maintains a doubly linked list of 4k blocks that it obtains from the gcheap. these 4k blocks are aligned on 4k boundaries so we can easily allocate everything on 8-byte boundaries (a necessary consequence of the 32-bit atom design-- 3 type bits and 29 pointer bits). also we store the gcalloc::gcblock structure at the beginning of the 4k block so each allocation doesn't need a pointer to its block (just zero the lower 12 bits of any gc-allocated thing to get the gcblock pointer). the gcblock contai...
...requested when the heap is expanded and not try to reserve additional memory pages to expand into. gcheap won't attempt to allocate contiguous regions in this case. we currently use virtualalloc for windows (supported on all flavors of windows back to 95), mmap on mach-o and linux. on classic and carbon, we do not currently use a memory mapping strategy... these implementations are calling mpallocaligned, which can allocate 4096-byte aligned memory. we could potentially bind to the mach-o framework dynamically from carbon, if the user's system is mac os x, and call mmap/munmap. ...

MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
=pref) and remove --disable-ldap from mozconfig file. ...
...d! ...

Style System Overview - Archive of obsolete content
th that declaration, and the declaration, and is the most important implementation of nsistylerule. the declarations (properties & values) are stored in data structs (nscss*). the data format of the structs and selectors is mostly clear from the code and not worth going into (although the implementation of :not() is confusing). ...
...ation of :not() is confusing). css style rule representation h1, h2 { color: green; text-align: right; text-indent: 0; } cssstyleruleimpl cssstyleruleimpl ↓ ↓ ↓ ↓ h1 nscssdeclaration h2 ↙ ↘ nscsscolor — color: green nscsstext — text-align: right text-indent: 0 css style rule representation problem: the rule structures use too much memory (a few hundred kilobytes for all our chrome), and require large numbers of allocations to construct. detail: !important declarations cause an extra rule object cssimportantrule to be created since they are in a separate part of the cascade other nsistylerule implementations nsh...

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. <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 la...
...ll 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. ...

showPopup - Archive of obsolete content
« xul reference home showpopup( element, x, y, popuptype, anchor, align ) deprecated since gecko 1.9 return type: no return value deprecated in favor of openpopup and openpopupatscreen opens a popup element. there are two ways of specifying where the popup appears, either at a specific screen position, or relative to some element in the window. if either x or y are set to values, the popup will appear at the screen coordinate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. the anchor argument corresponds to the popupa...
...ate (x,y). if x and y are -1, the popup will be positioned relative to the element specified as the first argument. this is what you might do to show a popup below a button, for example. in this latter case, the anchor and align arguments may be used to further control where the popup appears relative to the element. the anchor argument corresponds to the popupanchor attribute on the element. the align argument corresponds to the popupalign attribute on the element. the anchor and align arguments are ignored if either x or y are not -1. to have a popup appear relative to another element yet still offset by some number of pixels, determine the actual screen position of the element using the boxobject.screenx and boxobject.screeny properties of the element, and use those as the x and y argume...

ContextMenus - Archive of obsolete content
to open a context menu. when using the mouse to open a context menu, the context is the element that was clicked. when using the keyboard, the context is the element in the window that is currently focused. although there are several ways to open a context menu, a single event may be used to listen for any of these situations; the 'contextmenu' event is fired in any case. <hbox id="container" align="center" oncontextmenu="..."> <label value="name:"/> <textbox id="name"/> </hbox> in this example, an attempt to open a context menu anywhere inside the hbox will call the event listener attached using the oncontextmenu attribute. as textboxes have a context menu built in, the event will fire before an attempt to open the context menu. however, the event will also fire when the label is rig...
...a context menu within the same document. in the example, a context menu is attached to a grid. <window id="main-window"> <popupset> <menupopup id="ins-del-menu"> <menuitem label="insert"/> <menuitem label="delete"/> </menupopup> </popupset> </window> <grid context="ins-del-menu"> <columns> <column/> <column flex="1"/> </columns> <rows id="rows"> <row align="center"> <label value="name:"/> <textbox/> </row> </rows> </grid> the same context menu can be attached to multiple elements. just set the context attribute on those elements you want the context menu to apply to. one technique is to attach a context menu to an entire document area. for instance, the firefox browser applies a single context menu to the browser area which dis...

Menus - Archive of obsolete content
> <menu id="help-menu" label="help"> ... </menu> </menubar> it's possible to place other elements on a menubar, but remember that they will not appear on a macintosh. so you should ensure that the functionality of these elements is avialable elsewhere. or, you could write code that handles multiple platforms in different ways. if you do place other elements on a menubar, you may wish to align them on the far side rather than next to the other menus. you can do this by adding a flexible spacer. <menubar id="sample-menubar"> <menu id="file-menu" label="file"> ... </menu> <spacer flex="1"/> <image src="logo.png"/> </menubar> in this example, a logo image is placed on the end of a menubar. the menupopup element the menupopup element is the popup that displays the menu ite...
... displays the menu items. when used for menus on a menubar, the menupopup should be a child of the menu element. the following shows a simple help menu. <menu label="help"> <menupopup> <menuitem label="contents"/> <menuitem label="search help"/> </menupopup> </menu> normally, a menupopup is hidden. when the 'help' label is pressed, the menupopup is displayed over top of the window, aligned along the bottom of the help menu label. when a menu command is selected or the menu is cancelled, the menupopup disappears from the screen again. the menu element the menu element is used for the labels on a menubar and for the labels of submenus. for information about submenus, see submenus below. the label for the menu element is specified using the label attribute. in the example below, ...

Grids - Archive of obsolete content
previousnext » xul has a set of elements for creating tabular grids. xul tabular layout xul has a set of elements for doing layout of elements in a grid-like manner using the grid element. it has some similarities to the html table tag. the grid does not display anything itself; it is used only to position elements in a tabular form with rows and columns. a grid contains elements that are aligned in rows just like tables. inside a grid, you declare two things, the columns that are used and the rows that are used. just like html tables, you put content such as labels and buttons inside the rows. however, the grid allows either row or column based organization so you may put content in either rows or in columns. it is most common to use rows, as with a table. however, you can still use co...
...ify how many there are. you may add the flex attribute to a row to make it flexible. the content is placed inside in each column. the first element inside each column element is placed in the first row, the second element in the second row and the third element is placed in the third row. if you put content in both the columns and the rows, the content will overlap each other, although they will align in a grid properly. it creates an effect much like a grid of stack elements. the order of the elements in the grid determines which is displayed on top and which is placed underneath. if the rows element is placed after the columns element, the content within the rows is displayed on top. if the columns element is placed after the rows element, the content within the columns is displayed on top.

The Box Model - Archive of obsolete content
here four elements have been oriented vertically, two inner hbox tags and two button elements. notice that only the elements that are direct descendants of the box are oriented vertically. the labels and textboxes are inside the inner hbox elements, so they are oriented according to those boxes, which are horizontal. you can see in the image that each label and textbox is oriented horizontally. aligning textboxes if you look closely at the image of the login dialog, you can see that the two textboxes are not aligned with each other horizontally. it would probably be better if they were. in order to do this we need to add some additional boxes. example 3 : source view <vbox> <hbox> <vbox> <label control="login" value="login:"/> <label control="pass" value="password:"/> ...
...we need to add some additional boxes. example 3 : source view <vbox> <hbox> <vbox> <label control="login" value="login:"/> <label control="pass" value="password:"/> </vbox> <vbox> <textbox id="login"/> <textbox id="pass"/> </vbox> </hbox> <button id="ok" label="ok"/> <button id="cancel" label="cancel"/> </vbox> notice how the text boxes are now aligned with each other. to do this, we needed to add boxes inside of the main box. the two labels and textboxes are all placed inside a horizontal box. then, the labels are placed inside another box, this time a vertical one, as are the textboxes. this inner box is what makes the elements orient vertically. the horizontal box is needed as we want the labels vbox and the inputs vbox to be placed horizo...

action - Archive of obsolete content
y use variables in place of attribute values. variables are a question mark followed by a name. for a matched rule, each variable will be a reference to data within the datasource, determined from the query. if the same variable appears multiple times, it will have the same value in each place. for more information, see actions. ...
... 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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods adde...

arrowscrollbox - Archive of obsolete content
rtical" flex="1"> <button label="red"/> <button label="blue"/> <button label="green"/> <button label="yellow"/> <button label="orange"/> <button label="silver"/> <button label="lavender"/> <button label="gold"/> <button label="turquoise"/> <button label="peach"/> <button label="maroon"/> <button label="black"/> </arrowscrollbox> 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...
...oth scrolling for the corresponding arrowscrollbox, false disables it. currently, smooth scrolling supports horizontal arrowscrollboxes only. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. ...

assign - Archive of obsolete content
(example needed) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. var type: string for the xul assign attribute, this is the variable to assign the value to; otherwise it's a reference to a template variable such as "?name". ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

binding - Archive of obsolete content
contained within a bindings element. a binding is used to bind a variable to a node. like the triple element in syntax, it can be used to bind a particular property of a matched node to a particular variable name. that name can then be used within the action of a rule. ...
...t-cursor, width properties object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

bindings - Archive of obsolete content
ify a set of variable bindings for a rule. this element should be contained within a rule element and contain one or more binding elements. this element is optional in firefox 3/mozilla 1.9 and later; instead binding elements may be placed directly inside the rule element. more information is available in the template guide. ...
...r, width object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...

box - Archive of obsolete content
ts do not overlap. the default orientation is horizontal. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

broadcaster - Archive of obsolete content
pdate automatically. an onbroadcast event will be sent to the observers when a change is made. for menuitems or buttons that just want to have their disabled status set when the feature should be disabled, you should use a command element instead. more information is available in the broadcasters and observers xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

broadcasterset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for broadcaster elements. the broadcasterset and its descendants are not displayed. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

column - Archive of obsolete content
s 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. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

columns - Archive of obsolete content
dual columns to appear in the grid. the columns element may be nested inside another columns element. other elements placed inside a columns element occupy the full height of the grid and are placed in their corresponding positions between the columns. more information about columns is available in the xul tutorial. example see grid for an example. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

conditions - Archive of obsolete content
question mark (?). when evaluating the rule for a particular rdf resource, the variables are replaced with values from the resource. if all variables can be replaced, the rule matched. this element is used with firefox 2/mozilla 1.8 and earlier instead of the query element. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

deck - Archive of obsolete content
tedindex="2"> <description value="this is the first page"/> <button label="this is the second page"/> <box> <description value="this is the third page"/> <button label="this is also the third page"/> </box> </deck> attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
...operty. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected do not hide panels; the deck element only understands visible panels. selectedpanel type: element holds a reference to the currently selected panel within a deck element. assigning a value to this property will modify the selected panel. ...

dialog - Archive of obsolete content
e may be used to set which buttons should appear in the dialog box. these buttons will be placed in the correct locations for the user's platform. more information is available in the xul tutorial and dialogs and prompts (code snippets). ...
..."cancel" button. buttonaccesskeydisclosure type: string the access key to use for the "disclosure" button. buttonaccesskeyextra1 type: string the access key to use for the first extra button. buttonaccesskeyextra2 type: string the access key to use for the second extra button. buttonaccesskeyhelp type: string the access key to use for the "help" button. buttonalign type: string the value of the align attribute for the box containing the buttons. buttondir type: string the value of the dir attribute for the box containing the buttons. buttondisabledaccept type: boolean if true, the accept button is disabled. buttonlabelaccept type: string the label to appear on the "accept" button. buttonlabelcancel type: string the label to...

dialogheader - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
... 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: string the text to appear in the title bar of the window. ...

dropmarker - Archive of obsolete content
lated ] a dropmarker is a button with an arrow which will reveal more details when pressed. a dropmarker is not intended to be used as a separate element, but as part of another element. for instance the menulist and the popup type of datepicker use a dropmarker, that when pressed, will reveal a popup menu. ...
...serves, 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. ...

grid - Archive of obsolete content
"/> <textbox id="user"/> </row> <row> <label value="group"/> <menulist> <menupopup> <menuitem label="accounts"/> <menuitem label="sales" selected="true"/> <menuitem label="support"/> </menupopup> </menulist> </row> </rows> </grid> </groupbox> 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...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

grippy - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that may be used inside a splitter which can be used to collapse a sibling element of the splitter. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

groupbox - Archive of obsolete content
linux, for instance, only the caption appears with no border around the group. more information is available in the xul tutorial. ...
...serves, 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. ...

hbox - Archive of obsolete content
ds | related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to horizontal orientation. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

image - Archive of obsolete content
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. 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 el...
...or default handling: always the image is always checked to see whether it should be reloaded. never the image will be loaded from the cache if possible. properties 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. ...

keyset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container element for key elements. the keyset and its descendants are not displayed. more information is available in the xul tutorial. ...
...using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...

listcol - Archive of obsolete content
-> <listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </listbox> 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...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

listcols - Archive of obsolete content
, the list box has a single column. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

listhead - Archive of obsolete content
ntrols. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. ...
...eelement, 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. disabled type: boolean gets and sets the value of the disabled attribute. ...

listheader - Archive of obsolete content
for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. 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. ...
...serves, 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. ...

member - Archive of obsolete content
examples | attributes | properties | methods | related ] used within a rule's conditions element to match elements that are containers or are contained within another element. both the container and child attributes may use variables. more information is available in the xul tutorial. ...
...ld type: ? a variable reference to a node that is expected to be a child of the element that is referred to by the container element. container type: ? a variable reference to a node that is expected to be a container. if the variable is the same as the uri attribute on the content element, the resource must be a container element in order to match. ...

menuitem - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
...d menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value 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. ...

observes - Archive of obsolete content
e type: attribute name the attribute that the observer is observing. when the value of the attribute changes, the broadcast event is called on the observer. use the value * to observe all attribute of the broadcasters. the id, ref, and persist attributes are not observed. element type: id the id of the broadcaster element that the observer is observing. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

page - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] similar to a window, except it should be used for xul files that are to be loaded into an iframe. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

popupset - Archive of obsolete content
ement is optional; the given elements need not appear in a popupset container. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

preferences - Archive of obsolete content
readonly; three of these could be merged into a single member attribute nsiprefservice service; the preferences service. attribute nsiprefbranch rootbranch; the root prefs branch. attribute nsiprefbranch defaultbranch; the root branch of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods void firechangedevent(i...

prefwindow - Archive of obsolete content
n mac os x that are not attached as a sheet to the main window is to use nsiwindowwatcher.openwindow() with a null parentwindow. this does not work with prefwindows, breaking the general behavior of the window and in particular the list of prefpanes. prefer the classical window.opendialog() with the following window features: "chrome,titlebar,toolbar,centerscreen,dialog=yes". ...
...atically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. buttonalign type: string the value of the align attribute for the box containing the buttons. buttondir type: string the value of the dir attribute for the box containing the buttons. buttonorient type: string the value of the orient attribute for the box containing the buttons. buttonpack type: string the value of the pack attribute for the box containing the buttons. ...

progressmeter - Archive of obsolete content
unt of the bar that is filled in. undetermined the progressmeter is indeterminate. value type: integer an integer ranging from 0 to the maximum value that indicates the progress. for instance, if no maximum value has been set, setting the value to "0" shows an empty bar, "100" shows a bar at full length and "25" shows the first quarter of the bar. ...
...: integer gets and sets the value of the max attribute. mode type: string gets and sets the value of the mode attribute. value type: string gets and sets the value 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. ...

query - Archive of obsolete content
ve an expr attribute and may optionally contain assign elements. for sql datasources, the query should contain an sql statement as text. attributes expr examples (example needed) attributes expr type: string for xml queries, an xpath expression which returns results. any namespace prefixes declared on the element may be used within the expression. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

queryset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for query elements when more than one query is used. for more information, see multiple queries. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

resizer - Archive of obsolete content
id of the element that should be resized by the resizer. typetype: stringset this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window. as some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

row - Archive of obsolete content
ow in a rows element. each child of the row element is placed in each successive cell of the grid. the row with the most child elements determines the number of columns in each row, which may be smaller or larger than the number of column elements defined in the grid. more information is available in the xul tutorial. example see grid for an example. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

rows - Archive of obsolete content
ws 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. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

script - Archive of obsolete content
this to application/javascript. note: if the javascript file is in chrome://, setting this attribute to application/javascript will always use the latest available javascript version. if you omit this attribute, the default (and older) javascript version is used (like you get when including a javascript file from web content without specifying a version number). ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

scrollbox - Archive of obsolete content
nt.scrollintoview. prior to gecko 19, scrollintoview() didn't exist in xul. do this instead: var xpcominterface =scrollbox_element.boxobject.queryinterface( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

scrollcorner - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for the small box where the horizontal and vertical scrollbars meet. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

separator - Archive of obsolete content
r class="groove-thin"/> attributes orient type: one of the values below used to specify whether the separator is a horizontal or vertical separator. note that the values are the reverse of what seems more likely. horizontal the separator separates vertically placed elements. vertical the separator separates horizontally placed elements. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

spacer - Archive of obsolete content
y used to place spacing within a container. if you don't specify that the spacer has a size or is flexible, the spacer does not occupy any space. if you want a small gap, consider using a separator instead. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

spinbuttons - Archive of obsolete content
| related ] spin buttons are two arrows, one to increase a value and one to decrease a value. spin buttons are not used as separate elements, but are used in combination with other elements to create a control that can be increased and decreased. for instance, spinbuttons are used for the number type textbox, and with the timepicker and datepicker. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

stack - Archive of obsolete content
ight="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. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

statusbar - Archive of obsolete content
placed along the bottom of a window. it is virtually equivalent to a standard box, but may be rendered differently. contains statusbarpanels. ...
...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. ...

<statusbarpanel> - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
...his 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. properties 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. ...

stringbundleset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for stringbundle elements. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

tabpanel - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a individual panel in a tabpanels element. this element is optional and you may just use any other container in place of it. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

template - Archive of obsolete content
ntainer or reference variable. if not specified, the variable specified in the uri attribute of the content tag in the template's first rule is used. member type: string may optionally be set to the variable to use as the member variable. if not specified, the variable specified in the uri attribute in the action body of the template's first rule is used. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

textnode - Archive of obsolete content
the value attribute. this is useful if you want to use the html element or other elements that have text content inside them instead of in attributes. this element does nothing outside of a template. attributes value examples (example needed) attributes value type: uri the text value to display. this value should be an rdf property (predicate). ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

titlebar - Archive of obsolete content
se()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 16px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") 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...
...enu, 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 note: the allowevents attribute did not work for title bars prior to firefox 3. ...

toolbargrippy - Archive of obsolete content
ibutes | properties | methods | related ] not in firefox the notch on the side of a toolbar which can be used to collapse and expand it. this element is used internally by the toolbar and should only be used directly when modifying its theme. more information is available in the xul tutorial. ...
..., 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 accessible type: nsiaccessible returns the accessibility object for the element. ...

toolbaritem - Archive of obsolete content
label="bus" selected="true"/> <menuitem label="train"/> </menupopup> </menulist> </toolbaritem> <toolbaritem id="sample-toolbutton-unified"> <toolbarbutton id="myext-button1" class="toolbarbutton-1" label="label1" /> <toolbarbutton id="myext-button2" class="toolbarbutton-1" label="labe2l" /> </toolbaritem> 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...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

toolbarpalette - Archive of obsolete content
y that overlays the toolbarpalette with the idbrowsertoolbarpalette. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

toolbarseparator - Archive of obsolete content
creates a separator between groups of toolbar items. it is functionally equivalent to a normal separator but some themes may apply a different appearance. ...
... 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. ...

toolbarset - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
..., 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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods addev...

toolbarspacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a space between toolbar items. ...
...serves, 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. ...

toolbarspring - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] firefox only a flexible space between toolbar items. ...
...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. ...

treechildren - Archive of obsolete content
d to define container rows in the tree. more information is available in the xul tutorial. attributes alternatingbackground attributes alternatingbackground obsolete since gecko 2.0 type: boolean if true, the background of the tree's rows will alternate between two colors. you can use the :-moz-tree-row css style to do this instead. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

treecol - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...
... 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. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ...

treecols - Archive of obsolete content
hods | related ] a group of treecol elements. there should one and only one treecols element in a tree. more information is available in the xul tutorial. attributes pickertooltiptext properties accessibletype examples (example needed) attributes pickertooltiptext type: string the text for the tooltip on the column picker. ...
...serves, 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. ...

treerow - Archive of obsolete content
d be placed in a treechildren element inside the parent treeitem. more information is available in the xul tutorial. attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

treeseparator - Archive of obsolete content
ce home [ examples | attributes | properties | methods | related ] used to place a separator row in a tree. attributes properties examples (example needed) attributes properties type: space-separated list of property names sets the properties of the element, which can be used to style the element. for more information, see styling a tree. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

triple - Archive of obsolete content
needed) attributes object type: string the object of the element. it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the element. it can be a variable reference or an rdf resource uri. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

vbox - Archive of obsolete content
s | methods | related ] a container element which can contain any number of child elements. this is equivalent to the box element, except it defaults to vertical orientation. more information is available in the xul tutorial. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

where - Archive of obsolete content
g value of subject must come after value alphabetically startswith the value of subject must start with the value endswith the value of subject must end with the value contains the value of subject must contain the value as a substring subject type: string the variable or string to compare. value type: string the value to compare. ...
...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 inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods inherited methods add...

Browser Feature Detection - Archive of obsolete content
ntop true true true marginright true true true marginbottom true true true marginleft true true true padding true true true paddingtop true true true paddingright 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.
...ntop', 'supported': false}, {name: 'marginright', 'supported': false}, {name: 'marginbottom', 'supported': false}, {name: 'marginleft', 'supported': false}, {name: 'padding', 'supported': false}, {name: 'paddingtop', 'supported': false}, {name: 'paddingright', 'supported': false}, {name: 'paddingbottom', 'supported': false}, {name: 'paddingleft', 'supported': false}, {name: 'textalign', 'supported': false}, {name: 'textdecoration', 'supported': false}, {name: 'textindent', 'supported': false}, {name: 'texttransform', 'supported': false}, {name: 'verticalalign', 'supported': false}, {name: 'whitespace', 'supported': false}, {name: 'width', 'supported': false}, {name: 'wordspacing', 'supported': false} ], 'domcss2': [ {name: 'azimuth', 'supported': false}, ...

Physics - Game development
ious update instructions remember to remove our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...
...our old method of adding values to x and y from the update() function: function update() { ball.x += 1; ball.y += 1; } we are now handling this properly, with a physics engine. ...

Scaling - Game development
he game scale to fit on any screen size automatically during the preload stage, so we don't have to worry about it later. the phaser scale object there's a special scale object available in phaser with a few handy methods and properties available. update your existing preload() function as follows: function preload() { game.scale.scalemode = phaser.scalemanager.show_all; game.scale.pagealignhorizontally = true; game.scale.pagealignvertically = true; } scalemode has a few different options available for how the canvas can be scaled: no_scale — nothing is scaled. exact_fit — scale the canvas to fill all the available space both vertically and horizontally, without preserving the aspect ratio. show_all — scales the canvas, but keeps the aspect ratio untouched, so images...
...— creates the canvas with the same size as the available width and height, so you have to place the objects inside your game dynamically; this is more of an advanced mode. user_scale — allows you to have custom dynamic scaling, calculating the size, scale and ratio on your own; again, this is more of an advanced mode the other two lines of code in the preload() function are responsible for aligning the canvas element horizontally and vertically, so it is always centered on screen regardless of size. adding a custom canvas background colour we can also add a custom background color to our canvas, so it won't stay black. the stage object has a backgroundcolor property for this purpose, which we can set using css color definition syntax. add the following line below the other three you ad...

2D maze game with device orientation - Game development
ne in the game. var ball = { _width: 320, _height: 480 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvertically = true; this.game.state.start('preloader'); } }; the main ball object is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the screen. we're loading two images first that will be used later in the preload st...
...ject is defined and we're adding two variables called _width and _height that are the width and the height of the game canvas — they will help us position the elements on the screen. we're loading two images first that will be used later in the preload state to show the progress of loading all the other assets. the create function holds some basic configuration: we're setting up the scaling and alignment of the canvas, and moving on to the preload state when everything's ready. preloader.js the preloader state takes care of loading all the assets: ball.preloader = function(game) {}; ball.preloader.prototype = { preload: function() { this.preloadbg = this.add.sprite((ball._width-297)*0.5, (ball._height-145)*0.5, 'preloaderbg'); this.preloadbar = this.add.sprite((ball._wi...

Introduction to CSS layout - Learn web development
isplay: flex to the parent, the three items now arrange themselves into columns. this is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. they are displayed in a row, because the initial value of flex-direction set on their parent is row. they all appear to stretch to the height of the tallest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220)...
...m of the table for styling purposes, even though the markup is before the <input> elements in the source. this allows for a nice bit of flexibility. ...

Styling links - Learn web development
cus()) — this is styled using the :focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url. this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.) # just links to the current page. you'll notice a few things...
...home</a></li><li><a href="#">pizza</a></li><li><a href="#">music</a></li><li><a href="#">wombats</a></li><li><a href="#">finland</a></li> </ul> and now our css: body,html { margin: 0; font-family: sans-serif; } ul { padding: 0; width: 100%; } li { display: inline; } a { outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color: black; } li:last-child a { margin-right: 0; } a:link, a:visited, a:focus { background: yellow; } a:hover { background: orange; } a:active { background: red; color: white; } this gives us the following result: let's explain what's going on here, focusing on the most interesting parts: our second rule removes the default padding from the <ul>...

Advanced form styling - Learn web development
nal check boxes: input[type="checkbox"] { -webkit-appearance: none; appearance: none; } we can use the :checked and :disabled pseudo-classes to change the appearance of our custom checkbox as its state changes: input[type="checkbox"] { position: relative; width: 1em; height: 1em; border: 1px solid gray; /* adjusts the position of the checkboxes on the text baseline */ vertical-align: -2px; /* set here so that windows' high-contrast mode can override */ color: green; } input[type="checkbox"]::before { content: "✔"; position: absolute; font-size: 1.2em; right: -1px; top: -0.3em; visibility: hidden; } input[type="checkbox"]:checked::before { /* use `visibility` instead of `display` to avoid recalculating layout */ visibility: visible; } input[type="chec...
... meters and progress bars <meter> and <progress> are possibly the worst of th...

How to build custom form controls - Learn web development
#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 { content : "▼"; /* we use the unicode character u+25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from ov...
...25bc; make sure to set a charset meta tag */ position: absolute; z-index : 1; /* this will be important to keep the arrow from overlapping the list of options */ top : 0; right : 0; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; text-align : center; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the values are smaller than the control, the list of options will be as wide...

Example - Learn web development
ass="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of...
...ith a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ }...

Images in HTML - Learn web development
s away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </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; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = texta...
...e focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> </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; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = texta...

From object to iframe — other embedding technologies - Learn web development
e focus away from the code area (tab 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...
...nificant security benefits when you're embedding content from a different origin (it can keep attackers from running arbitrary scripts through the plugin). ...

Index - Learn web development
n, modules, specifications, syntax css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood? this article explains what css is, with a simple syntax example, and also covers some key terms about the language. 140 css layout beginner, css, floating, grids, guide, landing, layout, learn, module, multiple column, positioning, alignment, flexbox, float, table at this point we've already looked at css fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. we have covered the necessary prerequisites so we can now dive deep into css layout, looking at differen...
... one of the most common things you'll do with css. here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. we round off the module by looking at applying custom fonts to your page, and styling lists and links. 161 fundamental text and font styling article, beginner, css, guide, style, text, alignment, family, font, shorthand, spacing, weight we hoped you enjoyed playing with text in this article! the next article will give you all you need to know about styling html lists. 162 styling links article, beginner, css, focus, guide, learn, links, pseudo-class, hover, hyperlinks, menus, tabs we hope this article has provided you with all you'll need to know about link...

Looping code - Learn web development
output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </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', functio...
...dmitted.textcontent = 'admit: '; refused.textcontent = 'refuse: ' // let i = 0; // refused.textcontent += ; // admitted.textcontent += ; </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(...

Making decisions in your code — conditionals - Learn web development
d="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } 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(...
... // add switch statement } function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; }</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(...

Arrays - Learn web development
in an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you...
... // empty the search input and focus it, ready for the next term to be entered searchinput.value = ''; searchinput.focus(); } } </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(...

Beginning our React todo list - Learn web development
4d4d; } .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 > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { ...
...rgin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg...

Starting our Svelte Todo list app - Learn web development
r-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn__primary:disabled { color: darkgrey; background-color:#565656; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550px) { ...
...rgin: 2rem 0 4rem 0; padding: 1rem; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { .todoapp { padding: 4rem; } } .todoapp > * { max-width: 50rem; margin-left: auto; margin-right: auto; } .todoapp > form { max-width: 100%; } .todoapp > h1 { display: block; max-width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } .label__lg { line-height: 1.01567; font-weight: 300; padding: 0.8rem; margin-bottom: 1rem; text-align: center; } .input__lg { padding: 2rem; border: 2px solid #000; } .input__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg...

Getting started with Svelte - Learn web development
ook at the svelte documentation. with this in mind, let's have a look at the src/app.svelte file that came with the starter template. you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script> section the <script> block contains javascript that runs when a component instance is created. variables declared (or impo...
...earn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following snippet should make sense: <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> we are applying a style to our <h1> element. what will happen other components with <h1> elements in them? in svelte, css inside a comp...

Styling Vue components with CSS - Learn web development
-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-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); cl...
...now we can go through and begin editing our components to use some of these styles. adding css classes in vue we should apply the button css classes to the <button> in our todoform component. since vue templates a...

Theme concepts
mage with an empty or transparent image. you would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as to create this effect here you specify the weta image like this: "images": { "theme_frame": "empty.png", "additional_backgrounds": [ "weta_for_tiling.png"] }, and the images tiling with: "properties": { "additional_backgrounds_alignment": [ "top" ], "additional_backgrounds_tiling": [ "repeat" ] }, full details of how to setup this theme can be found in the themes example weta_tiled. full detais of the alignment and tiling options can be found in the "theme" key description. alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header to create this...
...etais of the alignment and tiling options can be found in the "theme" key description. alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header to create this effect where the images are specified with: "images": { "theme_frame": "empty.png", "additional_backgrounds": [ "weta.png", "weta-left.png"] }, and their alignment by: "properties": { "additional_backgrounds_alignment": [ "right top" , "left top" ] }, full details of how to setup this theme can be found in the themes example weta_mirror. full details of the alignment options can be found in the "theme" key description. static animated themes it is possible to create an animated theme using an apng format image, as in the themes example animated. h...

Building SpiderMonkey with UBSan
1. compile a recent version of llvm & clang. 2. save the following bash script, fixing llvm_root to point to your installation. #! /bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermonkey. this enables all the cheap ...
...,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3. use the script to compile spidermonkey. ...

Mozilla Web Developer FAQ
octypes) is the best way to get consistent css layout results across different browsers. on the other hand, the quirks implemented in the quirks modes of different browsers vary from browser to browser. why are there gaps between image rows in tables when the layout engine is in the standards mode? in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers. these aspects of the layout can be changed by explicitly setting the display css property of the images (and possible surrounding <a> elements) to block. if the table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why...
... extension or by using the web sniffer. class names and ids are case-sensitive. the element selectors are case-sensitive with xml. style sheet processing instructions are only allowed in the prolog of xml documents. also, they only work in xml documents—not in documents served as text/html. width and height do not apply to non-replaced inline elements such as (by default) <span>. text-align: center; centers inline content within a block. it does not (and should not) center the block box itself. a block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block. it is also possible, although not very likely, that you are seeing a bug. javascript doesn’t work! why? some proprietary document obj...

Profiling with the Firefox Profiler
e browser back button can be used to restore the narrower range. thread timeline(s) thread/process timelines: below the tracing markers we have a list of profiled threads. these threads may come from different processes. in this case, we have the 'geckomain [default]' process' main thread, a content process' main thread, and the main thread of the compositor process. each of these timelines is aligned with wall clock time. so, for example, when a thread is blocked, like 'geckomain [tab]', on a thread like 'geckomain [default]', we can see what's occurring on the latter thread that is preventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with ...
...lock time. so, for example, when a thread is blocked, like 'geckomain [tab]', on a thread like 'geckomain [default]', we can see what's occurring on the latter thread that is preventing it from responding to the former. x (time) axis: the timelines go from left to right as wall clock time increases along the x axis. elements in the timeline are spaced at the sampling frequency with an attempt to align them with time. factors such as sampling or stack-walking variance and system load can lead to sampling delays which manifest as gaps in the timeline. note: because this is a sampling profiler, be cautious when examining running time that is equal to the sampling interval. for very time-sensitive profiling, you may want to consider a non-sampling profiler. y (stack) axis: the y axis is the st...

Building the WebLock UI
other, more sophisticated ways to do this; you may also want to include some ui that lets you view the white list or edit it as a list. in this part of the tutorial, however, we only provide the means of adding an url provided as a string (which is not checked for validity) and passing it through to the addsite api we defined in the earlier part of the tutorial. <separator class="thin"/> <hbox align="center"> <textbox id="url.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. the parent of the textbox that use...
...log id="weblock_mgg" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.input" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlayin...

nsIDOMXULElement
allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false. removes the attribute if you set it to false. boxobject nsiboxobject read only. gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specia...
... in gecko 1.9 (firefox 3) method overview void blur(); void click(); void docommand(); void focus(); nsidomnodelist getelementsbyattribute(in domstring name, in domstring value); nsidomnodelist getelementsbyattributens(in domstring namespaceuri, in domstring name, in domstring value); attributes attribute type description align domstring gets/sets the value of the element's align attribute. allowevents boolean true if the element's allowevents attribute is the string "true", otherwise false. removes the attribute if you set it to false. boxobject nsiboxobject read only. gets or creates a box object for the element; browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional prope...

AbstractRange - Web APIs
bstract interface, you will not directly instantiate an object of type abstractrange. instead, you will use the range or staticrange interfaces. to understand the difference between those two interfaces, and how to choose which is appropriate for your needs. ...
...a collapsed range is one whose start position and end position are the same, resulting in a zero-character-long range. endcontainer read only the dom node in which the end of the ran...

Basic animations - Web APIs
time :<span id="time">0</span> </div> <div>lousygames ©</div> <div> score :<span id="score">0</span> </div> <div class="touch off" onclick="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @key...
... display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { opacity: 0 } } .keypress>div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; ...

DataTransferItem.webkitGetAsEntry() - Web APIs
ablishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. ...
...elow!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into...

Element.hasAttributeNS() - Web APIs
t = element.hasattributens(namespace,localname) result is the boolean value true or false. namespace is a string specifying the namespace of the attribute. localname is the name of the attribute. ...
...mespace,localname) result is the boolean value true or false. namespace is a string specifying the namespace of the attribute. localname is the name of the attribute. ...

Element.removeAttribute() - Web APIs
living standard ...
... living standard ...

Element.removeAttributeNS() - Web APIs
terface removes the specified attribute from an element. syntax element.removeattributens(namespace, attrname); parameters namespace is a string that contains the namespace of the attribute. attrname is a string that names the attribute to be removed from the current node. ...
... a string that contains the namespace of the attribute. attrname is a string that names the attribute to be removed from the current node. ...

Element.scrollIntoViewIfNeeded() - Web APIs
window if it's not already within the visible area of the browser window. if the element is already within the visible area of the browser window, then no scrolling takes place. this method is a proprietary variation of the standard element.scrollintoview() method. ...
...e visible area of the browser window, then no scrolling takes place. this method is a proprietary variation of the standard element.scrollintoview() method. syntax todo parameters opt_center is an optional boolean value with a default value of true: if true, the element will be aligned so it is centered within the visible area of the scrollable ancestor. if false, the element will be aligned to the nearest edge of the visible area of the scrollable ancestor. depending on which edge of the visible area is closest to the element, either the top of the element will be aligned to the top edge of the visible area, or the bottom edge of the element will be aligned to the bottom edge of the visible area. example var element = document.getelementbyid("my-el"); element.scrollintovie...

Element.setAttributeNodeNS() - Web APIs
setattributenodens adds a new namespaced attribute node to an element. syntax replacedattr = element.setattributenodens(attributenode) replacedattr is the replaced attribute node, if any, returned by this function. attributenode is an attr node. ...
...urned by this function. attributenode is an attr node. example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.getelementbyid("one"); var d2 = document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced with the new one and the replaced one is returned. note that if you try to set without cloning the node, mozilla gives an ns_error_dom_inuse_attribute_err "attribute already in use" error, as the dom ...

EventTarget - Web APIs
targets, but other objects can be event targets, too. for example xmlhttprequest, audionode, audiocontext, and others. many event targets (including elements, documents, and windows) also support setting event handlers via onevent properties and attributes. ...
... methods eventtarget.addeventlistener() registers an event handler of a specific event type on the eventtarget. eventtarget.removeeventlistener() removes an event listener from the eventtarget. event...

FileSystemDirectoryReader.readEntries() - Web APIs
ablishes the drop zone itself, which is a <div> element with the id "dropzone", and an unordered list element with the id "listing". <p>drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. ...
...elow!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into...

HTMLDetailsElement - Web APIs
the htmldetailselement interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <details> elements. ...
... htmldetailselement.open is a boolean reflecting the open html attribute, indicating whether or not the element’s contents (not counting the <summary>) is to be shown to the user. methods no specific met...

HTMLDialogElement - Web APIs
the htmldialogelement interface provides methods to manipulate <dialog> elements. it inherits properties and methods from the htmlelement interface. ...
... htmldialogelement.open a boolean reflecting the open html attribute, indicating whether the dialog is available for interaction. htmldialogelement.returnvalue a domstring that sets or returns the return val...

HTMLMarqueeElement - Web APIs
the htmlmarqueeelement interface provides methods to manipulate <marquee> elements. it inherits properties and methods from the htmlelement interface. ...
... htmlmarqueeelement.behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. htmlmarqueeelement.bgcol...

Ajax navigation example - Web APIs
it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</...
...it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav"...

Intersection Observer API - Web APIs
gb(201, 126, 17); padding: 4px; margin-bottom: 6px; } #box1 { height: 200px; } #box2 { height: 75px; } #box3 { height: 150px; } #box4 { height: 100px; } .label { font: 14px "open sans", "arial", sans-serif; position: absolute; margin: 0; background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.7); width: 3em; height: 18px; padding: 2px; text-align: center; } .topleft { left: 2px; top: 2px; } .topright { right: 2px; top: 2px; } .bottomleft { bottom: 2px; left: 2px; } .bottomright { bottom: 2px; right: 2px; } let observers = []; startup = () => { let wrapper = document.queryselector(".wrapper"); // options for the observers let observeroptions = { root: null, rootmargin: "0px", threshold: [] }; ...
... lays out the element and establishes that the background-color and border attributes can participate in css transitions, which we'll use to affect the changes to the element as it becomes more or less obscured. #box { background-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; padding: 20px; } .vertical { color: white; font: 32px "arial"; } .extra { width: 350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: center; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen. setting up firs...

MediaStreamConstraints.audio - Web APIs
w to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getuser...
...w to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getuser...

MediaStreamConstraints.video - Web APIs
w to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getuser...
...w to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getuser...

PerformanceFrameTiming - Web APIs
cation can register a performanceobserver for "frame" performance entry types and the observer can retrieve data about the duration of each frame event. this information can be used to help identify areas that take too long to provide a good user experience. ...
... performanceentry.name ...

RTCDtlsTransport - Web APIs
ion's data channels. features of the dtls transport include the addition of security to the underlying transport; the rtcdtlstransport interface can be used to obtain information about the underlying transport and the security added to it by the dtls layer. ...
...splay: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information which describes a datagram trans...

SVGAltGlyphDefElement - Web APIs
the svgaltglyphdefelement interface corresponds to the <altglyphdef> element. ...
... properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement. methods this interface doesn't implement any specific methods, but i...

SVGAltGlyphItemElement - Web APIs
the svgaltglyphitemelement interface corresponds to the <altglyphitem> element. ...
... properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement. methods this interface doesn't implement any specific methods, but ...

SVGAnimateColorElement - Web APIs
the svganimatecolorelement interface corresponds to the <animatecolor> element. ...
... methods this interface has no methods but inherits methods from its parent, svganimationelement. specifications specification status comment ...

SVGExternalResourcesRequired - Web APIs
the svgexternalresourcesrequired interface defines an interface which applies to all elements where this element or one of its descendants can reference an external resource. ...
... properties svgexternalresourcesrequired.externalresourcesrequired corresponds to the externalresourcesrequired attribute of the given element. note: the svg dom defines the attribute exter...

SVGFilterPrimitiveStandardAttributes - Web APIs
the svgfilterprimitivestandardattributes interface defines the set of dom attributes that are common across the filter primitive interfaces. ...
... svgfilterprimitivestandardattributes.y read only an svganimatedlength corresponding to the y attribute of the g...

SVGFontElement - Web APIs
the svgfontelement interface corresponds to the <font> elements. object-oriented access to the attributes of the <font> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement and implements...

SVGFontFaceElement - Web APIs
the svgfontfaceelement interface corresponds to the <font-face> elements. object-oriented access to the attributes of the <font-face> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vector...

SVGFontFaceFormatElement - Web APIs
the svgfontfaceformatelement interface corresponds to the <font-face-format> elements. object-oriented access to the attributes of the <font-face-format> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable ...

SVGFontFaceNameElement - Web APIs
the svgfontfacenameelement interface corresponds to the <font-face-name> elements. object-oriented access to the attributes of the <font-face-name> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable ve...

SVGFontFaceSrcElement - Web APIs
the svgfontfacesrcelement interface corresponds to the <font-face-src> elements. object-oriented access to the attributes of the <font-face-src> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vec...

SVGFontFaceUriElement - Web APIs
the svgfontfaceurielement interface corresponds to the <font-face-uri> elements. object-oriented access to the attributes of the <font-face-uri> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vec...

SVGGlyphElement - Web APIs
the svgglyphelement interface corresponds to the <glyph> element. object-oriented access to the attributes of the <glyph> element via the svg dom is not possible. ...
... properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement. methods this interface doesn't implement any specific methods, but inherit...

SVGGlyphRefElement - Web APIs
the svgglyphrefelement interface corresponds to the <glyphref> elements. ...
... svgglyphrefelement.glyphref a domstring corresponding to the glyphref attribute of the given element. svgglyphrefelement.for...

SVGHKernElement - Web APIs
the svghkernelement interface corresponds to the <hkern> elements. object-oriented access to the attributes of the <hkern> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vector gr...

SVGMeshElement - Web APIs
the svgmeshelement interface provides access to the properties of <mesh> elements. ...
... methods this interface doesn't implement any specific methods, but inherits methods ...

SVGMissingGlyphElement - Web APIs
the svgmissingglyphelement interface corresponds to the <missing-glyph> elements. object-oriented access to the attributes of the <missing-glyph> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement and implements methods from svgstylable...

SVGPreserveAspectRatio - Web APIs
spectratio interface corresponds to the preserveaspectratio attribute, which is available for some of svg's elements. an svgpreserveaspectratio object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...defined types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_meetorslice_meet 1 corresponds to value meet for attribute preserveaspectratio. svg_meetorslice_slice 2 corresponds to value slice for attribute preserveaspectratio. properties name type description align unsigned short the type of the alignment value as specified by one of the svg_preserveaspectratio_* constants defined on this interface. meetorslice unsigned short the type of the meet-or-slice value as specified by one of the svg_meetorslice_* constants defined on this interface. exceptions on setting: a domexception with code no_modification_allowed_err is raised on ...

SVGRect - Web APIs
ir identifying a minimum x value, a minimum y value, and a width and height, which are constrained to be non-negative. an svgrect object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown. ...
...if the attribute is not specified, the effect is as if a value of 0 were specified. svgrect.y the exact effect of this coordinate depends on each element.if the attribute is not specified, the eff...

SVGRenderingIntent - Web APIs
the svgrenderingintent interface defines the enumerated list of possible values for rendering-intent attributes or descriptors. ...
... constants name value description rendering_intent_unknown 0 the type is not one of predefined types. it is invalid to attempt to define a new value of this type or to attempt ...

SVGSolidcolorElement - Web APIs
the svgsolidcolorelement interface corresponds to the <solidcolor> element. ...
... methods this interface doesn't implement any specific methods, but inherits methods from its parent interface, svgelement. ...

SVGTRefElement - Web APIs
the svgtrefelement interface corresponds to the <tref> elements. object-oriented access to the attributes of the <tref> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgtextpositioningelement and implement...

SVGURIReference - Web APIs
the svgurireference interface is used to reflect the href attribute and the deprecated xlink:href attribute. ...
...on getting href, an svganimatedstring object is returned that reflect...

SVGUnitTypes - Web APIs
the svgunittypes interface defines a commonly used set of constants used for reflecting gradientunits, patterncontentunits and other similar attributes. ...
...it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_unit_type_userspaceon...

SVGVKernElement - Web APIs
the svgvkernelement interface corresponds to the <vkern> elements. object-oriented access to the attributes of the <vkern> element via the svg dom is not possible. ...
... methods this interface has no methods but inherits methods from its parent, svgelement. specifications specification status comment scalable vector gr...

SVGZoomAndPan - Web APIs
the svgzoomandpan interface is used to reflect the zoomandpan attribute, and is mixed in to other interfaces for elements that support this attribute. ...
...it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_zoomandpan_disable ...

StylePropertyMap - Web APIs
the stylepropertymap interface of the the css typed object model api provides a representation of a css declaration block that is an alternative to cssstyledeclaration. ...
... methods inherits methods from its parent, stylepropertymapreadonly. stylepropertymap.append() adds a new css declaration to the stylepropertymap with the given property and value. styleproperty...

TextMetrics - Web APIs
piece of text in the canvas; a textmetrics() instance can be retrieved using the canvasrenderingcontext2d.measuretext() method. properties textmetrics.width read only is a double giving the calculated width of a segment of inline text in css pixels. it takes into account the current font of the context. ...
... be retrieved using the canvasrenderingcontext2d.measuretext() method. properties textmetrics.width read only is a double giving the calculated width of a segment of inline text in css pixels. it takes into account the current font of the context. textmetrics.actualboundingboxleft read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the left side of the bounding rectangle of the given text, in css pixels. the distance is measured parallel to the baseline. textmetrics.actualboundingboxright read only is a double giving the distance from the alignment point given by the canvasrenderingcontext2d.textalign property to the right side of the bounding rectangle of the given text, in css pixels. the distance is measur...

WebGLRenderingContext.pixelStorei() - Web APIs
ame, param); parameters pname a glenum specifying which parameter to set. see below for possible values. param a glint specifying a value to set the pname parameter to. see below for possible values. return value none. pixel storage parameters parameter name (for pname) description type default value allowed values (for param) specified in gl.pack_alignment packing of pixel data into memory glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_alignment unpacking of pixel data from memory. glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_webgl flips the source data along its vertical axis if true. glboolean false true, false webgl gl.unpack_premultiply_alpha_webgl multiplies the al...
...xel is read from memory glint 0 0 to infinity opengl es 3.0 examples setting the pixel storage mode affects the webglrenderingcontext.readpixels() operations, as well as unpacking of textures with the webglrenderingcontext.teximage2d() and webglrenderingcontext.texsubimage2d() methods. var tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.pack_alignment, 4); to check the values for packing and unpacking of pixel data, you can query the same pixel storage parameters with webglrenderingcontext.getparameter(). gl.getparameter(gl.pack_alignment); gl.getparameter(gl.unpack_alignment); specifications specification status comment webgl 1.0the definition of 'pixelstorei' in that specification. recommendation initi...

Geometry and reference spaces in WebXR - Web APIs
ecision floating-point value specifying the time in milliseconds relative to the starting time. since the value is a floating-point number, it may be accurate to well better than the millisecond level, depending on the platform and hardware. time is primarily used to determine the amount of time that's elapsed since the scene's previous animation frame was drawn. as such the time is typically in alignment with the refresh rate of the display, or some fraction thereof if the frame rate needs to be constrained due to performance issues. this means that the time will usually step in 1/60th of a second intervals, assuming a 60 fps frame rate. doing the math, we find that this means that each frame will ideally be rendered 16.6667 milliseconds apart. geometry operations with matrices we offer a g...
...in point for the space's local coordinate system. the directionality of the coordinate system can be seen in the following diagram: an xrrigidtransform called the origin offset is used to transform points from the space's own effective coordinate system to the xr device's native coordinate system. the origin offset is initially simply an identity transform, since typically the two origins are aligned when the space is first established. however, as changes in alignment accumulate over time the origin offset may change to compensate. the position of a point in space relative to the origin is determined by determining its distance along each of the three spatial axes shown in the diagram above. the space's origin is the point (0, 0, 0), at the center of the space and at the zero position alo...

Example and tutorial: Simple synth keyboard - Web APIs
</select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { ...
...ter; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline;...

Window.devicePixelRatio - Web APIs
nt for extra pixel density). var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas. canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels. ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fillrect(10, 10, 300, 300); ctx.fillstyle = "#ffffff"; ctx.font = '18px arial'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; var x = size / 2; var y = size / 2; var textstring = "i love mdn"; ctx.filltext(textstring, x, y); monitoring screen resolution or zoom level changes in this example, we'll set up a media query and watch it to see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to. javascript the ...
...on the value of the property <code>window.devicepixelratio</code>. try it and watch what happens!</p> </div> <div class="pixel-ratio"></div> </div> css body { font: 22px arial, sans-serif; } .container { top: 2em; width: 22em; height: 14em; border: 2px solid #22d; margin: 0 auto; padding: 0; background-color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object model (cssom) view modulethe definition of 'window.devicepixelratio' in that specification. working draft initial definit...

Window - Web APIs
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. ...
... domparser domparser can parse xml or html source stored in a string into a dom document. domparser is specified in dom parsing and serialization. image used for creating an htmlimageelement. option used for creating an htmloptioneleme...

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

Color contrast - Accessibility
<div class="bad">bad contrast</div> div { /* general div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
...make the color contrast as good as it can be within your design constraints — ideally go ...

:target - CSS: Cascading Style Sheets
<figcaption>cras risus odio, pharetra nec ultricies et, mollis ac augue. nunc et diam quis sapien dignissim auctor. ...
...s: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status ...

shape - CSS: Cascading Style Sheets
the shape css media feature can be used to test the shape of the device to distinguish recrangular and round displays. syntax the shape descrete feature is specified as one of two acceptable strings, either rect reprsenting a rectangular screen or round representing a circular, oval or elliptical screen. rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate. ...
...l or elliptical screen. rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. examples basic example html <h1>hello world!</h1> css h1 { text-align: left; } @media (shape: rect) { h1 { text-align: left; } } @media (shape: round) { h1 { text-align: center; } } custom stylesheet this html will apply a special stylesheet for devices that have round screens. <head> <link rel="stylesheet" href="default.css" /> <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> <link media="screen and ...

CSS Display - CSS: Cascading Style Sheets
isplay css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout methods line-based placement grid t...
... candidate recommendation added run-in, flow, flow-root, content...

Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
alues of display normally trigger the creation of anonymous boxes around the original box. if such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. for example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - 4. flex items the vertical-align property the live example below demonstrates use of the vertical-align property along with display: inline-block. both display: table-cell and display: inline-block allow for the use of this property. use of vertical-align enables vertical alignment prior to flexbox. the property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fal...
... feature queries and flexbox you can use feature queries to detect flexbox support: @supports (display: flex) { // code for supporting browsers } note that internet explorer 11 does not support feature queries yet does support flexbox. ...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
d. grid also contains an algorithm to control the placement of items not given an explicit position on the grid. creation of additional tracks to hold content you can define an explicit grid with grid layout. the grid layout specification is flexible enough to add additional rows and columns when needed. features such as adding “as many columns that will fit into a container” are included. alignment control grid contains alignment features so we can control how the items align once placed into a grid area, and how the entire grid is aligned. control of overlapping content more than one item can be placed into a grid cell or area and, they can partially overlap each other. this layering may then be controlled with the z-index property. grid is a powerful specification that, when comb...
...5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .box1 { grid-column: 1 / 4; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } in this case the nested grid has no relationship to the parent. as you can see in the example it has not inherited the grid-gap of the parent and the lines in the nested grid do not align to the lines in the parent grid. subgrid in the working draft of the level 2 grid specification there is a feature called subgrid, which would let us create nested grids that use the track definition of the parent grid. note: this feature shipped in firefox 71, which is currently the only browser to implement subgrid. in the current specification, we would edit the above nested grid example...

CSS Grid Layout - CSS: Cascading Style Sheets
however, many more layouts are either possible or easier with css grid than they were with tables. for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. ...
...() minmax() fit-content() css data types <flex> glossary entries grid grid lines grid tracks grid cell grid area gutters grid axis grid row grid column guides basic concepts of grid layout relationship of grid layout to other layout methods layout using line-based placement grid template areas layout using named grid lines auto-placement in css grid layout box alignment in css grid layout css grid, logical values and writing modes css grid layout and accessibility css grid and progressive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspect...

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
o the top, right, bottom, left, etc. the logical properties and values specification defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. start and end as opposed to left and right/top and bottom. an example of why these mappings might be needed is as follows. i have a layout using css grid, the grid container has a width applied and i am using the align-self and justify-self properties to align the items. these properties are flow relative — justify-self: start aligns the item to the start on the inline dimension, align-self: start does the same on the block dimension. if i now change the writing mode of this component to vertical-rl using the writing-mode property, the alignment continues to work in the same way. the inline dimension is no...
...ting modes for creative reasons, being able to relate to the flow of the content makes a lot of sense. block and inline dimensions a key concept of working with flow relative properties and values is the two dimensions of block and inline. as we saw above, newer css layout methods such as flexbox and grid layout use the concepts of block and inline rather than right and left/top and bottom when aligning items. the inline dimension is the dimension along which a line of text runs in the writing mode in use. therefore, in an english document with the text running horizontally left to right, or an arabic document with the text running horizontally right to left, the inline dimension is horizontal. switch to a vertical writing mode (e.g. a japanese document) and the inline dimension is now verti...

Stacking with floated blocks - CSS: Cascading Style Sheets
about z-index). ...
...> <b>div #5</b><br />position: absolute;</div> css div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-color: #ffc; margin: 0px 10px 0px 10px; text-align: left; } #flo1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #flo2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed #090; background-color: #cfc; } #abs2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px ...

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document. this can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications. basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align. the scroll-snap-type property is used on the scroll container to state the type and direction of scrolling. the scroll-snap-align property must be used on child elements in order to set the position that scrolling will snap to. the below example demonstrates scroll snapping along the y axis, with scroll-snap-align used on the section element to dictate the point the scrolling should stop. using scroll-snap-type the scroll-snap...
...ld be carefully considered and only used in situations where you know how much content is on the screen at any one time. the proximity value will only snap to a position when it is close by, the exact distance being left to the browser to decide. in the example below you can change the value between mandatory and proximity to see the effect this has on the scroll experience. using scroll-snap-align the scroll-snap-align property can take a value of start, end, or center — indicating the point the content should snap to in the scroll container. in the below example you can change the value of scroll-snap-align to see how this changes the scroll behavior. padding the scroll container if you do not want the content to snap right to the edge of the scroll container you can use the scroll...

Column layouts - CSS: Cascading Style Sheets
ll distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. this is why flexbox is described as one-dimensional. it is designed for controlling layout as a row or a column, but not both at the same time. download this example use flexbox: for single rows or columns of items. when you want to do alignment on the cross axis after laying out your items. when you are happy for wrapped items to share out space along their line only and not line up with items in other lines. lining items up in rows and columns — grid layout if what you want is a layout where items line up in rows and columns then you should choose css grid layout. grid layout works on the direct children of the grid container...
...e css grid layout. grid layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with css grid you can line your items up in rows and columns — it is described as two-dimensional. download this example use grid: for multiple rows or columns of items. when you want to be able to align the items on the block and inline axes. when you want items to line up in rows and columns. ...

Grid wrapper - CSS: Cascading Style Sheets
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. ...
... accessibility concerns although grid enables us to position items anwhere (within reason), it is important when placing items using css grid that your underlying markup follows a logical order (see css grid layout and accessibility for more details). ...

CSS Layout cookbook - CSS: Cascading Style Sheets
media objects a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. css grid, float fallback, fit-content() sizing columns when to choose multi-column layout, flexbox or grid for your columns. css grid, multicol, flexbox center an element how to center an item horizontally and vertically. flexbox, box alignment sticky footers creating a footer which sits at the bottom of the container or viewport when the content is shorter. css grid, flexbox split navigation a navigation pattern where some links are visually separated from the others. flexbox, margin breadcrumb navigation creating a list of links to allow the visitor to navigate back up through the page hi...
... is shorter. css grid, flexbox split navigation a navigation pattern where some links are visually separated from the others. flexbox, margin breadcrumb navigation creating a list of links to allow the visitor to navigate back up through the page hierarchy. flexbox list group with badges a list of items with a badge to display a count. flexbox, box alignment pagination links to pages of content (such as search results). flexbox, box alignment card a card component, which displays in a grid of cards. grid layout grid wrapper for aligning grid content within a central wrapper, while also allowing items to break out. css grid contribute a recipe as with all of mdn we would love you to contribute a...

Replaced elements - CSS: Cascading Style Sheets
rty are anonymous replaced elements. they are "anonymous" because they don't exist in the html markup. using css with replaced elements css handles replaced elements specifically in some cases, like when calculating margins and some auto values. note that some replaced elements, but not all, have intrinsic dimensions or a defined baseline, which is used by some css properties, such as vertical-align. only replaced elements can ever have intrinsic dimensions. controlling object position within the content box certain css properties can be used to specify how the object contained within the replaced element should be positioned within the element's box area. these are defined by the css images module level 3 and css images module level 4 specifications: object-fit specifies how the repla...
... ...

backdrop-filter - CSS: Cascading Style Sheets
a-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... editor's draft initial...

backface-visibility - CSS: Cascading Style Sheets
ner { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-...
... editor's draft initial definition. ...

background-position-x - CSS: Cascading Style Sheets
nd-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* multiple values */ background-position-x: 0px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas. values left aligns the left edge of the background image with the left edge of the background position layer. center aligns the center of the background image with the center of the background position layer. right aligns the right edge of the background image with the right edge of the background position layer. <length> the offset of the given background image's left vertical edge from the background posit...
... edge of the background position layer. <length> the offset of the given background image's left vertical edge from the background position layer's left vertical edge. (some browsers allow assigning the right edge for offset). <percentage> the offset of the given background image's horizontal position relative to the container. a value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image. formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea li...

background-position-y - CSS: Cascading Style Sheets
-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas. values top aligns the top edge of the background image with the top edge of the background position layer. center aligns the vertical center of the background image with the vertical center of the background position layer. bottom aligns the bottom edge of the background image with the bottom edge of the background position layer. <length> the offset of the given background image's horizontal edge from the ...
...he background position layer. <length> the offset of the given background image's horizontal edge from the corresponding background position layer's top horizontal edge. (some browsers allow assigning the bottom edge for offset). <percentage> the offset of the given background image's vertical position relative to the container. a value of 0% means that the top edge of the background image is aligned with the top edge of the container, and a value of 100% means that the bottom edge of the background image is aligned with the bottom edge of the container, thus a value of 50% vertically centers the background image. formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea lis...

caption-side - CSS: Cascading Style Sheets
this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. right the caption box should be positioned on the right side of the table. this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. ...
... the css 2.1 specification notes that the css 2 specification described a different behavior for the bottom value, which will be reintroduced by this value in a future specification. ...

column-gap (grid-column-gap) - CSS: Cascading Style Sheets
een an element's columns. 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. initially a part of multi-column layout, the definition of column-gap has been broadened to include multiple layout methods. now specified in box alignment, it may be used in multi-column, flexible box, and grid layouts. css grid layout initially defined the grid-column-gap property. this prefixed property is being replaced by column-gap. however, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property. syntax /* keyword value */ column-gap: normal; /* <length> v...
...ound-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css `column-gap` property. don't you think that's fun and exciting? i sure do! </p> css .content-box { column-count: 3; column-gap: 40px; } result specifications specification status comment css box alignment module level 3the definition of 'column-gap' in that specification. working draft applies to grid and flexbox css grid layoutthe definition of 'column-gap' in that specification. candidate recommendation specifies how this property affects grid layouts css multi-column layout modulethe definition of 'column-gap' in that specification. working draft initial ...

display - CSS: Cascading Style Sheets
. in addition, see the following material, which covers the various values of display in depth. ...
...this will cause the element and all its descendant elements to no longer be announced by scr...

object-fit - 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 the object-fit property is specified as a single keyword chosen from the list of values below. ...
...own</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification ...

perspective-origin - CSS: Cascading Style Sheets
*/ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90d...
... editor's draft initial definition. ...

perspective - CSS: Cascading Style Sheets
dth: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-...
... editor's draft initial definition ...

ruby-position - CSS: Cascading Style Sheets
o support nosafari no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).webview android no support nochrome android no support nofirefox android full support 38opera android no support nosafari ios no support nonotes no s...
...pport nosafari ios no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).samsung internet android no support nointer-character experimentalchrome no support noedge no support nofirefox no support noie no support noopera no ...

scroll-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis. /* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap point. ...
... <div>2</div> <div>3</div> </div> </div> </div> css #container { display: flex; } #container > div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard...

scroll-snap-destination - CSS: Cascading Style Sheets
/* <position> value */ scroll-snap-destination: 400px 600px; /* global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
... ...

scroll-snap-stop - CSS: Cascading Style Sheets
sition; and must snap to the first of this elements' snap positions. formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances. ...
...l-snap-stop: always; } .proximity-scroll-snapping > div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { ...

scroll-snap-type - CSS: Cascading Style Sheets
lass="container y mandatory-scroll-snapping" dir="rtl"> <div>y mand. rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <div class="container y proximity-scroll-snapping" dir="rtl"> <div>y prox. ...
...owrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container > div { text-align: center; scroll-snap-align: center; flex: none; } .x.container > div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { ...

text-justify - CSS: Cascading Style Sheets
the text-justify css property sets what type of justification should be applied to text when text-align: justify; is set on an element. text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* deprecated value */ syntax the text-justify property is specified as a single keyword chosen from the list of values below. values none the text justification is turned off. this has the same effect as not setting text-align at all, although it is useful if you need to turn justification on and off for some reason. auto the browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., english...
...<code>text-justify: inter-character</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> p { font-size: 1.5em; border: 1px solid black; padding: 10px; width: 95%; margin: 10px auto; text-align: justify; } .none { text-justify: none; } .auto { text-justify: auto; } .dist { text-justify: distribute; } .word { text-justify: inter-word; } .char { text-justify: inter-character; } specifications specification status comment css text module level 3the definition of 'text-justify' in that specification. working draft ...

zoom - CSS: Cascading Style Sheets
this property originated in internet explorer. apple has a description in the safari css reference. rossen atanassov o...
...this property originated in internet explorer. apple has a description in the safari css reference. rossen atanassov of microsoft has an unoffic...

Rich-Text Editing in Mozilla - Developer guides
c="data:image/gif;base64,r0lgodlhfgawakedaaaaaf9vj5wibf///yh5baeaaamalaaaaaawabyaaaijni+py+0po5x0gxvruekhrf2bb1yicwgbmfiypsbytnd2uwaaow==" /> <img class="intlink" title="underline" onclick="formatdoc('underline');" src="data:image/gif;base64,r0lgodlhfgawakecaaaaaf9vj////////yh5baeaaaialaaaaaawabyaaairli+py+0po5zugasezveel4ea15eijj5psqjmuwkbekgxvuxwtun+dwxccga7" /> <img class="intlink" title="left align" onclick="formatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="center align" onclick="formatdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" t...
...ormatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="center align" onclick="formatdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intlink" title="numbered list" onclick="formatdoc('insertorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaadljwlie35gjuaezxtha7p///////yh5baeaaacalaaaaaawabyaaam2elrc/jdksespwjorfvggcbubotfbeq6qiaysqnrha...

Making content editable - Developer guides
c="data:image/gif;base64,r0lgodlhfgawakedaaaaaf9vj5wibf///yh5baeaaamalaaaaaawabyaaaijni+py+0po5x0gxvruekhrf2bb1yicwgbmfiypsbytnd2uwaaow==" /> <img class="intlink" title="underline" onclick="formatdoc('underline');" src="data:image/gif;base64,r0lgodlhfgawakecaaaaaf9vj////////yh5baeaaaialaaaaaawabyaaairli+py+0po5zugasezveel4ea15eijj5psqjmuwkbekgxvuxwtun+dwxccga7" /> <img class="intlink" title="left align" onclick="formatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="center align" onclick="formatdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" t...
...ormatdoc('justifyleft');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jmgelkgyxo+qzl4nkyxaaaow==" /> <img class="intlink" title="center align" onclick="formatdoc('justifycenter');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaifhi+py+0po5y02ouz3jl4d4jogi7kaz5bqn4sycvbaqa7" /> <img class="intlink" title="right align" onclick="formatdoc('justifyright');" src="data:image/gif;base64,r0lgodlhfgawaid/amdawaaaach5baeaaaaalaaaaaawabyaqaighi+py+0po5y02ouz3jl4d4jqgdlkgyxouqzl43jyvgaaow==" /> <img class="intlink" title="numbered list" onclick="formatdoc('insertorderedlist');" src="data:image/gif;base64,r0lgodlhfgawamigaaaaadljwlie35gjuaezxtha7p///////yh5baeaaacalaaaaaawabyaaam2elrc/jdksespwjorfvggcbubotfbeq6qiaysqnrha...

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
p of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...
...edge of the element. this border is a solid line, 6 pixels wide, in the color mediumturquoise. our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties: .box { width: 290px; height: 100px; margin: 0; padding: 4px 6px; font: 28px "marker felt", "zapfino", cursive; display: flex; justify-content: center; align-items: center; } in brief, .box establishes the size of each box, as well as the configuration of the font used within. we also take advantage of css flexbox to easily center the contents of each box. we enable flex mode using display: flex, and set both justify-content and align-items to center. then we can create a class for each of the two boxes that defines the properties that differ between...

<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
categories flow content, phrasing content, embedded content, interactive content, palpable content. permitted content zero or more <param> elements, then transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. dom interface htmlappletelement attributes align this attribute is used to position the applet on the page relative to content that might flow around it. the html 4.01 specification defines values of bottom, left, middle, right, and top, whereas microsoft and netscape also might support absbottom, absmiddle, baseline, center, and texttop. alt this attribute causes a descriptive text alternate to be displayed on browsers that do not support j...
...ternet explorer 4 and higher, this attribute specifies a url for an associated file for the applet. the meaning and use is unclear and not part of the html standard. vspace this attribute specifies additional vertical space, in pixels, to be reserved above and below the applet. width this attribute specifies in pixels the width that the applet needs. example html <applet code="game.class" align="left" archive="game.zip" height="250" width="350"> <param name="difficulty" value="easy"> <b>sorry, you need java to play this game.</b> </applet> specifications specification status comment html 5.2the definition of '<applet>' in that specification. recommendation html 5.1the definition of '<applet>' in that specification. recommendation ...

<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete html center element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. the container is usually, but isn't required to be, <body>. this tag has been deprecated in html 4 (and xhtml 1) in favor of the css text-align property, which can be applied to the <div> element or to an individual <p>. for centering blocks, use other css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <center>this text will be centered. <p>so will this paragraph.</p></center> exa...
...margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <center>this text will be centered. <p>so will this paragraph.</p></center> example 2 (css alternative) <div style="text-align:center">this text will be centered. <p>so will this paragraph.</p></div> example 3 (css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:center to a <div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged. ...

<div>: The Content Division element - HTML: Hypertext Markup Language
ents. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content. or (in whatwg html): <dl> element. implicit aria role no corresponding role permitted aria roles any dom interface htmldivelement attributes this element includes the global attributes. note: the align attribute is obsolete; do not use it anymore. instead, you should use css properties or techniques such as css grid or css flexbox to align and position <div> elements on the page. usage notes the <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate. examples a simple example <div> <p>any kind of content here. such as &lt;p&gt;,...
... recommendation ...

<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
tent none, it is an empty element. tag omission it must have start tag, but must not have an end tag. permitted parents any element that accepts flow content. implicit aria role separator permitted aria roles presentation or none dom interface htmlhrelement attributes this element's attributes include the global attributes. align sets the alignment of the rule on the page. if no value is specified, the default value is left. color sets the color of the rule through color name or hexadecimal value. noshade sets the rule to have no shading. size sets the height, in pixels, of the rule. width sets the length of the rule on the page through a pixel or percentage value. example html <p> this is the fir...
... </p> result specifications specification status comment html living standardthe definition of '<hr>' in that specification. living standard definition of the <hr> element html5the definition of '<hr>' in that specification. recommendation html 4.01 specificationthe definition of '<hr>' in that specification. recommendation the align, noshade, size, and width attributes are deprecated ...

<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
embed, overriding the src attribute. if a browser does not support the srcdoc attribute, it will fall back to the url in the src attribute. width the width of the frame in css pixels. default is 300. deprecated attributes these attributes are deprecated and may no longer be supported by all user agents. you should not use them in new content, and try to remove them from existing content. align the alignment of this element with respect to the surrounding context. frameborder the value 1 (the default) draws a border around this frame. the value 0 removes the border around this frame, but you should instead use the css property border to control <iframe> borders. longdesc a url of a long description of the frame's content. due to widespread misuse, this is not helpful for non-...
...h window.parent. script access to a frame's content is subject to the same-origin policy. scripts cannot access most properties in other window objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. cross-origin communication can be achieved using window.postmessage(). positioning and scaling as a replaced element, the position, alignment, and scaling of the embedded document within the <iframe> element's box, can be adjusted with the object-position and object-fit properties. examples a simple <iframe> an <iframe> in action. after creating the frame, when the user clicks a button, its title is displayed in an alert. html <iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" ...

<input type="image"> - HTML: Hypertext Markup Language
html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid">...
...no...

<p>: The Paragraph element - HTML: Hypertext Markup Language
<p> element, or if there is no more content in the parent element and the parent element is not an <a> element. permitted parents any element that accepts flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlparagraphelement attributes this element only includes the global attributes. note: the align attribute on <p> tags is obsolete and shouldn't be used. example html <p>this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text. this is the first paragraph of text.</p> <p>this is the second paragraph. this is the second paragraph. this is the second paragraph. this is the second paragraph.</p> result styling paragraphs ...
... recommendation initial definition ...

<table>: The Table element - HTML: Hypertext Markup Language
n optional <tfoot> element tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implicit aria role table permitted aria roles any dom interface htmltableelement attributes this element includes the global attributes. deprecated attributes align this enumerated attribute indicates how the table must be aligned inside the containing document. it may have the following values: left: the table is displayed on the left side of the document; center: the table is displayed in the center of the document; right: the table is displayed on the right side of the document. set margin-left and margin-right to auto or margin to 0 aut...
... bgcolor the background color of the table. it is a 6-digit hexadecimal rgb code, prefixed by a '#'. one of the predefined color kewords can also be used. to achieve a similar effect, use the css background-color property. border this integer attribute defines, in pixels, the size of the frame surrounding the table. ...

<mfrac> - MathML
e fraction line is bevelled, which means that numerator and denominator are displayed side by side and separated by a slash (/). otherwise, if set to false (which is the default value), numerator and denominator are on top of each other. this attribute is deprecated and will be removed in the future. use u+2044 (fraction slash) instead. class, id, style provided for use with stylesheets. denomalign the alignment of the denominator under the fraction. possible values are: left, center (default), and right. this attribute is deprecated and will be removed in the future. use css text-align instead. href used to set a hyperlink to a specified uri. linethickness the thickness of the horizontal fraction line. this attributes accepts any length values. the values medium, thin, and thick a...
...ed uri. linethickness the thickness of the horizontal fraction line. this attributes accepts any length values. the values medium, thin, and thick are deprecated and will be removed in the future. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color and also the fraction line color. you can use #rgb, #rrggbb and html color names. numalign the alignment of the numerator over the fraction. possible values are: left, center (default), and right. this attribute is deprecated and will be removed in the future. use css text-align instead. examples sample rendering: your browser rendering: a b c d <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> ...

<mstyle> - MathML
the mathml <mstyle> element is used change the style of its children. it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes listed below. attributes dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). decimalpoint this attribute is specifying the character for the alignment point within <mstack> and <mtable> columns, if the decimalpoint value is used to specify the alignment. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. see also largeop and movable...
...um font size allowed due to changes in scriptlevel. the default value is 8pt. scriptsizemultiplier specifies the multiplier to be used to adjust font size due to changes in scriptlevel. the default value is 0.71. the <mstyle> element accepts all attributes of all presentation elements with the following exceptions: height, depth or width do not apply to <mglyph>, <mpadded> or <mtable>. rowalign, columnalign, or groupalign do not apply to <mtr>, <mlabeledtr>, <mtd> or <maligngroup>. lspace or voffset do not apply to <mpadded>. fontfamily does not apply to <mglyph>. align does not apply to <mtable> or <mstack>. index cannot be set on <mstyle>. src and alt on <mglyph> cannot be set on <mstyle>. actiontype on <maction> cannot be set on <mstyle>. examples using displaystyle and math...

alphabetic - SVG: Scalable Vector Graphics
the value is an offset in the font coordinate system. ...
...the value is an offset in the font coordinate system. ...

hanging - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'hanging' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'hanging' in that specification. ...

mathematical - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'mathematical' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'mathematical' in that specification. ...

v-alphabetic - SVG: Scalable Vector Graphics
the value is an offset in the font coordinate system relative to the glyph-specific vert-origin-x attribute. ...
...the value is an offset in the font coordinate system relative to the glyph-specific vert-origin-x attribute. ...

v-ideographic - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-ideographic' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-ideographic' in that specification. ...

v-mathematical - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-mathematical' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-mathematical' in that specification. ...

SVG Attribute reference - SVG: Scalable Vector Graphics
svg elements can be modified using attributes that specify details about exactly how the element should be handled or rendered. below is a list of all of the attributes available in svg along with links to reference documentation to help you learn which elements support them and how they work. ...
..., tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage. xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate presentation attributes note that all svg presentation attributes can be used as css properties. ...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
implemented. circle implemented. line implemented. ellipse implemented. polyline implemented. polygon implemented. text module text implemented. ...
...tal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. ...

Texts - SVG: Scalable Vector Graphics
that the text element can be used to put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear. the attribute text-anchor, which can have the values "start", "middle", "end" or "inherit", decides in which direction the text flows from this point. the attribute dominant-baseline decides the vertical alignment. like with the shape elements text can be colorized with the fill attribute and given a stroke with the stroke attribute. both may also refer to gradients or patterns, which makes simple coloring text in svg very powerful compared to css 2.1. setting font properties an essential part of a text is the font in which it is displayed. svg offers a set of attributes, many similar to their css c...
...e value, with remaining characters rotating according to the last value. textlength this is a more obscure attribute giving the calculated length of the string. it is meant to allow the rendering engine to fine-tune the positions of the glyphs when its own measured text length doesn't meet the one provided here. textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve. </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transp...

SDK and XUL Comparison - Archive of obsolete content
restartlessness add-ons built with the sdk can be installed without having to restart firefox. although you can write traditional add-ons that are restartless, you can't use xul overlays in them, so most traditional add-ons would have to be substantially rewritten anyway. user experience best practices the ui components available in the sdk are designed to align with the usability guidelines for firefox, giving your users a better, more consistent experience. mobile support starting in sdk 1.5, we've added experimental support for developing add-ons on the new native version of firefox mobile. see the tutorial on mobile development. advantages of xul-based add-ons user interface flexibility xul ...

XUL Migration Guide - Archive of obsolete content
edesign to work with them. some limitations are the result of intentional design choices. for example, action buttons appear by default in the main firefox toolbar (although users may relocate them by toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a consistent way. in such cases it's worth considering changing your user interface to align with the sdk apis. some limitations only exist because we haven't yet implemented the relevant apis: for example, there's currently no way to add items to the browser's main menus using the sdk's supported apis. many add-ons will need to make some changes to their user interfaces if they are to use only the sdk's supported apis, and add-ons which make drastic changes to the browser chrome will ...

simple-prefs - Archive of obsolete content
jects with mandatory attributes "label" and "value" the values of the "value" attributes must be supplied as strings. the values of the "label" attributes prefixed with "{name}_options.", where {name} is the name of the preference, are used as localization keys. if no matching entries are found, the value of the "label" attributes is used verbatim as labels. { "name": "alignment", "type": "radio", "title": "alignment", "value": "n", "options": [ { "value": "l", "label": "lawful" }, { "value": "n", "label": "neutral" }, { "value": "c", "label": "chaotic" } ] } control displays a button. when the user clic...

Displaying annotations - Archive of obsolete content
tation. annotation panel html <!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" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save this in data/annotation as annotation.html. annotation panel content script the annotation panel has a minimal content script that sets the text: self.on('message', function(message) { $('#annotation').text(message); }); save this in data/annotation as annotation.js. updating main.js finally, updat...

Storing annotations - Archive of obsolete content
updating main.js here's the code to create the panel, which can go in the main function. var annotationlist = panels.panel({ width: 420, height: 200, contenturl: data.url('list/annotation-list.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('li...

Boxes - Archive of obsolete content
value="mmm"/> <label value="nnn"/> <label value="ooo"/> <label value="ppp"/> <label value="qqq"/> <label value="rrr"/> <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box. this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrom...

Canvas code snippets - Archive of obsolete content
nstead 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[method] = function() { return this.ctx[method].apply(this.ctx, arguments); }; } for (let p of props...

Dialogs and Prompts - Archive of obsolete content
g xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="mydialogid" title="my dialog" ondialogaccept="return onok();" onload="onload();" persist="screenx screeny width height" windowtype="mydialogwindowtype"> <script type="application/javascript" src="chrome://myext/content/mydialog.js"/> <grid> <columns><column/><column/></columns> <rows> <row align="center"><label value="name:"/><textbox id="name"/></row> <row align="center"><label value="description:"/><textbox id="description"/></row> <row align="center"><spacer/><checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller do...

How to convert an overlay extension to restartless - Archive of obsolete content
ad and then run your manual ui construction function. step 6a. details on adding elements dynamically to chrome xul window there is a way that makes constructing of ui a lot similar to the way it was made with xul overlay. it involves using firebug.sdk. ...

Adding preferences to an extension - Archive of obsolete content
in our case, we have a single preference, the stock symbol to monitor. preferences are identified by name; in this case, the name is "exten...

XUL user interfaces - Archive of obsolete content
oncommand="cleardate();"/> <button id="today" label="today" accesskey="t" oncommand="settoday();"/> </hbox> </groupbox> <statusbar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...

Source code directories overview - Archive of obsolete content
on from the independent jpeg group. js contains c code for tokenizing, parsing, interpretting and executing javascript scripts. this code originated in mozilla classic. l10n contains code for building localizations. layout contains the c interfaces and code for the layout engine. the layout engine decides how to divide up the "window real estate" among all the pieces of content. it resizes and aligns pieces of content according to the css1 and css2 (cascading style sheets), alignment styles and the content itself. it does not actually render the content; it just assigns different pieces of the window to various content items. this is known as "reflowing" the content. this code is also known by the names, "nglayout" and "gecko." lib contains c code used for reference by developers in program...

Finding the file to modify - Archive of obsolete content
now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, etc.) and their position in the ui relative to each other, the style layer defines how the widgets look (size, color, style, etc.) and their overall position (alignment), and the behavior layer specifies how the widgets behave and how users can use them to accomplish their goals. mention the localization layer (note: these layers are not completely mutually exclusive. in particular, positioning information can be specified in both the structure layer and the style layer, and some behavior can be partly defined in the style layer.) we're going to add code to all...

Editor Embedding Guide - Archive of obsolete content
selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring or string) "helvetica, arial, sans-serif" "times new roman, times, serif" "courier new, courier, monospace" any string is acceptable. the above strings should be considered examples of base functionality and in no way imply that this command won't handle other fonts. cmd_align sets the alignment for the lines contained in the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenoui cmd_inserthr cmd_charset sets the charset for the document. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cst...

Clipboard Test - Archive of obsolete content
{content: ","; padding-right: .5em; } .method>.name>.param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.type:before{content: "type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.default:before{content: "default "; color: #888;font-weig...

Space Manager High Level Design - Archive of obsolete content
corded. ...

Table Cellmap - Archive of obsolete content
d row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan. entries which are a origin have a direct corresponding tablecellframe. entries which are only spanned don't have that direct relationship. they belong to a entry which has a direct relationship to a tablecellframe. now that union uses the fact all addresses of real tablecellframes are aligned at even boundaries, or in other words they cant have an odd address. if the address is odd then it holds some other info (mbits). easy table cellmap just imagine a 2x2 table. <table> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </table> this would create a cellmap with two rows and in each row 2 entries. each entry in the cellmap wold have a direct link...

Running Tamarin acceptance tests - Archive of obsolete content
d_runner.sh $ adb shell 'chmod 777 /data/loca/android_runner.sh' test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/platform/android/android_shell.py hello.abc hello exitcode=0 test it out by retrieving the version information of the shell on the android device $ $avm -dversion shell 1.4 debug build 6299:455bca954565 features avmsystem_32bit;avmsystem_unaligned_int_access;avmsystem_little_endian;avmsystem_arm;avmsystem_unix; avmfeature_jit;avmfeature_abc_interp;avmfeature_selftest;avmfeature_eval;avmfeature_protect_jitmem; avmfeature_shared_gcheap;avmfeature_cache_gqcn;avmfeature_safepoints;avmfeature_swf12;avmfeature_swf13;avmtweak_exact_tracing; running acceptance tests --androidthreads sets the number of threads to the number of phones found via us...

The new nsString class implementation (1999) - Archive of obsolete content
nd discuss the implications on memory management, optimizations, internationalization and usage patterns. disclaimer: i absolutely hate string classes. no one has ever devised one that more than 2 programmers can agree on. so, why then am i proposing this? well, nsstring has served us well so far, but it's in need of a facelift. and xpcom has really taken off, so nsstring needs to be brought into alignment. justification the nsstring class is a wide character string class used throughout all of gecko (and other modules) as the default implementation. however, it suffers from a few implementation details which need to be addressed and that are the subject of this document. the deficiencies of the current implementation are: class based -- making it unsuitable for cross-dll usage due to fragili...

crop - Archive of obsolete content
t side. right the text will be cropped on its right side. center 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. 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 foll...

pack - Archive of obsolete content
« xul reference home pack type: one of the values below the pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side...

panel.flip - Archive of obsolete content
, the arrow will appear to have been slid along the panel to ensure the arrow is still pointing at the anchor. in this image, the panel has flip="slide" and has a width which is greater than the distance from the anchor to the right of the screen (or window), so the panel extends past the left of the anchor, and the arrow slides towards the middle of the panel such that it is still aligned with the anchor. without flip="slide", the panel would have had its width truncated and the panel would not extend to the left of the anchor. ...

popup.position - Archive of obsolete content
nce home position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup. this allows you to place the popup on one side of a button. note that a context menu will never respect this attribute, always appearing relative to the mouse cursor. this value can be specified either as a single word offering pre-defined alignment positions, or as 2 words specifying exactly which part of the anchor and popup should be aligned. if specified as 2 words, the value indicates which corner or edge of the anchor (the first word) is aligned which which corner of the popup (the second word). the anchor value (ie, the first word) can be one of topleft, topright, bottomleft, bottomright, leftcenter, rightcenter, topcenter or ...

Attribute (XUL) - Archive of obsolete content
« xul reference home acceltext accessible accesskey activetitlebarcolor afterselected align allowevents allownegativeassertions alternatingbackground alwaysopenpopup attribute autocheck autocompleteenabled autocompletepopup autocompletesearch autocompletesearchparam autofill autofillaftermatch autoscroll beforeselected buttonaccesskeyaccept buttonaccesskeycancel buttonaccesskeydisclosure buttonaccesskeyextra1 buttonaccesskeyextra2 buttonaccesskeyhelp buttonalign buttondir buttondisabledaccept buttonlabelaccept buttonlabelcancel buttonlabeldisclosure buttonlabelextra1 buttonlabelextra2 buttonlabelhelp buttonorient buttonpack buttons checked checkstate clicktoscroll class closebutton closemenu coalesceduplicatearcs collapse collapsed col...

Building accessible custom components in XUL - Archive of obsolete content
the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of individual, unrelated text l...

findbar - Archive of obsolete content
the "find next" toolbar button in the findbar. findpreviousaccesskey type: string the access key for the "find previous" toolbar button in the findbar. highlightaccesskey type: string the access key for the "highlight" toolbar button in the findbar. matchcaseaccesskey type: string the access key for the "match case" checkbox in the findbar. ...

Introduction to XUL - Archive of obsolete content
ed with the communication of changes of state between widgets. a widget or several widgets can arrange to have the value of one of their attributes be tied to a broadcaster node. this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" onclick="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them when necessary. broadcasters can broadcast any change of state, which can be tied to the value of any attribute in another xul widget. for more complete documentation...

moveTo - Archive of obsolete content
...

OpenClose - Archive of obsolete content
ive to the document element. somepopup.openpopup(document.documentelement, "end_before", 0, 0, false, false); the second argument to openpopup is the anchor position, which specifies which side of the anchor the popup is positioned on. for instance, the value 'end_before' as used in the above example, indicates to place the left edge of the popup along the right edge of the the anchor element, aligned along the top edge of both. this may be confusing to understand, so see positioning a popup which describes this process in more detail and provides images which show the possible values and how a popup would be aligned for each value. the third and fourth arguments to openpopup are x and y offsets. after the popup is positioned, you can further position the popup by specifying non-zero values...

Panels - Archive of obsolete content
ntrol the placement of the popup. here is a complete example: <panel id="search-panel" position="after_start"> <label control="search" value="terms:"/> <textbox id="search"/> </panel> <label value="search" popup="search-panel"/> the position attribute has been added to the panel element with the value 'after_start'. this causes the panel to be displayed not where the mouse was clicked but aligned along the bottom edge of the label. for more information about this attribute and other possible values that can be used, see positioning popups. it is also possible to open a panel like a context menu using the context attribute instead of the popup attribute. this works just like using context menus except that the panel element is used instead of the menupopup element. see context menus for...

Popup Guide - Archive of obsolete content
n element. to open a popup using script use the openpopup method or the openpopupatscreen method. for detailed information about how to open a popup see opening a popup or opening a menu. closing a menu or popup for information about closing a popup, see closing a popup or closing a menu. how popups are placed to read about how the position of a popup on screen is determined, and how to align popups to other elements, see positioning popups. determining if a popup is open to determine if a popup or menu is open, see determining if a popup is open. moving a popup popups may be moved using the moveto method. see moving a popup. resizing a popup the size of a popup may be adjusted using the sizeto method. see resizing a popup. attaching menus to a button to learn abou...

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 customt...

Sorting and filtering a custom tree view - Archive of obsolete content
coded. because of bug 340478, this code will only work from privileged script. ...

Multiple Rule Example - Archive of obsolete content
result has a property that others do not. for instance, in an earlier example, one of the photos had a description and the other photos did not. in this case, you might wish to display the photo with a description in a different manner. this is useful if you wish to hide any content that would be needed to display the description. the next example shows how we can do this. ...

Simple Example - Archive of obsolete content
.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') since the triple is the last statement, three matches total have been found. the action body might look like the following, which displays the image using its url and title in a label. you might note that the image's src attribute uses the member variable ?photo <action> <vbox uri="?photo" align="start"> <image src="?photo"/> <label value="?title"/> </vbox> </action> it shouldn't be too difficult to tell what would appear in the window in this example. you can see if you guessed correctly by viewing the example. « previousnext » ...

XML Assignments - Archive of obsolete content
ment, the assign element. this element allows the use of additional xpath expressions to get more data from the xml data. here is an example: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?namelength" expr="string-length(@name)"/> <assign var="?siblings" expr="count(../*) - 1"/> </query> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> <label value="?namelength"/> <label value="?siblings"/> </hbox> </action> </template> </vbox> two assign elements are placed as children of the query element. it allows us to declare additional variables that may be used in the action body. the expr attribute specifies the xpath expression and ...

XML Templates - Archive of obsolete content
name attributes in the original xml data above. this substitution occurs for any attribute within the action body, so you can also set other attributes with this technique. in this example, an hbox element containing a button and a label is generated for each result. <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <hbox uri="?" align="center"> <button label="?name"/> <label value="?gender"/> </hbox> </action> </template> </vbox> note how two attributes are substituted here, the label on the button and the value on the label. the query does not have to be as simple as the one used here. any xpath expression may be used. for instance, the following query returns only those results for female peopl...

Adding Buttons - Archive of obsolete content
ars greyed out. we'll start by creating a simple find button for the find files utility. the example code below shows how to do this. <button id="find-button" label="find"/> note: firefox does not allow you to open chrome windows from web pages, so the view links in the tutorial will open in normal browser windows. due to this, the buttons will appear to stretch across the window. you can add align="start" to the window tag to prevent the stretching. the findfile.xul example let's add this code to the file findfile.xul that we created in the previous section. the code needs to be inserted in-between the window tags. the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find...

Groupboxes - Archive of obsolete content
however, there are several differences between groupboxes and regular boxes: the groupbox can be labeled using the caption element. ...

Manipulating Lists - Archive of obsolete content
this code isn't foolproof though; for example it doesn't check if the value entered is out of range. you will want to make sure that you add this kind of error checking. example 3 : source view <script> function doselect(){ var val = document.getelementbyid('number').value; val = number(val); if (val != null) document.getelementbyid('level').selectedindex = val - 1; } </script> <hbox align="center"> <label value="enter a number from 1 to 3:"/> <textbox id="number"/> <button label="select" oncommand="doselect();"/> </hbox> <radiogroup id="level"> <radio label="excellent"/> <radio label="good"/> <radio label="poor"/> </radiogroup> listboxes also support multiple selection and the functions of the nsidomxulmultiselectcontrolelement interface. this interface provides a n...

More Button Features - Archive of obsolete content
re normal means place the image above the text, and reverse means place the image below the text. example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical" dir="reverse"/> the example here shows all four types of alignment of buttons. note that the two attributes are not specified when the default value can be used. buttons with extra content buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. you probably wouldn't use this very often, but you might use it when creating custom elements. for example, the following will create a button where two of the words are red...