Search completed in 1.13 seconds.
ResizeObserverEntry.borderBoxSize - Web APIs
the borderbox
size read-only property of the re
sizeobserverentry interface returns an array containing the new border box
size of the observed element when the callback is run. syntax var myborderbox
size = re
sizeobserverentry.borderbox
size; value an array containing objects with the new border box
size of the observed element. the array is necessary to support elements that have multiple fragments, which occur in multi-column scenarios. each object in the array contains two properties: block
size the length of the observed element's border box in the block dimension. for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. ...
...ssary to support elements that have multiple fragments, which occur in multi-column scenarios. each object in the array contains two properties: block
size the length of the observed element's border box in the block dimension. for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. inline
size the length of the observed element's border box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. ...
... or width. inline
size the length of the observed element's border box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. ...
...And 9 more matches
ResizeObserverEntry.contentBoxSize - Web APIs
the contentbox
size read-only property of the re
sizeobserverentry interface returns an array containing the new content box
size of the observed element when the callback is run. syntax var mycontentbox
size = re
sizeobserverentry.contentbox
size; value an object containing the new content box
size of the observed element. this object contains two properties: block
size the length of the observed element's content box in the block dimension. for boxes with a horizontal writing-mode, this is the vertical dimension, or height; if the writing-mode is vertical, this is the horizontal dimension, or width. inline
size the length of the observed element's content box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the w...
...of the observed element's content box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. examples the following snippet is taken from the re
size-observer-border-radius.html (see source) example. this example includes a green box,
sized as a percentage of the viewport
size. when the viewport
size is changed, the box's rounded corners change in proportion to the
size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square c...
...ee source) example. this example includes a green box,
sized as a percentage of the viewport
size. when the viewport
size is changed, the box's rounded corners change in proportion to the
size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box
size. ...
...And 9 more matches
background-size - CSS: Cascading Style Sheets
the background-
size css property sets the
size of the element's background image. the image can be left to its natural
size, stretched, or constrained to fit the available space. 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. spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
...thub 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. spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
...d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
...And 36 more matches
font-size - CSS: Cascading Style Sheets
the font-
size css property sets the
size of the font. changing the font
size also updates the
sizes of the font
size-relative <length> units, such as em, ex, and so forth. 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. ...
...perty sets the
size of the font. changing the font
size also updates the
sizes of the font
size-relative <length> units, such as em, ex, and so forth. 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. ...
...f the font. changing the font
size also updates the
sizes of the font
size-relative <length> units, such as em, ex, and so forth. 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 36 more matches
mask-size - CSS: Cascading Style Sheets
the mask-
size css property specifies the
sizes of the mask images. the
size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. ...
... the mask-
size css property specifies the
sizes of the mask images. the
size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. ...
... the mask-
size css property specifies the
sizes of the mask images. the
size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. ...
...And 20 more matches
Resize Observer API - Web APIs
the re
size observer api provides a performant mechanism by which code can monitor an element for changes to its
size, with notifications being delivered to the observer each time the
size changes. concepts and usage there are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's
size, but previously their implementations have often been hacky and/or brittle. ...
...to the observer each time the
size changes. concepts and usage there are a whole raft of use cases for responsive design techniques (and others besides) that respond to changes in an element's
size, but previously their implementations have often been hacky and/or brittle. for example, media queries / window.matchmedia are great for updating layouts at specific points when the viewport changes
sizes, but what if you want to change layout in response to a specific element's
size changing, which isn't the outer container? ...
...e. for example, media queries / window.matchmedia are great for updating layouts at specific points when the viewport changes
sizes, but what if you want to change layout in response to a specific element's
size changing, which isn't the outer container? to achieve this, a limited solution would be to listen to changes to a suitable event that hints at the element you are interested in changing
size (e.g. the window re
size event), then figure out what the new dimensions or other features of the element after a re
size using element.getboundingclientrect or window.getcomputedstyle, for example. such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result in a big performance hit), and often won't work when the browser win...
...And 17 more matches
ResizeObserverEntry.contentRect - Web APIs
if the target is an html element, the returned contentrect is the element's content box. ...
... if the target is an html element, the returned contentrect is the element's content box. ...
... if the target is an html element, the returned contentrect is the element's content box. ...
...And 14 more matches
nsICompositionStringSynthesizer
dom/interfaces/base/nsicompositionstringsynthe
sizer.idlscriptable this interface is a composition string synthe
sizer interface that synthe
sizes composition string with arbitrary clauses and a caret 1.0 66 introduced gecko 26 obsolete gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. every instance is associated with a dom window at created by nsidomwindowutils.createcompositionstringsynthe
sizer(). ...
...orts last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. every instance is associated with a dom window at created by nsidomwindowutils.createcompositionstringsynthe
sizer(). ...
...derbird 38.0 / seamonkey 2.35) this interface is obsoleted in gecko 38. you need to use nsitextinputprocessor instead of this. every instance is associated with a dom window at created by nsidomwindowutils.createcompositionstringsynthe
sizer(). to create an instance for this: var domwindowutils = window.windowutils; var compositionstringsynthe
sizer = domwindowutils.createcompositionstringsynthe
sizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause information and caret information (optional): // set new composition string with .setstring(). compositionstringsynth...
...And 13 more matches
max-block-size - CSS: Cascading Style Sheets
the max-block-
size css property specifies the maximum
size of an element in the direction opposite that of the writing direction as specified by writing-mode. that is, if the writing direction is horizontal, then max-block-
size is equivalent to max-height; if the writing direction is vertical, max-block-
size is the same as max-width. the other dimension's maximum length is specified using the max-inline-
size property. this is useful because the max-width is always used for horizontal
sizes and max-height is always used for vertical
sizes, and if you need to set lengths based on the
size of your text content, you need to be able to do so with the writing direction in mind. ...
...see the example in writing-mode, which shows the different writing modes in action. ...
...see the example in writing-mode, which shows the different writing modes in action. the source for this interactive example is stored in a github repository. ...
...And 12 more matches
PerformanceResourceTiming.encodedBodySize - Web APIs
the encodedbody
size read-only property represents the
size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. note: this feature is available in web workers. if the resource is retrieved from an application cache or a local resource, it must return the
size of the payload body before removing any applied content-codings. syntax resource.encodedbody
size; return value a number representing the
size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. ...
...rn the
size of the payload body before removing any applied content-codings. syntax resource.encodedbody
size; return value a number representing the
size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the performanceentry.*
size properties and print their values // if supported. ...
...senting the
size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the performanceentry.*
size properties and print their values // if supported. ...
...And 11 more matches
ResizeObserver.unobserve() - Web APIs
the unobserve() method of the re
sizeobserver interface ends the observing of a specified element or svgelement. syntax void unobserve(target); parameters target a reference to an element or svgelement to be unobserved. return value void. exceptions none. ...
... the unobserve() method of the re
sizeobserver interface ends the observing of a specified element or svgelement. syntax void unobserve(target); parameters target a reference to an element or svgelement to be unobserved. return value void. exceptions none. ...
... the unobserve() method of the re
sizeobserver interface ends the observing of a specified element or svgelement. syntax void unobserve(target); parameters target a reference to an element or svgelement to be unobserved. return value void. exceptions none. ...
...And 10 more matches
PerformanceResourceTiming.decodedBodySize - Web APIs
the decodedbody
size read-only property returns the
size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings. if the resource is retrieved from an application cache or local resources, it returns the
size of the payload after removing any applied content-codings. note: this feature is available in web workers. syntax resource.decodedbody
size; return value the
size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the *
size properties and print their values // if supported. if ("decodedbodysiz...
...received from the fetch (http or cache) of the message body, after removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the *
size properties and print their values // if supported. ...
... cache) of the message body, after removing any applied content-codings. example the following example, the value of the
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the *
size properties and print their values // if supported. ...
...And 9 more matches
PerformanceResourceTiming.transferSize - Web APIs
the transfer
size read-only property represents the
size (in octets) of the fetched resource. the
size includes the response header fields plus the response payload body (as defined by rfc7230). note: this feature is available in web workers. if the resource is fetched from a local cache, or if it is a cross-origin resource, this property returns zero. syntax resource.transfer
size; return value a number representing the
size (in octets) of the fetched resource. the
size includes the response header fields plus the response payload body (rfc7230). example the following example, the value of
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the performanceentry.*
size properties and print their values // if supported. ...
...enting the
size (in octets) of the fetched resource. the
size includes the response header fields plus the response payload body (rfc7230). example the following example, the value of
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the performanceentry.*
size properties and print their values // if supported. ...
...rce. the
size includes the response header fields plus the response payload body (rfc7230). example the following example, the value of
size properties of all "resource" type events are logged. function log_
sizes(perfentry){ // check for support of the performanceentry.*
size properties and print their values // if supported. ...
...And 9 more matches
ResizeObserver.observe() - Web APIs
the observe() method of the re
sizeobserver interface starts observing the specified element or svgelement. syntax re
sizeobserver.observe(target, options); parameters target a reference to an element or svgelement to be observed. options optional an options object allowing you to set options for the observation. currently this only has one possible option that can be set: box sets which box model the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. ...
...lement to be observed. options optional an options object allowing you to set options for the observation. currently this only has one possible option that can be set: box sets which box model the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. ...
...ject allowing you to set options for the observation. currently this only has one possible option that can be set: box sets which box model the observer will observe changes to. possible values are content-box (the default), and border-box. return value void. exceptions none. ...
...And 9 more matches
ResizeObserverEntry - Web APIs
the re
sizeobserverentry interface represents the object passed to the re
sizeobserver() constructor's callback function, which allows you to access the new dimensions of the element or svgelement being observed. properties re
sizeobserverentry.borderbox
size read only an object containing the new border box
size of the observed element when the callback is run. re
sizeobserverentry.contentbox
size read only an object containing the new content box
size of the observed element when the callback is run. re
sizeobserverentry.contentrect read only a domrectreadonly object containing the new
size of the observed element when the callback is run. ...
... note: the content box is the box in which content can be placed, meaning the border box minus the padding and border width. ...
...ack is run. re
sizeobserverentry.contentrect read only a domrectreadonly object containing the new
size of the observed element when the callback is run. note that this is better supported than the above two properties, but it is left over from an earlier implementation of the re
size observer api, is still included in the spec for web compat reasons, and may be deprecated in future versions. re
sizeobserverentry.target read only a reference to the element or svgelement being observed. note: the content box is the box in which content can be placed, meaning the border box minus the padding and border width. the border box encompasses the content, padding, and border. see the box model for further explanation. methods none. ...
...And 9 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
the background-
size css property lets you re
size the background image of an element, overriding the default behavior of tiling the image at its full
size by specifying the width and/or height of the image. by doing so, you can scale the image upward or downward as desired. tiling a large image let's consider a large image, a 2982x2808 firefox logo image. we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-
size value of 150 pixels. ...
...go image. we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-
size value of 150 pixels. html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-
size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical
sizes of the image, like this: background-
size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to...
...result stretching an image you can also specify both the horizontal and vertical
sizes of the image, like this: background-
size: 300px 150px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-
size: 300px; width: 300px; height: 300px; border: 2px solid; text-shadow: white 0px 0px 2px; font-
size: 16px; } as you can see, the css is actually essentially identical, save the name of the image file. special values: "contain" and "cover" besides <length> values, the background-
size css property offers two special
size values, contain and cover. let's take a look at these. contain t...
...And 9 more matches
resizer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element used for window resizing. if you place a custom resizing button inside the re
sizer, the user will be able to re
size the window by dragging it. the re
sizer will send a command event after the re
size is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the re
sizer to re
size the specified element instead of the window. ...
...ent after the re
size is complete. note: starting in gecko 2.0, you can also specify a target element using the element attribute, to use the re
sizer to re
size the specified element instead of the window. ...
...e the specified element instead of the window. ...
...And 8 more matches
ResizeObserver() - Web APIs
this could be used for example to automatically unobserve the observer when a certain condition is reached, but you can omit it if you don't need it. ...
...this could be used for example to automatically unobserve the observer when a certain condition is reached, but you can omit it if you don't need it. ...
...this could be used for example to automatically unobserve the observer when a certain condition is reached, but you can omit it if you don't need it. ...
...And 8 more matches
ResizeObserverEntry.target - Web APIs
the target read-only property of the re
sizeobserverentry interface returns a reference to the element or svgelement that is being observed. syntax var element = re
sizeobserverentry.target; var svgelement = re
sizeobserverentry.target; value an element or svgelement representing the element being observed. examples the following snippet is taken from the re
size-observer-border-radius.html (see source) example. this example includes a green box,
sized as a percentage of the viewport
size. when the viewport
size is changed, the box's rounded corners change in proportion to the
size of the box. ...
...ee source) example. this example includes a green box,
sized as a percentage of the viewport
size. when the viewport
size is changed, the box's rounded corners change in proportion to the
size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box
size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry — entry.target.style.borderradius. ...
... could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box
size. to grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry — entry.target.style.borderradius. ...
...And 8 more matches
HTMLImageElement.sizes - Web APIs
the htmlimageelement property
sizes allows you to specify the layout width of the image for each of a list of media conditions. this provides the ability to automatically select among different images—even images of different orientations or aspect ratios—as the document state changes to match different media conditions. each condition is specified using the same conditional format used by media queries. syntax let
sizes = htmlimageelement.
sizes; htmlimageelement.
sizes =
sizes; value a usvstring containing a comma-separated list of source
size descriptors followed by an optional fallback
size. ...
...erent orientations or aspect ratios—as the document state changes to match different media conditions. each condition is specified using the same conditional format used by media queries. syntax let
sizes = htmlimageelement.
sizes; htmlimageelement.
sizes =
sizes; value a usvstring containing a comma-separated list of source
size descriptors followed by an optional fallback
size. each source
size descriptor is comprised of a media condition, then at least one whitespace character, then the source
size value to use for the image when the media condition evaluates to true. ...
...limageelement.
sizes; htmlimageelement.
sizes =
sizes; value a usvstring containing a comma-separated list of source
size descriptors followed by an optional fallback
size. each source
size descriptor is comprised of a media condition, then at least one whitespace character, then the source
size value to use for the image when the media condition evaluates to true. media conditions each source
size descriptor consists of a media condition as defined by the media queries standard. because a source
size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width information. see syntax in using media queries for details on how to construct a media condition. ...
...And 7 more matches
Window.resizeBy() - Web APIs
see the compatability table for details on the change. ...
...see the compatability table for details on the change. ...
...see the compatability table for details on the change. ...
...And 7 more matches
font-size-adjust - CSS: Cascading Style Sheets
the font-
size-adjust css property sets the
size of lower-case letters relative to the current font
size (which defines the
size of upper-case letters). /* use the specified font
size */ font-
size-adjust: none; /* use a font
size that makes lowercase letters half the specified font
size */ font-
size-adjust: 0.5; /* global values */ font-
size-adjust: inherit; font-
size-adjust: initial; font-
size-adjust: unset; the property is useful since the legibility of fonts, especially at small
sizes, is determined more by the
size of lowercase letters than by the
size of capital letters. ...
...just: inherit; font-
size-adjust: initial; font-
size-adjust: unset; the property is useful since the legibility of fonts, especially at small
sizes, is determined more by the
size of lowercase letters than by the
size of capital letters. legibility can become an issue when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the
size of lowercase letters to the
size of the font). to use this property in a way that is compatible with browsers that do not support font-
size-adjust, it is specified as a number that the font-
size property is multiplied by. this means the value specified for the property should generally be the aspect ratio of the first choice font. ...
...atio of the
size of lowercase letters to the
size of the font). to use this property in a way that is compatible with browsers that do not support font-
size-adjust, it is specified as a number that the font-
size property is multiplied by. this means the value specified for the property should generally be the aspect ratio of the first choice font. for example, a style sheet that specifies: font-
size: 14px; font-
size-adjust: 0.5; ... is really specifying that the lowercase letters of the font should be 7px high (0.5 × 14px). this will still produce reasonable results in browsers that do not support font-
size-adjust, where a 14px font will be used. syntax values none choose the
size of the font based only on the font-
size property. ...
...And 7 more matches
min-inline-size - CSS: Cascading Style Sheets
the min-inline-
size css property defines the horizontal or vertical minimal
size of an element's block, depending on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. 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. ...
...ng on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 7 more matches
text-size-adjust - CSS: Cascading Style Sheets
the text-
size-adjust css property controls the text inflation algorithm used on some smartphones and tablets. other browsers will ignore this property. /* keyword values */ text-
size-adjust: none; text-
size-adjust: auto; /* <percentage> value */ text-
size-adjust: 80%; /* global values */ text-
size-adjust: inherit; text-
size-adjust: initial; text-
size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...
...adjust: initial; text-
size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. to map the extra-wide layout back to the original device
size, they either show only part of the whole render or scale the viewport down to fit. since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. ...
... values none disables the browser's inflation algorithm. ...
...And 6 more matches
MoveResize - Archive of obsolete content
moving a popup once a popup is open, it can be moved using the popup's moveto method. void moveto(in long left, in long top); the left argument is the horizontal screen position and the top argument is the vertical screen position. this method will change the left and top attributes to match the supplied arguments, so if these attributes are persisted the values will be restored when the window is displayed again. ...
...ied arguments, so if these attributes are persisted the values will be restored when the window is displayed again. for instance, the following example will move a popup to the upper left corner of the screen: popup.moveto(0, 0); the position may be shifted so as not to cover user interface elements provided by the operating system, such as the menu bar or the task bar. resizing a popup the
size of a popup is determined automatically based on the content inside the popup. for instance, the
size of a menu will be large enough to fit all of the items within the menu. sometimes, a menu will be larger than the available space on the screen; in this situation, the menu may be moved such that it will fit on screen. for instance, instead of appearing below the menu label, the menu popup might a...
...an the available space on the screen; in this situation, the menu may be moved such that it will fit on screen. for instance, instead of appearing below the menu label, the menu popup might appear above the label. you can see this effect in a xul application by moving a window near the bottom of the screen and clicking a menu or button that has a menu. ...
...And 5 more matches
resize - CSS: Cascading Style Sheets
the re
size css property sets whether an element is resizable, and if so, in which directions. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ re
size: none; re
size: both; re
size: horizontal; re
size: vertical; re
size: block; re
size: inline; /* global values */ re
size: inherit; re
size: initial; re
size: unset; the re
size property is specified as a single keyword value from the list below. values none the element offers no user-controllable method for resizing it. ...
.../ re
size: none; re
size: both; re
size: horizontal; re
size: vertical; re
size: block; re
size: inline; /* global values */ re
size: inherit; re
size: initial; re
size: unset; the re
size property is specified as a single keyword value from the list below. values none the element offers no user-controllable method for resizing it. both the element displays a mechanism for allowing the user to re
size it, which may be re
sized both horizontally and vertically. horizontal the element displays a mechanism for allowing the user to re
size it in the horizontal direction. vertical the element displays a mechanism for allowing the user to re
size it in the vertical direction. ...
...t displays a mechanism for allowing the user to re
size it, which may be re
sized both horizontally and vertically. horizontal the element displays a mechanism for allowing the user to re
size it in the horizontal direction. vertical the element displays a mechanism for allowing the user to re
size it in the vertical direction. block the element displays a mechanism for allowing the user to re
size it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value). inline the element displays a mechanism for allowing the user to re
size it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value). ...
...And 5 more matches
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
shortly before mozilla 0.9.4 was finished, a bug was introduced that affects the sizing of list item markers (such as the numbers in an ordered list). while this bug was corrected shortly after 0.9.4 was finished, the bug still affects all netscape 6.2.x versions, as well as compuserve 7.0. the problem in affected browsers, list item markers will very often appear to be too big compared to the text in the list item itself. ...
... still affects all netscape 6.2.x versions, as well as compuserve 7.0. the problem in affected browsers, list item markers will very often appear to be too big compared to the text in the list item itself. this is most obvious in ordered lists, where the number that precedes each list item may be obviously different than the content that follows it. ...
...t follows it. in fact, the markers were set to be a uniform
size that did not change to match the content of the list items, so in rare cases the marker might actually appear to be smaller. see bug 110360, which explains the problem and shows when the fix was applied. in addition, when a document is displayed in "quirks" mode in mozilla 0.9.4 and later, the markers of lists will not use the font
size of the list item text, but will instead stay the same as the user's default font
size. see bug 97351 for more details. the solution fortunately, there are mozilla-specific css-like rules that can be used to correct both problems. ...
...And 4 more matches
Metadata.size - Web APIs
browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. ...
... browser compatibility the compatibility table on this page is generated from structured data. ...
...And 4 more matches
Window: resize event - Web APIs
the re
size event fires when the document view (window) has been re
sized. bubbles no cancelable no interface uievent event handler property onre
size in some earlier browsers it was possible to register re
size event handlers on any html element. it is still possible to set onre
size attributes or use addeventlistener() to set a handler on any element. however, re
size events are only fired on the window object (i.e. returned by document.defaultview). only handlers registered on the window object will receive re
size events. there is a proposal to allow all elements to be notified of re
size changes. see re
size observer to read the draft document, and github issues to read the on-going discussions. ...
... set a handler on any element. however, re
size events are only fired on the window object (i.e. returned by document.defaultview). only handlers registered on the window object will receive re
size events. there is a proposal to allow all elements to be notified of re
size changes. see re
size observer to read the draft document, and github issues to read the on-going discussions. examples window
size logger the following example reports the window
size each time it is re
sized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to re
size before you see an effect. ...
...llow all elements to be notified of re
size changes. see re
size observer to read the draft document, and github issues to read the on-going discussions. examples window
size logger the following example reports the window
size each time it is re
sized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to re
size before you see an effect. ...
...And 4 more matches
block-size - CSS: Cascading Style Sheets
the block-
size css property defines the horizontal or vertical
size of an element's block, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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. ...
...ock, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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. ...
...ts writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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
inline-size - CSS: Cascading Style Sheets
the inline-
size css property defines the horizontal or vertical
size of an element's block, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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. ...
...ock, depending on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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 writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. 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
min-block-size - CSS: Cascading Style Sheets
the min-block-
size css property defines the minimum horizontal or vertical
size of an element's block, depending on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ing on its writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
.... it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. 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
tab-size - CSS: Cascading Style Sheets
the tab-
size css property is used to customize the width of tab characters (u+0009). syntax /* <integer> values */ tab-
size: 4; tab-
size: 0; /* <length> values */ tab-
size: 10px; tab-
size: 2em; /* global values */ tab-
size: inherit; tab-
size: initial; tab-
size: unset; values <integer> a multiple of the advance width of the space character (u+0020) to be used as the width of tabs. must be nonnegative. <length> the width of tabs. must be nonnegative. ...
...f the advance width of the space character (u+0020) to be used as the width of tabs. must be nonnegative. <length> the width of tabs. must be nonnegative. ...
...of the space character (u+0020) to be used as the width of tabs. must be nonnegative. <length> the width of tabs. must be nonnegative. ...
...And 4 more matches
ResizeObserver - Web APIs
properties none. ...
... properties none. ...
...border width. the border box encompasses the content, padding, and border. see the box model for further explanation. re
sizeobserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback function. it does this by only processing elements deeper in the dom in subsequent frames. implementations should, if they follow the specification, invoke re
size events before paint and after layout. constructor re
sizeobserver() creates and returns a new re
sizeobserver object. properties none. methods re
sizeobserver.disconnect() unobserves all observed element targets of a particular observer. re
sizeobserver.observe() initiates the observing of a specified element. re
sizeobserver.unobserve() ends the observing of a specified element. ex...
...And 3 more matches
VisualViewport: resize event - Web APIs
}; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification. ...
...}; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification. ...
...}; specifications specification status comment visual viewport apithe definition of 'visualviewport events' in that specification. ...
...And 3 more matches
sizemode - Archive of obsolete content
setting this attribute does not change the window state. ...
... setting this attribute does not change the window state. ...
... setting this attribute does not change the window state. ...
...And 2 more matches
GlobalEventHandlers.onresize - Web APIs
the onre
size property of the globaleventhandlers interface is an eventhandler that processes re
size events. the re
size event fires after the window has been re
sized. syntax window.onre
size = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
... the onre
size property of the globaleventhandlers interface is an eventhandler that processes re
size events. the re
size event fires after the window has been re
sized. syntax window.onre
size = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
... the onre
size property of the globaleventhandlers interface is an eventhandler that processes re
size events. the re
size event fires after the window has been re
sized. syntax window.onre
size = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...And 2 more matches
max-inline-size - CSS: Cascading Style Sheets
the max-inline-
size css property defines the horizontal or vertical maximum
size of an element's block depending on its writing mode. it corresponds to the max-width or the max-height property depending on the value defined for writing-mode. if the writing mode is vertically oriented, the value of max-inline-
size relates to the maximal height of the element, otherwise it relates to the maximal width of the element. it relates to max-block-
size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...se it relates to the maximal width of the element. it relates to max-block-
size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...imal width of the element. it relates to max-block-
size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ max-inline-
size: 300px; max-inline-
size: 25em; /* <percentage> values */ max-inline-
size: 75%; /* keyword values */ max-inline-
size: auto; max-inline-
size: max-content; max-inline-
size: min-content; max-inline-
size: fit-content(20em); /* global values */ max-inline-
size: inherit; max-inline-
size: initial; max-inline-
size: unset; values the max-inline-
size property takes the same values as the max-width and max-height properties. ...
...And 2 more matches
font-size-adjust - SVG: Scalable Vector Graphics
« svg attribute reference home the font-
size-adjust attribute allows authors to specify an aspect value for an element that will preserve the x-height of the first choice font in a substitute font. note: as a presentation attribute, font-
size-adjust can be used as a css property. see the css font-
size-adjust property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-
size="10px"> this text uses the times font (10px), which is hard to read in small
sizes. </text> ...
...ht elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-
size="10px"> this text uses the times font (10px), which is hard to read in small
sizes. </text> <text y="40" font-family="verdana, sans-serif" font-
size="10px"> this text uses the verdana font (10px), which has relatively large lowercase letters. </text> <text y="60" font-family="times, serif" font-
size="10px" font-
size-adjust="0.58"> this is the 10px times, but now adjusted to the same aspect ratio as the verdana. </text> </svg> usage notes default value none value none | <number> animatable ...
... verdana font (10px), which has relatively large lowercase letters. </text> <text y="60" font-family="times, serif" font-
size="10px" font-
size-adjust="0.58"> this is the 10px times, but now adjusted to the same aspect ratio as the verdana. </text> </svg> usage notes default value none value none | <number> animatable yes none choose the
size of the font based only on the font-
size property. <number> choose the
size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-
size. the number specified should generally be the aspect ratio (ratio of x-height to font
size) of the first choice font-family. this means that the first-choice font, when available, will ap...
...And 2 more matches
PR_NETDB_BUF_SIZE
recommended
size to use when specifying a scratch buffer for pr_gethostbyname, pr_gethostbyaddr, pr_getprotobyname, or pr_getprotobynumber. ...
... recommended
size to use when specifying a scratch buffer for pr_gethostbyname, pr_gethostbyaddr, pr_getprotobyname, or pr_getprotobynumber. ...
... recommended
size to use when specifying a scratch buffer for pr_gethostbyname, pr_gethostbyaddr, pr_getprotobyname, or pr_getprotobynumber. ...
... recommended
size to use when specifying a scratch buffer for pr_gethostbyname, pr_gethostbyaddr, pr_getprotobyname, or pr_getprotobynumber. ...
HTMLFontElement.size - Web APIs
the obsolete htmlfontelement.
size property is a domstring that reflects the
size html attribute. it contains either an integer number in the range of 1-7 or a relative value to increase/decrease the value of the
size attribute of the <basefont> element. ...
...he obsolete htmlfontelement.
size property is a domstring that reflects the
size html attribute. it contains either an integer number in the range of 1-7 or a relative value to increase/decrease the value of the
size attribute of the <basefont> element. ...
...html attribute. it contains either an integer number in the range of 1-7 or a relative value to increase/decrease the value of the
size attribute of the <basefont> element. ...
... relative value to increase/decrease the value of the
size attribute of the <basefont> element. the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid
size number string integer number in the range of 1-7 6 relative
size string +x or -x, where x is the number relative to the value of the
size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax
sizestring = fontobj.
size; fontobj.
size =
sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.
size = "6"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.
size . ...
MediaTrackConstraints.sampleSize - Web APIs
the mediatrackconstraints dictionary's sample
size property is a constrainlong describing the requested or mandatory constraints placed upon the value of the sample
size constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.sample
size as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...the sample
size constrainable property. if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.sample
size as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { sample
size: constraint }; constraintsobject.sample
size = constraint; value if this value is a number, the user agent will attempt to obtain media whose sample
size (in bits per linear sample) is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an e...
... example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...
...sible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constrainlong will guide the user agent in its efforts to provide an exact match to the required sample
size (if exact is specified or both min and max are provided and have the same value) or to a best-possible value. since this property can only represent linear sample
sizes, this constraint can only be met by devices that can produce audio with linear samples. example see example: constraint exerciser in capabilities, constraints, and settings for an example. specifications specification status comment media capture and streamsthe definition of 'sample
size' in that specification. candidate recommendation initial specification.
MediaTrackSettings.sampleSize - Web APIs
the mediatracksettings dictionary's sample
size property is an integer indicating the linear sample
size (in bits per sample) the mediastreamtrack is currently configured for. this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.sample
size property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.sample
size as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. ...
...ither getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.sample
size as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var sample
size = mediatracksettings.sample
size; value an integer value indicating how many bits each audio sample is represented by. the most commonly used sample
size for many years now is 16 bits per sample, which was used for cd audio among others. other common sample
sizes are 8 (for reduced bandwidth requirements) and 24 (for high-resolution professional audio). each audio channel on the track requires...
...atracksettings.sample
size; value an integer value indicating how many bits each audio sample is represented by. the most commonly used sample
size for many years now is 16 bits per sample, which was used for cd audio among others. other common sample
sizes are 8 (for reduced bandwidth requirements) and 24 (for high-resolution professional audio). each audio channel on the track requires sample
size bits. that means that a given sample actually uses (sample
size/8)*channelcount bytes of data. for example, 16-bit stereo audio requires (16/8)*2 or 4 bytes per sample. example see example: constraint exerciser in capabilities, constraints, and settings for an example. ...
... candidate recommendation initial specification. ...
HTML attribute: size - HTML: Hypertext Markup Language
the
size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no
size is specified, or an invalid value is specified, the input has no
size declared, and the form control will be the default width based on the user agent. if css targets the element with properties impacting the width, css takes precedence. the
size attribute has no impact on constraint validation. examples by adding
size on some input types, the width of the input can be controlled. adding
size on a select changes the height, definining how many options are visible in the closed state. ...
...f css targets the element with properties impacting the width, css takes precedence. the
size attribute has no impact on constraint validation. examples by adding
size on some input types, the width of the input can be controlled. adding
size on a select changes the height, definining how many options are visible in the closed state. ...
...int validation. examples by adding
size on some input types, the width of the input can be controlled. adding
size on a select changes the height, definining how many options are visible in the closed state. ...
...ible in the closed state. <label for="fruit">enter a fruit</label> <input type="text"
size="15" id="fruit"> <label for="vegetable">enter a vegetable</label> <input type="text" id="vegetable"> <select name="fruits"
size="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vegetables"
size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications specification status html living standardthe definition of '
size attribute' in that specification. living standard html 5.1the definition of '
size attribute' in that specification. recommend...
String.prototype.fontsize() - JavaScript
the font
size() method creates a <font> html element that causes a string to be displayed in the specified font
size. usage note: the <font> element has been removed in html5 and shouldn't be used anymore. instead web developers should use css properties. syntax str.font
size(
size) parameters
size an integer between 1 and 7, a string representing a signed integer between 1 and 7. return value a string containing a <font> html element. description when you specify
size as an integer, you set the font
size of str to one of the 7 defined
sizes. when you specify
size as a string such as "-2", you adjust the font
size of str relative to the
size set in the <basefont> tag. ...
...integer between 1 and 7, a string representing a signed integer between 1 and 7. return value a string containing a <font> html element. description when you specify
size as an integer, you set the font
size of str to one of the 7 defined
sizes. when you specify
size as a string such as "-2", you adjust the font
size of str relative to the
size set in the <basefont> tag. ...
...between 1 and 7. return value a string containing a <font> html element. description when you specify
size as an integer, you set the font
size of str to one of the 7 defined
sizes. when you specify
size as a string such as "-2", you adjust the font
size of str relative to the
size set in the <basefont> tag. ...
...ring such as "-2", you adjust the font
size of str relative to the
size set in the <basefont> tag. examples using font
size() the following example uses string methods to change the
size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.font
size(7)); // <font
size="7">hello, world</font
size> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.font
size = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.font
size' in that specification. ...
mozbrowserresize
non-standard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserre
size event is fired when a browser <iframe> viewport is re
sized in some way. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. ...
...custom object. details the details property returns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels. height a number representing the new height of the <iframe> viewport, in device pixels. ...
...ns an anonymous javascript object with the following properties: width a number representing the new width of the <iframe> viewport, in device pixels. height a number representing the new height of the <iframe> viewport, in device pixels. ...
PRSize
a type for representing the
size of an object (not the
size of a pointer). this is the same as the corresponding type in libc. ...
... a type for representing the
size of an object (not the
size of a pointer). this is the same as the corresponding type in libc. ...
... a type for representing the
size of an object (not the
size of a pointer). this is the same as the corresponding type in libc. ...
AnalyserNode.fftSize - Web APIs
the fft
size property of the analysernode interface is an unsigned long value and represents the window
size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data. syntax var curvalue = analysernode.fft
size; analysernode.fft
size = newvalue; value an unsigned integer, representing the window
size of the fft, given in number of samples. a higher value will result in more details in the frequency domain but fewer details in the time domain. must be a power of 2 between 252^5 and 2152^15, so one of: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, and 32768. defaults to 2048. note: if its value is not a power of 2, or it is outside the specified range, a domexception with the name index
sizeerror is thrown. example the following example sh...
...onframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...
... working draft ...
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffer
size() method sets the browser's resource timing buffer
size to the specified number of "resource" performance entry type objects. a browser's recommended resource timing buffer
size is at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffer
size(max
size); arguments max
size a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. ...
... at least 150 performance entry objects. note: this feature is available in web workers. syntax performance.setresourcetimingbuffer
size(max
size); arguments max
size a number representing the maximum number of performance entry objects the browser should hold in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffer
size(max
size) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffer
size == "function"; if (supported) { log("... ...
...in its performance entry buffer. return value none this method has no return value. example function setresourcetimingbuffer
size(max
size) { if (performance === undefined) { log("browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffer
size == "function"; if (supported) { log("... performance.setresourcetimingbuffer
size() = yes"); performance.setresourcetimingbuffer
size(max
size); } else { log("... performance.setresourcetimingbuffer
size() = not supported"); } } specifications specification status comment resource timing level 1the definition of 'setresourcetimingbuffer
size()' in that specification. candidate recommendation initial definition. ...
ScriptProcessorNode.bufferSize - Web APIs
note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers. the buffer
size property of the scriptprocessornode interface returns an integer representing both the input and output buffer
size, in sample-frames. its value can be a power of 2 value in the range 256–16384. syntax var audioctx = new audiocontext(); var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffer
size); value an integer. example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the input track (buffer) and play it through the audiodestinationnode. for ...
...ull working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffer
size of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffer
size); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.res...
... working draft ...
size - CSS: Cascading Style Sheets
the
size css at-rule descriptor, used with the @page at-rule, defines the
size and orientation of the box which is used to represent a page. most of the time, this
size corresponds to the target
size of the printed page if applicable.
size may either be defined with a "scalable" keyword (in this case the page will fill the available dimensions) or with absolute dimensions. syntax /* keyword values for scalable
size */
size: auto;
size: portrait;
size: landscape; /* <length> values */ /* 1 value: height = width */
size: 6in; /* 2 values: width then height */
size: 4in 6in; /* keyword values for absolute
size */
size: a4;
size: b5;
size: jis-b4;
size: letter; /* mixing
size and orientation */
size: a4 portrait; values auto the user agent decides the
size of the page. in m...
...ide of the box is horizontal). portrait the content of the page is displayed in portrait mode (i.e. the longest side of the box is vertical). this is the default orientation. <length> any length value (see <length>). the first value corresponds to the width of the page box and the second one corresponds to its height. if only one value is provided, it is used for both width and height. <page-
size> a5 this matches the standard, iso dimensions: 148mm x 210mm. a4 this matches the standard, iso dimensions: 210mm x 297mm. (most frequently used dimensions for personal printing.) a3 this matches the standard, iso dimensions: 297mm x 420mm. b5 this matches the standard, iso dimensions: 176mm x 250mm. b4 this matches the standard, iso dimensions: 250mm x 353mm. jis-b5 t...
...s keyword is a equivalent to the dimensions of legal papers in north america i.e. 8.5in x 14in. ledger this keyword is a equivalent to the dimensions of ledger pages in north america i.e. 11in x 17in. formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-
size> | [ portrait | landscape ] ] examples specifying
size and orientation @page {
size: 4in 6in landscape; } nesting inside a @media rule @media print { @page {
size: 50mm 150mm; } } specifications specification status comment css paged media module level 3the definition of '
size' in that specification. working draft initial definition ...
font-size - SVG: Scalable Vector Graphics
the font-
size attribute refers to the
size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. note: as a presentation attribute, font-
size can be used as a css property. see the css font-
size property for more information. ...
... attribute, font-
size can be used as a css property. see the css font-
size property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-
size="smaller">smaller</text> <text x="100" y="20" font-
size="2em">2em</text> </svg> usage notes value <absolute-
size> | <relative-
size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-
size property. specifications specification status comment css font...
..." y="20" font-
size="2em">2em</text> </svg> usage notes value <absolute-
size> | <relative-
size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-
size property. specifications specification status comment css fonts module level 3the definition of 'font-
size' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-
size' in that specification. recommendation initial definition ...
resizeafter - Archive of obsolete content
« xul reference home re
sizeafter type: one of the values below this attribute indicates which element to the right or below the splitter should be re
sized when the splitter is repositioned. closest the element immediately to the right or below the splitter re
sizes. farthest the element that is the farthest away from the splitter to the right or below the splitter re
sizes. grow the elements to the right or below the splitter do not change
size (unless they are flexible) when the splitter is dragged, but instead the entire container changes
size. flex the closest flexible element re
sizes. ...
...he right or below the splitter re
sizes. farthest the element that is the farthest away from the splitter to the right or below the splitter re
sizes. grow the elements to the right or below the splitter do not change
size (unless they are flexible) when the splitter is dragged, but instead the entire container changes
size. flex the closest flexible element re
sizes. ...
background-size - Archive of obsolete content
ople especially interested in this browser are welcome to contribute. it's hard to get reliable information about its css support without having this browser (read: multiple versions of this browser) installed. are you able and willing to do that for all css properties? if so, feel free to change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-
size and investigate support of contain and cover keywords and "omitted second value" behavior. [i assume it's the same as safari, since they just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in...
... just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in some european countries). user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-
size is not supported? i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by every element on the page user:robertc 2009-08-08 -moz-border-image should not inherit. some example code? user:jürgen jeka 2009-08-09 ok, here's a page with both rules - the css is derived from the code on the page here, this is what it looks like ...
Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
in css, the intrinsic
size of an element is the
size it would be based on its content, if no external factors were applied to it. for example, inline elements are
sized intrinsically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do. how intrinsic
sizes are calculated is defined in the css intrinsic and extrinsic sizing specification. intrinsic sizing takes into account the min-content and max-content
size of an element. for text the min-content
size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content
size would be defined by the longest word. the keyword value of min-content for the widt...
...kes into account the min-content and max-content
size of an element. for text the min-content
size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content
size would be defined by the longest word. the keyword value of min-content for the width property will
size an element according to the min-content
size. the max-content
size is the opposite — in the case of text, this would have the text display as wide as possible, doing no soft-wrapping, even if an overflow was caused. the keyword value max-content exposes this behavior. ...
FC_GetObjectSize
name fc_getobject
size - create a copy of an object. syntax ck_rv fc_getobject
size( ck_session_handle hsession, ck_object_handle hobject, ck_ulong_ptr pus
size ); parameters hsession [in] session handle. hobject [in] object handle. pus
size [out] pointer to location to receive the object's
size. description fc_getobject
size gets the
size of an object in bytes. a user must log into the token (to assume the nss user role) before getting the
size of a secret or private key object. ...
...k_ulong_ptr pus
size ); parameters hsession [in] session handle. hobject [in] object handle. pus
size [out] pointer to location to receive the object's
size. description fc_getobject
size gets the
size of an object in bytes. a user must log into the token (to assume the nss user role) before getting the
size of a secret or private key object. ...
Blob.size - Web APIs
the blob interface's
size property returns the
size of the blob or file in bytes. syntax var
sizeinbytes = blob.
size value the number of bytes of data contained within the blob (or blob-based object, such as a file). example this example uses an <input> element of type file to ask the user for a group of files, then iterates over those files outputting their names and lengths in bytes. ...
... for a group of files, then iterates over those files outputting their names and lengths in bytes. // fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { console.log(files[i].name + " has a
size of " + files[i].
size + " bytes"); } specifications specification status comment file apithe definition of 'blob.
size' in that specification. working draft initial definition. ...
MediaKeyStatusMap.size - Web APIs
the
size read-only property of the mediakeystatusmap interface returns the number of key/value pairs in the status map. syntax var
size = mediakeystatusmap.
size; value a long integer. specifications specification status comment encrypted media extensionsthe definition of '
size' in that specification. 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. ...
...efinition. 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. ...
MediaTrackSupportedConstraints.sampleSize - Web APIs
the mediatracksupportedconstraints dictionary's sample
size property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the sample
size constraint. if the constraint isn't supported, it's not included in the list, so this value will never be false. you can access the supported constraints dictionary by calling navigator.mediadevices.getsupportedconstraints(). syntax sample
sizeconstraintsupported = supportedconstraintsdictionary.sample
size; value this property is present in the dictionary (and its value is always true) if the user agent supports the sample
size constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and yo...
...t. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().sample
size) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'sample
size' in that specification. candidate recommendation initial specification. ...
Canvas size and WebGL - Web APIs
« previousnext » this webgl example explores the effect of setting (or not setting) the canvas
size to its element
size in css pixels, as it appears in the browser window. effect of canvas
size on rendering with webgl with scissor() and clear() we can demonstrate how the webgl drawing buffer is affected by the
size of the canvas. the
size of the first canvas is set to the styled element
size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. ...
...the first canvas is set to the styled element
size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual
size of the canvas element in the browser window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and
size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape,
size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support ...
WritableStreamDefaultWriter.desiredSize - Web APIs
the desired
size read-only property of the writablestreamdefaultwriter interface returns the desired
size required to fill the stream's internal queue. syntax var desired
size = writablestreamdefaultwriter.desired
size; value an integer. note that this can be negative if the queue is over-full. the value will be null if the stream cannot be successfully written to (due to either being errored, or having an abort queued up), and zero if the stream is closed. exceptions typeerror the writer’s lock is released. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); ... ...
...n to (due to either being errored, or having an abort queued up), and zero if the stream is closed. exceptions typeerror the writer’s lock is released. examples const writablestream = new writablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = writablestream.getwriter(); ... // return stream's desired
size let
size = writer.desired
size; specifications specification status comment streamsthe definition of 'desired
size' in that specification. living standard initial definition. ...
Feature-Policy: unsized-media - HTTP
the http feature-policy header un
sized-media directive controls whether the current document is allowed to change the
size of media elements after the initial layout is complete. this restriction solves "layout instability" problem caused by providing default dimensions for images whose
size is not specified in advance so that image doesn't change
size after loading. syntax feature-policy: un
sized-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an ...
...l browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. default value the default value for un
sized-media is '*', that is un
sized media elements are allowed for all origins by default. the page will re-flow every time an image with unknown dimensions is loaded. specifications specification status comment feature policy editor's draft initial definition. ...
MozBeforeResize - Archive of obsolete content
general info specification mozilla specific interface event bubbles no cancelable no target window default action none properties property type description target read only eventtarget the event target (the topmost target in the dom tree). type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. ...
size - Archive of obsolete content
summary return the
size of the given file in bytes. method of file object syntax int
size (string nativefolderpath); parameters the
size method has the following parameters: nativefolderpath the full pathname to the file. returns a number representing the
size, in bytes, of the queried file. ...
equalsize - Archive of obsolete content
« xul reference home equal
size type: one of the values below this attribute can be used to make the children of the element equal in
size. always for a horizontally oriented element, this will make all of its children have the width of the widest child. for a vertically oriented element, this will make its children all have the height of the tallest child. never all of the children are displayed at the
size required by the content or as specified by the width and height attributes or the css width and height properties. ...
iconsize - Archive of obsolete content
« xul reference home icon
size type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively. these can vary from one toolbar to another within a given toolbox, whose icon
size attribute defines the default for all toolbars that don't specify an icon
size. ...
resizebefore - Archive of obsolete content
« xul reference home re
sizebefore type: one of the values below this attribute indicates which element to the left or above the splitter should be re
sized when the splitter is repositioned. closest the element immediately to the left or above the splitter re
sizes. farthest the element that is the farthest away from the splitter to the left or above the splitter re
sizes. flex the closest flexible element re
sizes. ...
resizer.dir - Archive of obsolete content
« xul reference home dir type: one of the values below the direction that the window is re
sized. left re
sized to the left. right re
sized to the right. top re
sized up. bottom re
sized down. bottomstart re
sized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales). bottomend re
sized down and toward the end of the line (toward the right for left-to-right locales, toward the left for right-to-left locales). bottomleft re
sized down and to the left. bottomright re
sized down and to the right. topleft re
sized up and to the left. topright re
sized up and to the right. see also dir ...
ByteLengthQueuingStrategy.size() - Web APIs
the
size() method of the bytelengthqueuingstrategy interface returns the given chunk’s bytelength property. syntax var
size = bytelengthqueuingstrategy.
size(chunk); parameters chunk a chunk of data being passed through the stream. return value an integer representing the byte length of the given chunk. examples const queuingstrategy = new bytelengthqueuingstrategy({ highwatermark: 1 }); const readablestream = new readablestream({ start(controller) { ... }, pull(controller) { ... }, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var
size = queueingstrategy.
size(chunk); specifications specification status comment streamsthe definition of '
size' in that specification. living standard initial defin...
File.fileSize - Web APIs
returns the
size of a file in bytes. this property is deprecated. use blob.
size instead. syntax var
size = instanceoffile.file
size; value a number. specification not part of any specification. ...
File.size - Web APIs
summary returns the
size of a file in bytes. syntax var
size = instanceoffile.
size value a number specification not part of any specification. ...
KeyboardLayoutMap.size - Web APIs
the
size read-only property of the keyboardlayoutmap interface returns the number of elements in the map. syntax var
size = keyboardlayoutmap.
size() value a number. specifications specification status comment keyboard mapthe definition of '
size' in that specification. editor's draft initial definition. ...
ReadableByteStreamController.desiredSize - Web APIs
the desired
size read-only property of the readablebytestreamcontroller interface returns the desired
size required to fill the stream's internal queue. syntax var desired
size = readablebytestreamcontroller.desired
size; value an integer. note that this can be negative if the queue is over-full. examples tbd. specifications specification status comment streamsthe definition of 'desired
size' in that specification. living standard initial definition. ...
ReadableStreamDefaultController.desiredSize - Web APIs
the desired
size read-only property of the readablestreamdefaultcontroller interface returns the desired
size required to fill the stream's internal queue. syntax var desired
size = readablestreamdefaultcontroller.desired
size; value an integer. note that this can be negative if the queue is over-full. examples the a readable stream with an underlying push source and backpressure support example in the spec provides a good example of using desired
size to manually detect when the stream is full and apply backpressure, and also of using readablestreamdefaultcontroller.error() to manually trigger a stream error if another part of the system it relies on fails. specifications specification status comment streamsthe definition of 'desired
size' in that specification. ...
ResizeObserver.disconnect() - Web APIs
the disconnect() method of the re
sizeobserver interface unobserves all observed element or svgelement targets. syntax re
sizeobserver.disconnect(); parameters none. return value void. exceptions none. examples btn.addeventlistener('click', () => { re
sizeobserver.disconnect(); }) specifications specification status comment re
size observerthe definition of 'disconnect()' in that specification. editor's draft initial definition. ...
SVGElement: resize event - Web APIs
the re
size event is fired when an svg document is being re
sized. this event is only applicable to outermost svg elements and is dispatched after the re
size operation has taken place. this basically implements the standard re
size dom event. bubbles no cancelable no interface svgevent event handler property onre
size examples svgelem.addeventlistener('re
size', () => { console.log('svg re
sized.'); }) specifications specification status comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification. candidate recommendation initial definition ...
VisualViewport.onresize - Web APIs
the onre
size event handler of the visualviewport interface is called when a viewport is re
sized, i.e. when the re
size event is fired. syntax visualviewport.onre
size = function(e) { ... } examples visualviewport.onre
size = function(e) { ... } specifications specification status comment visual viewport apithe definition of 'onre
size' in that specification. draft initial definition. ...
WebGLActiveInfo.size - Web APIs
the read-only webglactiveinfo.
size property is a number representing the
size of the requested data returned by calling the getactiveattrib() or getactiveuniform() methods. examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.
size; var activeuniform = gl.getactiveuniform(program, index); activeuniform.
size; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.
size' in that specification. recommendation initial definition. ...
Window.resizeTo() - Web APIs
the window.re
sizeto() method dynamically re
sizes the window. syntax window.re
sizeto(width, height) parameters width an integer representing the new outerwidth in pixels (including scroll bars, title bars, etc). height an integer value representing the new outerheight in pixels (including scroll bars, title bars, etc). example this function re
sizes the window so that it takes up one quarter of the available screen. see the screen.availwidth and screen.availheight properties. function quarter() { window.re
sizeto( window.screen.availwidth / 2, window.screen.availheight / 2 ); } specification specification status comment css object model (cssom) view modulethe definition of 'window.re
sizeto()' in that specification. working draft ...
Window.sizeToContent() - Web APIs
the window.
sizetocontent() method
sizes the window according to its content. in order for it to work, the dom content should be loaded when this function is called—for example, once the domcontentloaded event has been thrown. the minimal
size of the window can be clamped. syntax window.
sizetocontent() example window.
sizetocontent(); specification this feature is not part of any specification. ...
Feature-Policy: oversized-images - HTTP
'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. ...
Map.prototype.size - JavaScript
the
size accessor property returns the number of elements in a map object. 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. description the value of
size is an integer representing how many entries the map object has. a set accessor function for
size is undefined; you can not change this property. examples using
size var mymap = new map(); mymap.set('a', 'alpha'); mymap.set('b', 'beta'); mymap.set('g', 'gamma'); mymap.
size // 3 specifications specification ecmascript (ecma-262)the definition of 'map.prototype.
size' in that specification. ...
Set.prototype.size - JavaScript
the
size accessor property returns the number of (unique) elements in a set object. 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. description the value of
size is an integer representing how many entries the set object has. a set accessor function for
size is undefined; you cannot change this property. examples using
size var myset = new set(); myset.add(1); myset.add(5); myset.add('some text') myset.
size; // 3 specifications specification ecmascript (ecma-262)the definition of 'set.prototype.
size' in that specification. ...
Index - Web APIs
passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations. 52 analysernode.analysernode() api, analysernode, audio, constructor, media, reference, web audio api the analysernode constructor of the web audio api creates a new analysernode object instance. 53 analysernode.fft
size api, analysernode, property, reference, web audio api, fft
size the fft
size property of the analysernode interface is an unsigned long value and represents the window
size in samples that is used when performing a fast fourier transform (fft) to get frequency domain data. 54 analysernode.frequencybincount api, analysernode, property, reference, web audio api, frequencybinc...
...this generally equates to the number of data values you will have to play with for the visualization. ...
...a new blob object. the content of the blob consists of the concatenation of the values given in the parameter array. 288 blob.arraybuffer() api, arraybuffer, blob, file api, method, reference, binary, read the arraybuffer() method in the blob interface returns a promise that resolves with the contents of the blob as binary data contained in an arraybuffer. 289 blob.
size api, blob, bytes, file api, files, property, reference, length,
size the blob interface's
size property returns the
size of the blob or file in bytes. 290 blob.slice() api, blob, file, file api, method, reference, section, subset, data, slice, split the blob interface's slice() method creates and returns a new blob object which contains data from a subset of the blo...
...And 85 more matches
Memory reporting
eporter documentation and nsimemoryreporter.idl for full details. making measurements nsimemoryreporter provides the high-level interface for a memory reporter, but the heart of a memory reporter is the measurement of the "amount". two ways to measure memory reporters can be divided into the two following kinds. traversal-based reporters traverse one or more data structures and measure the
size of all the allocated blocks in the data structure. counter-based reporters maintain a counter that is incremented on each relevant allocation and decremented on each relevant deallocation. traversal-based reporters are preferable, for the following reasons. they are less error-prone. we've had multiple bugs in the past with counter-based reporters. the cost of reporting isn't incurred unle...
...ch is a tool that helps keep about:memory's "heap-unclassified" number low. see below for more details. sometimes counter-based reporters are unavoidable, particularly when writing memory reporters for third-party code that cannot be modified. ...
... reporters are unavoidable, particularly when writing memory reporters for third-party code that cannot be modified. a simple example imagine a simple string class with the following data fields: class mystring { private: char *mbuffer; // heap-allocated
size_t mlen; // ... methods ... } here are what the measurement functions (yes, functions) should look like for this class. ...
...And 35 more matches
nsIDOMWindowUtils
ctivatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double computeanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthe
sizer createcompositionstringsynthe
sizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); nsidomelement elementfrompoint(in float ax, in float ay, in boolean aignorerootscrollframe, in boolean aflushlayout); void entermodalsta...
...lushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcomputedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atop
size, in float aright
size, in float abottom
size, in float aleft
size, in boolean aignorerootscrollframe, in boolean aflushlayout); void processupdates(); obsolete since gecko 13.0 void purgepccounts(); unsigned long redraw([optional] in unsigned long acount); void renderdocument(in nsconstrect arect, in pruint32 aflags, in nscolor abackgroundcolor, in gfxcontex...
..., in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclauselength, in unsigned long afirstclauseattr, in long asecondclauselength, in unsigned long asecondclauseattr, in long athirdclauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength); obsolete since gecko 26 boolean sendtouchevent(in astring atype, [array,
size_is(count)] in pruint32 aidentifiers, [array,
size_is(count)] in print32 axs, [array,
size_is(count)] in print32 ays, [array,
size_is(count)] in pruint32 arxs, [array,
size_is(count)] in pruint32 arys, [array,
size_is(count)] in float arotationangles, [array,
size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe); void setcs...
...And 28 more matches
Using CSS transitions - CSS: Cascading Style Sheets
ur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...y to transition over a different period of time. ...
...dth: 100px; height: 100px; background-color: red; font-
size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-
size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-
size left top transform -webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-
size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width he...
...And 28 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
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'] .input[data-topic="value...
...radius: 3px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-slider-button:hover { background-color: #379b4a; cursor: pointer; } .ui-slider > input { width: 50px; margin: 0 10px; padding: 0; text-align: center; } /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-
size: 12px; background-image: url("dropdown_arrow.svg"); background-position: right 0.3em center; background-repeat: no-repeat; background-color: #359740; background-
size: 1.1em; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-dro...
...1.6em; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } body[data-dragging="true"] { } /** * re
size handle */ .re
size-handle { width: 10px; height: 10px; background: url("images/re
size.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-re
size='both']:hover { cursor: nw-re
size !important; } [data-re
size='width']:hover { cursor: w-re
size !important; } [data-re
size='height']:hover { cursor: n-re
size !important; } /** * main container */ #container { ...
...And 26 more matches
Web video codec guide - Web media technologies
imagine the amount of data needed to store uncompressed video: a single frame of high definition (1920x1080) video in full color (4 bytes per pixel) is 8,294,400 bytes. at a typical 30 frames per second, each second of hd video would occupy 248,832,000 bytes (~249 mb). a minute of hd video would need 14.93 gb of storage. a fairly typical 30 minute video conference would need about 447.9 gb of storage, and a 2-hour movie would take almost 1.79 tb (that is, 1790 gb). ...
... 3gp, mp4 mpeg-1 mpeg-1 part 2 visual mpeg, quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3gp, ogg, webm vp9 video processor 9 mp4, ogg, webm factors affecting the encoded video as is the case with any encoder, there are two basic groups of factors affecting the
size and quality of the encoded video: specifics about the source video's format and contents, and the characteristics and configuration of the codec used while encoding the video. the simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. thus, it's always a tradeoff of
size versus qual...
...s, and the characteristics and configuration of the codec used while encoding the video. the simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. thus, it's always a tradeoff of
size versus quality. in some situations, a greater sacrifice of quality in order to bring down the data
size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file. effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works. if the codec converts the media into an internal pi...
...And 26 more matches
Fundamental text and font styling - Learn web development
id tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. truly a wonder of nature this urban predator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font
size in our previous module's css values and units article, we reviewed length and
size units. font
size (set with the font-
size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to
size text are: px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same fin...
...t with the font-
size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to
size text are: px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font
size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of nested elements with different font
sizes set, but it is doable, as you'll see below. ...
...s equal to the font
size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tricky to work out if you have a lot of nested elements with different font
sizes set, but it is doable, as you'll see below. why bother? ...
...And 25 more matches
Index - Archive of obsolete content
code snippets non-modal notification and further interaction with users 173 autocomplete code snippets, form fill, satchel no summary! 174 bookmarks code snippets, developing mozilla, extensions, places no summary! 175 boxes code snippets make the box style="display: block" and the wrapping behavior will occur when the box is re
sized: 176 canvas code snippets canvas, code snippets, graphics no summary! 177 cookies add-ons, code snippets, cookies, extensions no summary! 178 customizing the download progress bar no summary! 179 delayed execution code snippets no summary! 180 dialogs and prompts add-ons, code snippets, extensions...
... 392 finding the file to modify add-ons, extensions now that we have a hackable mozilla, it's time to find the file we want to hack. mozilla's ui is divided into three layers: the structure, the style, and the behavior. the structure layer identifies the widgets (menus, buttons, 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, c...
...hat are often overlooked for visual layouts. underlined text may be read by the screen reader. 752 attribute (xul) xul attributes, xul reference no summary! 753 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum
sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the
size, except in the other direction. 754 accelerated xul, xul attribute, xul reference no summary! 755 acceltext xul attributes, xul reference no summary! 756 accessible xul...
...And 23 more matches
Responsive images - Learn web development
this helps to improve performance across different devices. responsive images are just one part of responsive design, a future css topic for you to learn. prerequisites: you should already know the basics of html and how to add static images to a web page. ...
...0px high. the content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it. however, issues arise when you start to view the site on a narrow screen device. the header below looks ok, but it's starting to take up a lot of the screen height for a mobile device. and at this
size, it is difficult to see the people within the first content image. an improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. a second cropped image could be displayed for a medium width screen device, like a tablet. this is commonly known as the art direction problem. in addition, there is no...
... when the site is viewed on a narrow screen. a second cropped image could be displayed for a medium width screen device, like a tablet. this is commonly known as the art direction problem. in addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. and conversely, a small raster image starts to look grainy when displayed larger than its original
size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). this is called the resolution switching problem. conversely, it is unnecessary to display a large image on a screen significantly smaller than the
size it was meant for. doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading...
...And 23 more matches
Enc Dec MAC Output Public Key as CSR
ense, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...l was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
... can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 23 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
given the flexibility of svg images, there's a lot to keep in mind when using them as background images with the background-image property, and even more to keep in mind when also scaling them using the background-
size property. this article describes how scaling of svg images is handled when using these properties. the algorithm, in summary the algorithm can for the most part be summarized by these four rules. there are some edge cases that aren't covered by these rules, but this covers the majority of cases. if background-
size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins. if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered s...
...covered by these rules, but this covers the majority of cases. if background-
size specifies a fixed dimension (that is, percentages and relative units are fixed by their context), that dimension wins. if the image has an intrinsic ratio (that is, its width:height ratio is constant, such as 16:9, 4:3, 2.39:1, 1:1, and so forth), the rendered
size preserves that ratio. if the image specifies a
size, and the
size isn't modified by constrain or cover, that specified
size wins. if none of the above cases are met, the image is rendered at the same
size as the background area. it's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. an svg image with fixed dimensions will be treated just like a raster image of the same
size. source...
...
size as the background area. it's worth noting that the sizing algorithm only cares about the image's dimensions and proportions, or lack thereof. an svg image with fixed dimensions will be treated just like a raster image of the same
size. source image examples before diving in to look at the results of using different kinds of source images and seeing how they look when used with background-
size, it would be helpful to look at a few example source images that have different dimensions and sizing settings. in each case, we show what the source image looks like rendered in a 150x150 box, and provide a link to the svg source. dimensionless and proportionless this image is both dimensionless and proportionless. ...
...And 23 more matches
Localization Use Cases
like a robot: <crashbanneros2[brandshortname::_gender] { masculine: "{{ brandshortname }} uległ awarii", feminine: "{{ brandshortname }} uległa awarii", neutral: "{{ brandshortname }} uległo awarii" }> this will give us, depending on the current branding, the following messages: firefox os uległ awarii boot2gecko uległo awarii isolation let's look at how the settings app formats
sizes. first, there is devicestoragehelper.showformated
size (sic): function showformated
size(element, l10nid,
size) { if (
size === undefined || isnan(
size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (
size < 1024 * 1024) ? 0 : 1; var
sizeinfo = file
sizeformatter.getreadablefile
size(
size, fixeddigits); var ...
...ction showformated
size(element, l10nid,
size) { if (
size === undefined || isnan(
size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (
size < 1024 * 1024) ? ...
...showformated
size(element, l10nid,
size) { if (
size === undefined || isnan(
size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (
size < 1024 * 1024) ? ...
...And 22 more matches
Space Manager Detailed Design - Archive of obsolete content
to be subclasses . here is the class declaration, taken from the source file as of 01.08.02 /** * class for dealing with bands of available space. the space manager * defines a coordinate space with an origin at (0, 0) that grows down * and to the right. */ class nsspacemanager { public: nsspacemanager(nsipresshell* apresshell, nsiframe* aframe); ~nsspacemanager(); void* operator new(
size_t a
size); void operator delete(void* aptr,
size_t a
size); static void shutdown(); /* * get the frame that's associated with the space manager. this frame * created the space manager, and the world coordinate space is * relative to this frame. * * you can use queryinterface() on this frame to get any additional * interfaces. */ nsiframe* getframe() const { return mfr...
...e no bands */ prbool ymost(nscoord& aymost) const; /** * returns a band starting at the specified y-offset. the band data * indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. ...
...and data * indicates which parts of the band are available, and which parts * are unavailable * * the band data that is returned is in the coordinate space of the * local coordinate system. * * the local coordinate space origin, the y-offset, and the max
size * describe a rectangle that's used to clip the underlying band of * available space, i.e. ...
...And 21 more matches
Responsive design - Learn web development
previous overview: css layout next in the early days of web design, pages were built to target a particular screen
size. if the user had a larger or smaller screen than the designer expected, results ranged from unwanted scrollbars to overly long line lengths, and poor use of space. as more diverse screen
sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article, we'll help you understand the main techniques you need to know to master it. prerequisites: html basics (study introduction to html), and an idea of how css works (study c...
... idea of how css works (study css first steps and css building blocks.) objective: to understand the fundamental concepts and history of responsive design. historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the browser window or a fixed width site, which would be a fixed
size in pixels. these two approaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser window in and out to see ho...
...proaches tended to result in a website that looked its best on the screen of the person designing the site! the liquid site resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones. note: see this simple liquid layout: example, source code. when viewing the example, drag your browser window in and out to see how this looks at different
sizes. the fixed-width site risked a horizontal scrollbar on screens smaller than the site width (as seen below), and lots of white space at the edges of the design on larger screens. note: see this simple fixed-width layout: example, source code. again, observe the result as you change the browser window
size. note: the screenshots above are taken using the responsive design mode in firefo...
...And 21 more matches
Using the CSS Painting API - Web APIs
.0), which is a shade of yellow, and then call fillrect() to create a rectangle of that color. the fillrect() parameters are, in order, x-axis origin, y-axis origin, width, and height. fillrect(0, 15, 200, 20) results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box. we can use the css background-
size and background-position properties to re-
size or relocate this background image, but this is the default
size and placement of the yellow box we created in our paint worklet. we tried to keep the example simple. for more options, look at the canvas documentation. we also add a little bit of complexity later in this tutorial. using the paint worklet to use the paint worklet, we need to register...
...ction. .fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api. while you can't play with the worklet's script, you can alter the background-
size and background-position to change the
size and location of the background image. paint
size in the example above, we created a 20x200 unit box, painted 15 units from the top of the element it is the same regardless of the
size of the element. if the text is small, the yellow box looks like a huge underline. if the text is huge, the box might look like an bar above the first three letters. it wo...
...the 3rd example has width: 50%; set on the block level element, making the element narrower and therefore the background image narrower. ...
...And 21 more matches
Encrypt Decrypt_MAC_Using Token
or storing. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 20 more matches
Border-image generator - CSS: Cascading Style Sheets
ui-dropdown border-repeat" data-topic="image-repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-
size" data-info="em
size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> </div...
...input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-
size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; ...
...-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; background-image: url("...
...And 20 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
in this guide we will be exploring the three properties that are applied to flex items, which enable us to control the
size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox. a first look our three properties control the following aspects of a flex item's flexibility: flex-grow: how much of the positive free space does this item get? flex-shrink: how much negative free space can be removed from this item? flex-basis: what is the
size of the item before growing and shrinking happens? the properties are usually expressed as the shorthand flex property. the following code would set the flex-grow property to 2, flex-shrink to 1 and...
...xbox, then you will have already had an introduction to the properties. here we will explore them in depth in order that you can fully understand what the browser is doing when you use them. important concepts when working on the main axis there are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. these relate to the natural
size of flex items before any growing or shrinking takes place, and to the concept of free space. flex item sizing in order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. how is this worked out for items that don’t have a width or a height applied using an absolute length unit? there is a concept in css of min-cont...
...lace of a length unit. in the live example below for instance i have two paragraph elements that contain a string of text. the first paragraph has a width of min-content. in a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. this then, is the min-content
size of that string. essentially, the longest word in the string is dictating the
size. the second paragraph has a value of max-content and so it does the opposite. it gets as big as it possibly can be, taking no soft-wrapping opportunities. it would overflow the box it is in if that container was too narrow. if your browser does not yet support these keywords both paragraphs will be rendered as n...
...And 20 more matches
cursor - CSS: Cascading Style Sheets
d the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. ...
...t be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-re
size the item/column can be re
sized horizontally. ...
...mething is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-re
size the item/column can be re
sized horizontally. often rendered as arrows pointing left and right with a vertical bar separating them. row-re
size the item/row can be re
sized vertically. often rendered as arrows pointing up and down with a horizontal bar separating them. ...
...And 18 more matches
StringView - Archive of obsolete content
ser:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later. ...
...tional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, fputoutptcode, fgetoutptchr
size, ninptlen, nstartidx = isfinite(noffset) ? ...
...set) ? ...
...And 17 more matches
Element Positioning - Archive of obsolete content
« previousnext » here we'll look at controlling the position and
size of an element. box element positioning so far, we know how to position elements either horizontally or vertically inside a box. we will often need more control over the position and
size of elements within the box. for this, we first need to look at how a box works. the position of an element is determined by the layout style of its container. for example, the position of a button in a horizontal box is to the right of the previous button, if any. the
size of an element is determined by two factors, the
size that the element wants to be and the
size you specify. the
size that an element wants to be is determined by what is in the element. for example, a button's width is determined by the amount of text ...
...the third button is larger because it contains more content. ...
...t will generally be as large as it needs to be to hold its contents, and no larger. some elements, such as textboxes have a default
size, which will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. in the image, the first two buttons have been given a suitable
size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a suitable
size to hold the text. width and height attributes you may need to have more control over the
size of an element in a window. there are a number of features that allow...
...And 17 more matches
sample2
h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <cryptohi.h> #include <keyhi.h> #include <pk11priv.h> #include <cert.h> #include <base64.h> #include <secerr.h> #include <secport.h> #include <secoid.h> #include <secmodt.h> #include <secoidt.h> #include <sechash.h> /* our samples utilities */ #include "util.h" /* constants */ #define block
size 32 #define modblock
size 128 #define default_key_bits 1024 /* header file constants */ #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----" #define mackey_header "-----begin wrapped mackey-----" #define mackey_trailer "-----end wrapped mackey-----" #define iv_header "-----begin iv-----" #define iv_trailer "-----end iv-----" #define mac_header...
..., infilename); rv = secfailure; goto cleanup; } /* sign using private key */ sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; } rv = sgn_begin(sgn); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf,
sizeof(ibuf))) > 0) { rv = sgn_update(sgn, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_update\n"); goto cleanup; } } rv = sgn_end(sgn, res); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (sgn) { sgn_destroycontext(sgn, pr_true); } return rv; } /* * verify the signature using public...
...nfilename); rv = secfailure; goto cleanup; } vfy = vfy_createcontext(pk, sigitem, sec_oid_pkcs1_md5_with_rsa_encryption, pwdata); if (!vfy) { pr_fprintf(pr_stderr, "unable to create context for verifying signature\n"); rv = secfailure; goto cleanup; } rv = vfy_begin(vfy); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf,
sizeof(ibuf))) > 0) { rv = vfy_update(vfy, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_update\n"); goto cleanup; } } rv = vfy_end(vfy); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while vfy_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(infile); } if (vfy) { vfy_destroycontext(vfy, pr_true); } return rv; } /* * write cryptographic parameters to head...
...And 17 more matches
Color picker tool - CSS: Cascading Style Sheets
ght: 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'] .input[data-topic="value...
...nd-color: #379b4a; cursor: pointer; } /* * color picker tool */ body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; box-shadow: 0 0 5px 0 #999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } /** * re
size handle */ .re
size-handle { width: 10px; height: 10px; background: url('https://mdn.mozillademos.org/files/6083/re
size.png') center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-re
size='both']:hover { cursor: nw-re
size !important; } [data-re
size='width']:hover { cursor: w-re
size !important; } [data-re
size='height']:hover { cursor: n-re
size !important; } [data-hid...
...ps://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #ccc; font-
size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switch [data-active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * tras...
...And 17 more matches
Encrypt Decrypt MAC Keys As Session Objects
on objects. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 16 more matches
Encrypt and decrypt MAC using token
or storing. /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 16 more matches
Sizing items in CSS - Learn web development
previous overview: building blocks next in the various lessons so far you have come across a number of ways to
size items on a web page using css. understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a
size via css and define a few terms around sizing that will help you in the future. ...
...marize the various ways elements get a
size via css and define a few terms around sizing that will help you in the future. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the different ways we can
size things in css. the natural or intrinsic
size of things html elements have a natural
size, set before they are affected by any css. a straightforward example is an image. an image has a width and a height defined in the image file it is embedding into the page. this
size is described as the intrinsic
size — which comes from the image itself. if you place an image on a page and do not ch...
... affected by any css. a straightforward example is an image. an image has a width and a height defined in the image file it is embedding into the page. this
size is described as the intrinsic
size — which comes from the image itself. if you place an image on a page and do not change its height and width, either using attributes on the <img> tag or css, it will be displayed using that intrinsic
size. we have given the image in the example below a border so that you can see the extent of the file. an empty <div> however, has no
size of its own. if you add a <div> to your html with no content, then give it a border as we did with the image, you will see a line on the page. this is the collapsed border on the element — there is no content to hold it open. in our example below, that border ...
...And 15 more matches
Index
as shared libraries. the crmf library, which is used to produce certain kinds of certificate requests, is available as a library for static linking only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small
sized) presentation. it was originally developed for telecommunication systems at times where it was critical to minimize data as much as possible (although it still makes sense to use that principle today for good performance). in order to process data available in the asn.1 format, the usual approach is to parse it and transfer it to a presentation that requires more space but is easier to work with...
...hen importing data from files. a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss. looking at the code level, nss deals with blocks of raw data all the time. the common structure to store such an untyped block is secitem, which contains a
size and an untyped c pointer variable. when dealing with memory, nss makes use of arenas, which are an attempt to simplify management with the limited offerings of c (because there are no destructors). the idea is to group multiple memory allocations in order to simplify cleanup. performing an operation often involves allocating many individual data items, and the code might be required to abort a...
...r hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag. ...
...And 15 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
t distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
... can obtain one at http://mozilla.org/mpl/2.0/. ...
... sgn = sgn_newcontext(sec_oid_pkcs1_md5_with_rsa_encryption, pk); if (!sgn) { pr_fprintf(pr_stderr, "unable to create context for signing\n"); rv = secfailure; goto cleanup; } rv = sgn_begin(sgn); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_begin\n"); goto cleanup; } while ((nb = pr_read(infile, ibuf,
sizeof(ibuf))) > 0) { rv = sgn_update(sgn, ibuf, nb); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_update\n"); goto cleanup; } } rv = sgn_end(sgn, res); if (rv != secsuccess) { pr_fprintf(pr_stderr, "problem while sgn_end\n"); goto cleanup; } cleanup: if (infile) { pr_close(inf...
...And 15 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
3: basic encryption and macing this example program demonstrates how to encrypt and mac a file. ...
...this example program demonstrates how to encrypt and mac a file. ...
...rypt and mac a file. ...
...And 15 more matches
EncDecMAC using token object - sample 3
ass="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...this source code form is subject to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...to the terms of the mozilla public * license, v. 2.0. if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/. ...
...And 15 more matches
imgIContainer
thunderbird 14.0 / seamonkey 2.11) implemented by: ?????????????????????????????????????. ...
...rg/????????????????????????????"] .createinstance(components.interfaces.imgicontainer); method overview void addrestoredata([array,
size_is(acount), const] in char data, in unsigned long acount); native code only! obsolete since gecko 2.0 void appendframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array,
size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only! ...
...appendframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, [array,
size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only! obsolete since gecko 2.0 void appendpalettedframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximageformat aformat, in pruint8 apalettedepth, [array,
size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array,
size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); native code only! obsolete since gecko 2.0 void clear(); obsolete since gecko 1.9.2 gfximagesurface copycurrentframe(); native code only! obsolete since gecko 2.0 gfximagesurface copyframe(in pruint32 awhich...
...And 15 more matches
How can we design for all types of users? - Learn web development
suggest a local checker because it comes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. ...
...ause it comes packaged with an on-screen color picker to find out a color value. for instance, let's test the colors on this page and see how we fare in the colour contrast analyser: the luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. font
size you can specify font
size on a website either through relative units or absolute units. absolute units absolute units are not proportionally calculated but refer to a
size set in stone, so to speak, and are expressed most of the time in pixels (px). for instance, if in your css you declare this: body { font-
size:16px; } … you are telling the browser that whatever happens, the font
size must be 16 pixels. modern brow...
...s case, zooming did nothing, even as late as internet explorer 8, which we still have to cater to because it's still around. relative units also called proportional units, relative units are computed relative to a parent element. relative units are friendlier to accessibility because they respect the settings on the user's system. ...
...And 14 more matches
Using the Resource Timing API - Web APIs
it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.). the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc. the interface also includes other properties that provide data about the
size of the fetched resource as well as the type of resource that initiated the fetch. this document shows the use of resource timing interfaces. for more details about the interfaces, including examples, see each interface's reference page and the references in the see also section. a live version of the examples is available on github, as is the source code. pull requests and bug reports are welco...
... until reponse end t = (resources[i].requeststart > 0) ? (resources[i].responseend - resources[i].requeststart) : "0"; console.log("... request start until response end time = " + t); // start until reponse end t = (resources[i].starttime > 0) ? (resources[i].responseend - resources[i].starttime) : "0"; console.log("... ...
...t = (resources[i].requeststart > 0) ? (resources[i].responseend - resources[i].requeststart) : "0"; console.log("... request start until response end time = " + t); // start until reponse end t = (resources[i].starttime > 0) ? (resources[i].responseend - resources[i].starttime) : "0"; console.log("... ...
...And 14 more matches
Index - Archive of obsolete content
es that are often overlooked for visual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum
sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the
size, except in the other direction. 7 accelerated xul, xul attribute, xul reference no summary! 8 acceltext xul attributes, xul reference no summary! 9 accessible xul attri...
... element xul attributes, xul reference no summary! 111 empty xul attributes, xul reference no summary! 112 emptytext xul attributes, xul reference no summary! 113 enablecolumndrag xul attributes, xul reference no summary! 114 enablehistory xul attributes, xul reference no summary! 115 equal
size xul attributes, xul reference no summary! 116 eventnode xul attributes, xul reference no summary! 117 events xul attributes, xul reference no summary! 118 expr xul attributes, xul reference no summary! 119 fadein xul, xul attribute, xul reference no summary! 120 findnextaccesskey xul, xul ...
... no summary! 143 highlightaccesskey no summary! 144 highlightnonmatches xul attributes, xul reference no summary! 145 homepage xul attributes, xul reference no summary! 146 href xul attributes, xul reference no summary! 147 icon xul attributes, xul reference no summary! 148 icon
size toolbar, xul, xul attribute no summary! 149 id xul attributes, xul reference no summary! 150 iframe.transparent no summary! 151 ignoreblurwhilesearching xul attributes, xul reference no summary! 152 ignorecase xul attributes, xul reference no summary! 153 ignoreincolumnpicker xul attribut...
...And 13 more matches
WebGL best practices - Web APIs
fo webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...so: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...o/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low. ...
...And 13 more matches
Border-radius generator - CSS: Cascading Style Sheets
ing: 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: "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; background-image: url("...
...: 3px solid #c60; background: #fff; position: relative; } .radius { width: 50%; height: 50%; border: 1px solid #ccc; display: none; position: absolute; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .handle { width: 16px; height: 16px; position: absolute; z-index: 2; } .handle-top-left { top: -12px; left: -12px; cursor: se-re
size; background: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") top left no-repeat; } .handle-top-right { top: -12px; right: -12px; cursor: sw-re
size; background: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") top right no-repeat; } .handle-bottom-right { bottom: -12px; right: -12px; cursor: nw-re
size; background: url("https://mdn.mozillademos.org/files/...
...ground: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") top left no-repeat; } .handle-top-right { top: -12px; right: -12px; cursor: sw-re
size; background: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") top right no-repeat; } .handle-bottom-right { bottom: -12px; right: -12px; cursor: nw-re
size; background: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") bottom right no-repeat; } .handle-bottom-left { bottom: -12px; left: -12px; cursor: ne-re
size; background: url("https://mdn.mozillademos.org/files/5677/re
size-handle.png") bottom left no-repeat; } .radius-container { position: absolute; display : block; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* top left */ #t...
...And 13 more matches
Box-shadow generator - CSS: Cascading Style Sheets
x; 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 > input { display: none; } .ui-checkbox > label { font-
size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("...
...om: 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; color: #333; background-color: #eee; text-align: center; font-
size: 0.75em; line-height: 1.5em; border: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #3380c4; border: 1px solid #3380c4; cursor: pointer; } #layer_manager [data-ty...
...'move-down'] { background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); } #layer_manager [data-type='move-down']:hover { background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); } /* shadows classes */ #layer_manager .node { width: 100%; margin: 5px 0; padding: 5px; text-align: center; background-color: #eee; border: 1px solid #ddd; font-
size: 0.75em; line-height: 1.5em; color: #333; border-radius: 3px; position: relative; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #layer_manager .node:hover { color: #fff; background-color: #3380c4; cursor: pointer; } /* active element styling */ #layer_manager [data-active='layer'] { color: #fff; border: none; background-c...
...And 13 more matches
background - CSS: Cascading Style Sheets
the background shorthand css property sets all background style properties at once, such as color, image, origin and
size, or repeat method. 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. ...
... 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. ...
...background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas. the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-
size> <repeat-style> the <bg-
size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/80%". the <box> value may be included zero, one, or two times. if included once, it sets both background-origin and background-clip. if it is included twice, the first occurrence sets background-origin, and the second sets background-clip. the <bac...
...And 13 more matches
font - CSS: Cascading Style Sheets
f you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). ...
...ty, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). though not directly settable by font, the longhands font-
size-adjust and font-kerning are also reset to their initial values. constituent properties this property is a shorthand for the following css properties: font-family font-
size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several ...
...x the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system keyword, it must be one of: caption, icon, menu, message-box, small-caption, status-bar. if font is specified as a shorthand for several font-related properties, then: it must include values for: <font-
size> <font-family> it may optionally include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-
size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value. line-height must immediately follow...
...And 13 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
it is a sprawling enterprise site. read more about responsive design advantages and disadvantages. you can also read our discussion on the basics of responsive design, if you need some more background information and basics. fluid grids the best place to start is with fluid measurements for our application layout — essentially, this means using a combination of percentages and ems/rems to
size your containers and text, not fixed widths such as pixels. this has a lot of advantages in that the layout will adapt to different viewport dimensions. let's look at an example. we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canva...
...nth-child(1), x-card:nth-child(2) { width: 30%; float: left; padding: 2rem; } x-card:nth-child(3) { width: 40%; float: left; height: 100%; overflow: auto; padding: 2rem; } so we're giving the first two columns a width of 30%, and the third a width of 40%, floating the columns all left. this way they end up side-by-side, and their proportions remain the same as the browser window
size varies. this is just a simple grid example, but you can apply this principle to more complex grid layouts as required. border-box sizing the padding does not affect the overall width and height of the containers because we have set the box-sizing of all elements to border-box: *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } t...
...dth, not added to it. very useful! read more about this at * { box-sizing: border-box } ftw, by paul irish. flexible replaced elements things are working fairly well now, but there are still some issues just waiting to present themselves. for a start, let's have a look at what happens when we include the <video> and <img> elements inside our first two columns, naked and unstyled. because the
size of replaced elements is dictated by the
size of the media inserted into them, and the media is a fixed
size, they explode out of their containing elements and make a mess of the layout. this is pretty horrible, but generally this kind of problem is easily fixed with some simple css: img, video { max-width: 100%; } this tells the replaced elements to remain constrained inside their container's...
...And 13 more matches
Splitters - Archive of obsolete content
« previousnext » we'll now look at how to add splitters to a window. splitting a box there may be times when you want to have two sections of a window where the user can re
size the sections. an example is the mozilla browser window, where you can change the
size of the sidebar panel by dragging the bar in-between the two frames. you can also hide the sidebar by clicking the notch. splitter element this feature is accomplished using an element called a splitter. it creates a skinny bar between two sections which allows these sections to be re
sized. you can place a splitter anywhere you want and it will allow resizing of the elements that come before it and the elements that come after it in the same box. when a splitter is placed inside a horizontal box, it will allow res...
... will allow resizing of the elements that come before it and the elements that come after it in the same box. when a splitter is placed inside a horizontal box, it will allow resizing horizontally. when a splitter is placed inside a vertical box, it will allow resizing vertically. the syntax of a splitter is as follows: <splitter id="identifier" state="open" collapse="before" re
sizebefore="closest" re
sizeafter="closest"> the attributes are as follows: id the unique identifier of the splitter. state indicates the state of the splitter. set this to open, the default, to have the split panel initially open, or set it to collapsed to have one of the panels shrunk down (collapsed) and the other occupying all of the space. collapse this indicates which side of ...
...and the other occupying all of the space. collapse this indicates which side of the panel should collapse when the splitter notch (or grippy) is clicked or set into a collapsed state. set this to before for the element before the splitter, or after for the element after the splitter. if you set this to none, which is also the default, the splitter grippy does not collapse when clicked. re
sizebefore when the splitter is dragged, the elements to the left (or above) re
size. this attribute indicates which element should re
size. set this to closest to have the element immediately to the left of the splitter re
size. set this to farthest to have the element that is the farthest away from the splitter to the left re
size. (the first element in the box). the default value is closest. resiz...
...And 12 more matches
Secure Development Guidelines
s code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str,
sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str), &stm...
...example of an integer underflow int main() { unsigned int foo = 0; printf(“foo: 0x%08x\r\n”, foo); foo--; printf(“foo: 0x%08x\r\n”, foo); } integer overflows/underflows real-life example (bug 303213) jsbool js_str_escape(jscontext *cx, jsobject *obj, unsigned int argc, jsval *argv, jsval *rval){ ... newchars = (jschar *) js_malloc(cx, (newlength + 1) *
sizeof(jschar)); ... for (i = 0, ni = 0; i < length; i++) { if ((ch = chars[i]) < 128 && is_ok(ch, mask)) { newchars[ni++] = ch; ... } ... } ... } integer overflows/underflows: prevention difficult to fix: you need to check every arithmetic operation with user input arithmetic libraries like safeint can help signedness issues bit...
...7 unsigned char 0 - +255 16 signed short -32768 - +32767 unsigned short 0 - +65535 32 signed int -2147483648 - +2147483647 unsigned int 0 - +4294967295 64 signed long long -9223372036854775808 - +9223372036854775807 unsigned long long 0 - +18446744073709551615 int vuln_funct(int
size) { char buf[1024]; if (
size >
sizeof(buf) - 1) return -1; } signedness issues: don’t mix signed and unsigned integers use unsigned integers for
sizes, offsets, and indexes casting and truncation example: void vuln_funct() { u_int32_t
size1 = 0xffffffff; u_int16_t
size2 =
size1; void *ptr = malloc(
size2); if (!ptr) exit(exit_failure); memcpy(ptr,...
...And 12 more matches
Using Objective-C from js-ctypes
nvert objective-c code to js-ctypes, we need to convert it to c code first. we can then convert it straight to js-ctypes code. speech synthesis example let's start with the following objective-c code, which invokes the speech synthesis api to say "hello, firefox!". it uses the default system voice and waits until the speaking is done. #import <appkit/appkit.h> int main(void) { nsspeechsynthe
sizer* synth = [[nsspeechsynthe
sizer alloc] initwithvoice: nil]; [synth startspeakingstring: @"hello, firefox!"]; // wait until start speaking. while (![synth isspeaking]) {} // wait while speaking. while ([synth isspeaking]) {} [synth release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode). $ cla...
... while speaking. while ([synth isspeaking]) {} [synth release]; return 0; } save this file as test.m, and run with the following command, inside the same directory as the saved file (needs xcode). $ clang -framework appkit test.m && ./a.out class, message, and selector our task at hand is to convert objective-c syntax to c syntax. let's look at the following codelet: [nsspeechsynthe
sizer alloc] it passes an alloc message to the nsspeechsynthe
sizer class, in objective-c syntax. it performs the following through this objective-c syntax: get the nsspeechsynthe
sizer class definition. register the alloc selector for the message. send a message to the class, with the selector. get a reference to a class class definitions are retrieved with the objc_getclass function, declare...
...ns are retrieved with the objc_getclass function, declared in /usr/include/objc/runtime.h. the objc_getclass function receives the name of the class, looks up the definition, and returns it. class objc_getclass(const char *name); in /usr/include/objc/objc.h, class is defined as an opaque type by the following: typedef struct objc_class *class; in this example, we need the classnsspeechsynthe
sizer, which is retrieved with the following code: class nsspeechsynthe
sizer = objc_getclass("nsspeechsynthe
sizer"); registering a selector selectors can be registered and retrieved with sel_registername function, also declared in /usr/include/objc/runtime.h. sel_registername receives the name of the selector, and returns the selector. sel sel_registername(const char *str); sel is defined as fo...
...And 12 more matches
<image> - CSS: Cascading Style Sheets
of the webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function. a selection of images chosed based on resolution defined by the image-set() function. description css can handle the following kinds of images: images with intrinsic dimensions (a natural
size), like a jpeg, png, or other raster format. images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico formats. (in this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and ...
...e, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an svg or other vector format. images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient. ...
...est in area and the aspect ratio most similar to the containing box.) images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an svg or other vector format. images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient. ...
...And 12 more matches
dominant-baseline - SVG: Scalable Vector Graphics
’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. it is used to determine or re-determine a scaled-baseline-table. a scaled-baseline-table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-table, and a baseline-table font-
size. some values of the property re-determine all three values. others only re-establish the baseline-table font-
size. when the initial value, auto, would give an undesired result, this property can be used to explicitly set the desired scaled-baseline-table. if there is no baseline table in the nominal font, or if the baseline table lacks an entry for the desired baseline, then the browser may us...
... if the writing-mode is vertical, then the value of the dominant-baseline component is central. if this property occurs on a <tspan>, <tref>, <altglyph>, or <textpath> element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. if the computed baseline-shift value actually shifts the baseline, then the baseline-table font-
size component is set to the value of the font-
size attribute on the element on which the dominant-baseline attribute occurs, otherwise the baseline-table font-
size remains the same as that of the element. if there is no parent text content element, the scaled-baseline-table value is constructed as above for <text> elements. use-script the dominant-baseline and the baseline-table components are...
... for <text> elements. use-script the dominant-baseline and the baseline-table components are set by determining the predominant script of the character data content. the writing-mode, whether horizontal or vertical, is used to select the appropriate set of baseline-tables and the dominant baseline is used to select the baseline-table that corresponds to that baseline. ...
...And 12 more matches
Using Spacers - Archive of obsolete content
nt platforms may have special requirements on the user interface. if adding support for multiple languages, the text for one language may require more room than another. applications that need to support multiple platforms and languages usually have their windows laid out with lots of space to allow for this. some platforms and user interface toolkits provide components that are smart enough to re
size and re-position themselves to fit the needs of the user. (java uses layout managers for example.) xul provides the capability for elements to position and re
size automatically. as we've seen, the find files window has appeared in a
size that will fit the elements inside it. each time we add something, the window gets bigger. xul uses a layout system called the 'box model'. we'll talk more about t...
...for now, just know that the window element is a type of box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. ...
...box. before we get into detail about boxes, we'll introduce another xul element that is useful for layout, the spacer. a spacer is very simple and only requires one attribute, which will be explained in a moment. the simplest spacer looks like the following: <spacer flex="1"/> a spacer is used to place blank space into a window. its most useful ability is that it can grow or shrink as the user re
sizes the window. this would be how one would place buttons on the right or bottom of a window and have them stick to the right or bottom edge no matter what
size the window is. as we'll see, you can use a series of spacers to create a number of layout effects. in this syntax above, the spacer has one attribute, called flex. this is used to define the flexibility of the spacer. in the case above, the ...
...And 11 more matches
Object building practice - Learn web development
two numbers as arguments, and returns a random number in the range between the two. modeling a ball in our program our program will feature lots of balls bouncing around the screen. since these balls will all behave in the same way, it makes sense to represent them with an object. let's start by adding the following constructor to the bottom of our code. function ball(x, y, velx, vely, color,
size) { this.x = x; this.y = y; this.velx = velx; this.vely = vely; this.color = color; this.
size =
size; } here we include some parameters that define the properties each ball needs in order to function in our program: x and y coordinates — the horizontal and vertical coordinates where the ball starts on the screen. this can range between 0 (top left hand corner) to the width and he...
...e between 0 (top left hand corner) to the width and height of the browser viewport (bottom right hand corner). horizontal and vertical velocity (velx and vely) — each ball is given a horizontal and vertical velocity; in real terms these values are regularly added to the x/y coordinate values when we animate the balls, to move them by this much on each frame. color — each ball gets a color. ...
... corner) to the width and height of the browser viewport (bottom right hand corner). horizontal and vertical velocity (velx and vely) — each ball is given a horizontal and vertical velocity; in real terms these values are regularly added to the x/y coordinate values when we animate the balls, to move them by this much on each frame. color — each ball gets a color. ...
...And 11 more matches
DMD
he "twice-reported stack trace records" and "unreported stack trace records" sections are the most important, because they indicate ways in which the memory reporters can be improved. here's an example stack trace record from the "unreported stack trace records" section. ...
... within each section, records are listed from largest to smallest. once-reported and twice-reported stack trace records also have stack traces for the ...
...gned int, bool) (/home/njn/moz/mi5/dom/xml/nsxmlcontentsink.cpp:1007) } } it tells you that there were 150 heap blocks that were allocated from the program point indicated by the "allocated at" stack trace, that these blocks took up 21,600 bytes, that all 150 blocks had a
size of 144 bytes, and that 1,200 of those bytes were "slop" (wasted space caused by the heap allocator rounding up request
sizes). it also indicates what percentage of the total heap
size and the unreported portion of the heap these blocks represent. within each section, records are listed from largest to smallest. once-reported and twice-reported stack trace records also have stack traces for the report point(s). for example: reported at { #01: mozilla::dmd::report(void const*) (/home/njn/moz/mi2/memory/replace/dmd/...
...And 10 more matches
nss tech note5
encryption context pk11context* enccontext = pk11_createcontextbysymkey(ciphermech, cka_encrypt or cka_decrypt, symkey, secparam); do the operation. ...
... cka_encrypt or cka_decrypt, symkey, secparam); do the operation. if encrypting, outbuf len must be atleast (inbuflen + block
size). if decrypting, outbuflen must be atleast inbuflen. ...
... outbuf len must be atleast (inbuflen + block
size). if decrypting, outbuflen must be atleast inbuflen. secstatus s = pk11_cipherop(enccontext, outbuf, &tmp1_outlen,
sizeof outbuf, inbuf, inbuflen); s = pk11_digestfinal(enccontext, outbuf+tmp1_outlen, &tmp2_outlen,
sizeof outbuf - tmp1_outlen); result_len = tmp1_outlen + tmp2_outlen; <big>destroy the context pk11_destroycontext(enccontext, pr_true);</big> <big>repeat step 6 any number of times. when all done with encrypt/decrypt ops, clean up</big> <big>pk11_freesymkey(symkey); secitem_freeitem(secparam, pr_true); pk11_freeslot(slot);</big> note: aes encryption, a fix...
...And 10 more matches
Using files from web applications - Web APIs
as an array: for (let i = 0, numfiles = filelist.length; i < numfiles; i++) { const file = filelist[i]; // ... } this loop iterates over all the files in the file list. there are three attributes provided by the file object that contain useful information about the file. name the file's name as a read-only string. this is just the file name, and does not include any path information. ...
...y: for (let i = 0, numfiles = filelist.length; i < numfiles; i++) { const file = filelist[i]; // ... } this loop iterates over all the files in the file list. there are three attributes provided by the file object that contain useful information about the file. name the file's name as a read-only string. this is just the file name, and does not include any path information. ...
...e attributes provided by the file object that contain useful information about the file. name the file's name as a read-only string. this is just the file name, and does not include any path information.
size the
size of the file in bytes as a read-only 64-bit integer. type the mime type of the file as a read-only string or "" if the type couldn't be determined. ...
...And 10 more matches
WebGL constants - Web APIs
parameter to return a the current blend color. array_buffer_binding 0x8894 passed to getparameter to get the array buffer binding. element_array_buffer_binding 0x8895 passed to getparameter to get the current element array buffer. line_width 0x0b21 passed to getparameter to get the current linewidth (set by the linewidth method). aliased_point_
size_range 0x846d passed to getparameter to get the current
size of a point drawn with gl.points aliased_line_width_range 0x846e passed to getparameter to get the range of available widths for a line. returns a length-2 array with the lo value at 0, and hight at 1. cull_face_mode 0x0b45 passed to getparameter to get the current value of cullface. should return front...
... 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. ...
... dynamic_draw 0x88e8 passed to bufferdata as a hint about whether the contents of the buffer are likely to be used often and change often. array_buffer 0x8892 passed to bindbuffer or bufferdata to specify the type of buffer being used. element_array_buffer 0x8893 passed to bindbuffer or bufferdata to specify the type of buffer being used. buffer_
size 0x8764 passed to getbufferparameter to get a buffer's
size. buffer_usage 0x8765 passed to getbufferparameter to get the hint for the buffer passed in when it was created. vertex attributes constants passed to webglrenderingcontext.getvertexattrib(). constant name value description current_vertex_attrib 0x8626 passed to getvertexattri...
...And 10 more matches
grid-template-columns - CSS: Cascading Style Sheets
e3 linename4] 300px) 100px; grid-template-columns: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid. ...
...template-columns: inherit; grid-template-columns: initial; grid-template-columns: unset; values none indicates that there is no explicit grid. any columns will be implicitly generated and their
size will be determined by the grid-auto-columns property. <length> a non-negative length, giving the width of the column. <percentage> is a non-negative <percentage> value relative to the inline
size of the grid container. if the
size of the grid container depends on the
size of its tracks, then the percentage must be treated as auto. the intrinsic
size contributions of the track may be adjusted to the
size of the grid container and increase the final
size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimension with the unit fr sp...
... when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). max-content is a keyword representing the largest maximal content contribution of the grid items occupying the grid track. ...
...And 10 more matches
grid-template-rows - CSS: Cascading Style Sheets
epeat(auto-fit, [linename1] 300px) [linename3]; /* global values */ grid-template-rows: inherit; grid-template-rows: initial; grid-template-rows: unset; this property may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value. values none is a keyword meaning that there is no explicit grid. ...
...y may be specified as: either the keyword value none or a <track-list> value or an <auto-track-list> value. values none is a keyword meaning that there is no explicit grid. any rows will be implicitly generated and their
size will be determined by the grid-auto-rows property. <length> is a non-negative length. <percentage> is a non-negative <percentage> value, relative to the block
size of the grid container. if the
size of the grid container depends on the
size of its tracks, then the percentage must be treated as auto. the intrinsic
size contributions of the track may be adjusted to the
size of the grid container, and increase the final
size of the track by the minimum amount that would result in honoring the percentage. <flex> is a non-negative dimension with the unit fr s...
...when appearing outside a minmax() notation, it implies an automatic minimum (i.e. minmax(auto, <flex>)). max-content is a keyword representing the largest maximal content contribution of the grid items occupying the grid track. ...
...And 10 more matches
Digital audio concepts - Web media technologies
audio signal. there are several formats used for the individual samples within an audio file. most audio files use 16-bit signed integers for each sample, but others use 32-bit floating-point values or 24-bit or 32-bit integers. some older audio file formats—which you won't find in use on the web—used 8-bit integer samples. in addition, samples may use signed or unsigned values, as well. the
size of an individual sample is called the sample
size. the position of each audio source within the audio signal is called a channel. each channel contains a sample indicating the amplitude of the audio being produced by that source at a given moment in time. for instance, in stereo sound, there are two audio sources: one speaker on the left, and one on the right. each of these is represented by one...
...and vibration to create a visceral sensation when listening to the audio. the lfe channels typically drive subwoofers and similar devices. monophonic audio has one channel, stereo sound has two channels, 5.1 surround sound has 6 channels (five standard and one lfe), and so forth. each audio frame is a data record that contains the samples for all of the channels available in an audio signal. the
size of an audio frame is calculated by multiplying the sample
size in bytes by the number of channels, so a single frame of stereo 16-bit audio is 4 bytes long and a single frame of 5.1 floating-point audio is 24 (4 bytes per sample multiplied by 6 channels). note: it's worth noting that some codecs will actually separate the left and right channels, storing them in separate blocks within their dat...
...solution (192 khz) audio are useful for audio mastering, where you need as much quality as possible while manipulating and editing the sound before downsampling to the sample rate you will use for the final product. this is similar to how photographers will use high resolution images for editing and compositing before presenting the customer with a jpeg suitable for use on a web site. ...
...And 10 more matches
Table Reflow Internals - Archive of obsolete content
its queue of reflow commands. the reflower positions reflowee (if it can) before actually reflowing in case views are involved (e.g. ...
...tually reflowing in case views are involved (e.g. absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail
size, various computed values, resolved style structs possible request for preferred
size and more. review of reflow the reflow metrics contains: max element
size (if requested) - the minimum
size it can be preferred
size (if requested) - the
size it would like to be given no
size constraints. desired
size - the
size it would like to be given the avail
size. this is equivalent to preferred
size if the avail
size is not constrained. review of reflow the reflowee sets various...
...and more. review of reflow the reflow metrics contains: max element
size (if requested) - the minimum
size it can be preferred
size (if requested) - the
size it would like to be given no
size constraints. desired
size - the
size it would like to be given the avail
size. this is equivalent to preferred
size if the avail
size is not constrained. review of reflow the reflowee sets various
sizes in the reflow metrics after (possibly) reflowing some or all of its children which reflows it children, etc. the reflowee returns a reflow status which indicates if it is complete, and thus not have to continue (split) breaking status (in the case of some inline frames) if there is truncation (it can't fit in the space and can't split). this is just a convience mechanism. kinds of reflows i...
...And 9 more matches
Drawing graphics - Learn web development
for webgl. active learning: getting started with a <canvas> if you want to create a 2d or 3d scene on a web page, you need to start with an html <canvas> element. this element is used to define the area on the page into which the image will be drawn. this is as simple as including the element on the page: <canvas width="320" height="240"></canvas> this will create a canvas on the page with a
size of 320 by 240 pixels. inside the canvas tags, you can put some fallback content, which is shown if the user's browser doesn't support canvas. <canvas width="320" height="240"> <p>your browser doesn't support canvas. boo hoo!</p> </canvas> of course, the above message is really unhelpful! in a real example you'd want to relate the fallback content to the canvas content. for example, if you we...
...ht variables, as they are useful values to have available for later (for example, if you want to draw something exactly halfway across the width of the canvas). ...
...you could use css, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image (the rendered canvas is just an image), the image could become pixellated/distorted. ...
...And 9 more matches
nsIAnnotationService
short aexpiration); void setpageannotationdouble(in nsiuri auri, in autf8string aname, in double avalue, in long aflags, in unsigned short aexpiration); void setitemannotationdouble(in long long aitemid, in autf8string aname, in double avalue, in long aflags, in unsigned short aexpiration); void setpageannotationbinary(in nsiuri auri, in autf8string aname,[const, array,
size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); void setitemannotationbinary(in long long aitemid, in autf8string aname,[const, array,
size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in long aflags, in unsigned short aexpiration); nsivariant getpageannotatio...
...ong getpageannotationint64(in nsiuri auri, in autf8string aname); long long getitemannotationint64(in long long aitemid, in autf8string aname); double getpageannotationdouble(in nsiuri auri, in autf8string aname); double getitemannotationdouble(in long long aitemid, in autf8string aname); void getpageannotationbinary(in nsiuri auri, in autf8string aname,[array,
size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amimetype); void getitemannotationbinary(in long long aitemid, in autf8string aname,[array,
size_is(adatalen)] out octet adata, out unsigned long adatalen, out autf8string amimetype); void getpageannotationinfo(in nsiuri auri, in autf8string aname, out print32 aflags, out unsigned short aexpiration, out a...
...tf8string aname, out long aflags, out unsigned short aexpiration, out autf8string amimetype, out unsigned short atype); pruint16 getpageannotationtype(in nsiuri auri, in autf8string aname); pruint16 getitemannotationtype(in long long aitemid, in autf8string aname); void getpageswithannotation(in autf8string name, [optional] out unsigned long resultcount, [retval, array,
size_is(resultcount)] out nsiuri results); void getitemswithannotation(in autf8string name, [optional] out unsigned long resultcount, [retval, array,
size_is(resultcount)] out long long results); void getpageannotationnames(in nsiuri auri, [optional] out unsigned long count, [retval, array,
size_is(count)] out nsivariant result); void getitemannotationnames(in long long aite...
...And 9 more matches
Variable fonts guide - CSS: Cascading Style Sheets
ike a lighter one for captions or a heavier one for extra emphasis, that would mean several more files. this results in more http requests, and more data being downloaded (usually around 20k or more per file). variable fonts with a variable font, all of those permutations can be contained in a single file. ...
...single font, but in most cases smaller or about the same
size as the 4 you might load for body copy. the advantage in choosing the variable font is that you have access to the entire range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately. this allows for common typographic techniques such as setting different
size headings in different weights for better readability at each
size, or using a slightly narrower width for data-dense displays. for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance re...
...ons throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for performance reasons alone). a note about font families, weights, and variants you might notice that we have been talking about having a specific font file for every weight and style (i.e. ...
...And 9 more matches
JXON - Archive of obsolete content
ipt/json for templating purposes), use xpath instead of converting the whole document into json. ...
....xml <?xml version="1.0"?> <!doctype catalog system "catalog.dtd"> <catalog> <product description="cardigan sweater"> <catalog_item gender="men's"> <item_number>qwz5671</item_number> <price>39.95</price> <
size description="medium"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </
size> <
size description="large"> <color_swatch image="red_cardigan.jpg">red</color_swatch> <color_swatch image="burgundy_cardigan.jpg">burgundy</color_swatch> </
size> </catalog_item> <catalog_item gender="women's"> <item_number>rrx9856</item_number> <discount_until>dec 25, 1995</discount_until> <price>42.50</price> <
size description="medium"> <c...
...if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph. note: if you ar...
...And 8 more matches
CSS values and units - Learn web development
ll come across most frequently is <length>, for example 10px (pixels) or 30em. there are two types of lengths used in css — relative and absolute. it's important to know the difference in order to understand how big things will become. absolute length units the following are all absolute length units — they are not relative to anything else and are generally considered to always be the same
size. unit name equivalent to cm centimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in most of these val...
...of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output. for example we don't typically use cm (centimeters) on screen. the only value that you will commonly use is px (pixels). ...
...th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output. for example we don't typically use cm (centimeters) on screen. the only value that you will commonly use is px (pixels). relative length units relative length units are relative to something else, perhaps the
size of the parent element's font, or the
size of the viewport. ...
...And 8 more matches
HTML text fundamentals - Learn web development
> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
...95%">my short story i am a statistician and my name is trish. ...
...hope not.) in a similar vein, we need to make sure we are using the correct elements, giving our content the correct meaning, function, or appearance. ...
...And 8 more matches
SVGSVGElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 8 more matches
<length> - CSS: Cascading Style Sheets
note: although <percentage> values are also css dimensions, and are usable in some of the same properties that accept <length> values, they are not themselves <length> values. see <length-percentage>. syntax the <length> data type consists of a <number> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. ...
...mber> followed by one of the units listed below. as with all css dimensions, there is no space between the unit literal and the number. the length unit is optional after the number 0. note: some properties allow negative <length>s, while others do not. units relative length units relative lengths represent a measurement in terms of some other distance. depending on the unit, this can be the
size of a specific character, the line height, or the
size of the viewport. font-relative lengths font-relative lengths define the <length> value in terms of the
size of a particular character or font attribute in the font currently in effect in an element or its parent. note: these units, especially em and rem, are often used to create scalable layouts, which maintain the vertical rhythm of the p...
... cap represents the "cap height" (nominal height of capital letters) of the element’s font. ch represents the width, or more precisely the advance measure, of the glyph "0" (zero, the unicode character u+0030) in the element's font. ...
...And 8 more matches
Event reference
being composed. compositionend the composition of a passage of text has been completed or canceled. view events event name fired when fullscreenchange an element was toggled to or from fullscreen mode. fullscreenerror it was impossible to switch to fullscreen mode for technical reasons or because the permission was denied. re
size the document view has been re
sized. scroll the document view or an element has been scrolled. clipboard events event name fired when cut the selection has been cut and copied to the clipboard copy the selection has been copied to the clipboard paste the item from the clipboard has been pasted keyboard events...
...alue change events broadcast checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). ...
... push api a pushsubscription has expired. ratechange event html5 media the playback rate has changed. readystatechange event html5 and xmlhttprequest the readystate attribute of a document has changed. repeatevent timeevent svg a smil animation element is repeated. reset event dom l2, html5 a form is reset. re
size uievent dom l3 the document view has been re
sized. resourcetimingbufferfull performance resource timing the browser's resource timing buffer is full. result speechrecognitionevent web speech api the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app. ...
...And 8 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
. pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean. the value is not editable required almost all boolean. a value is required or must be check for the form to be submittable
size email, password, tel, text
size of the control src image same as src attribute for <img>; address of image resource step numeric types incremental values that are valid. type all type of form control value all current value of the form control. submitted with the form as part of a name/value pair. width image same as...
...ocus, using the arrow keys will navigate through all the radio buttons of the same name, even if the radio buttons are not grouped together in the source order. htmlformelement.elements when an input element is given a name, that name becomes a property of the owning form element's htmlformelement.elements property. if you have an input whose name is set to guest and another whose name is hat-
size, the following code can be used: let form = document.queryselector("form"); let guestname = form.elements.guest; let hat
size = form.elements["hat-
size"]; when this code has run, guestname will be the htmlinputelement for the guest field, and hat
size the object for the hat-
size field. warning: avoid giving form elements a name that corresponds to a built-in property of the form, since yo...
...uired required is a boolean attribute which, if present, indicates that the user must specify a value for the input before the owning form can be submitted. the required attribute is supported text, search, url, tel, email, date, month, week, time, datetime-local, number, password, checkbox, radio, and file. see client-side validation and the html attribute: required for more information.
size valid for email, password, tel, and text input types only. specifies how much of the input is shown. basically creates same result as setting css width property with a few specialities. the actual unit of the value depends on the input type. for password and text, it is a number of characters (or em units) with a default value of 20, and for others, it is pixels. css width takes precedence over ...
...And 8 more matches
Web audio codec guide - Web media technologies
n of the samples taken to convert it into a data stream, the more data used to represent the digital version of the audio, the more closely the sampled sound will match the source material. ...
...rsion of the audio, the more closely the sampled sound will match the source material. the effect of source audio format on encoded audio output because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio
size than one might expect. however, a number of factors do still affect the encoded audio quality and
size. the table below lists a number of key source audio file format factors and their impact on the encoded audio. the effect of source audio format and contents on the encoded audio quality and
size feature effect on quality effect on
size channel count the number of channels affects only the perception of directionality, not the quality. each channel may substant...
...of key source audio file format factors and their impact on the encoded audio. the effect of source audio format and contents on the encoded audio quality and
size feature effect on quality effect on
size channel count the number of channels affects only the perception of directionality, not the quality. each channel may substantially increase the encoded audio
size, depending on contents and encoder settings. noise / hiss unwanted background noise or hiss tends to reduce audio quality both directly (by masking details of the foreground audio) and indirectly (by making the audio waveform more complicated and therefore difficult to reduce in
size while maintaining precision). hiss, static, or background noise increases the audio complexity, whi...
...And 8 more matches
SVG documentation index - SVG: Scalable Vector Graphics
g, 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 same name as the computed value of the alignment-baseline property. 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. 24 amplitude needscompattable, svg, svg attribute ...
... filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and end points of a line of text as used by the text-anchor and inline-
size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements. 60 divisor filters, svg, svg attribute the divisor attribute specifies the value by whi...
...acity svg, svg attribute, svg filter the flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion. 79 font-family svg, svg attribute the font-family attribute indicates which font family will be used to render the text, specified as a prioritized list of font family names and/or generic family names. ...
...And 8 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
d of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction. on line 2 of listing 2, we’re reading in the theme’s standard style sheet. by referring to a special style sheet within chrome://global/skin/, we can make label and button
sizes, window background color, etc, match the currently selected theme in firefox. we can also read in a stylesheet that we had set up ourselves. the xul box model in principle, xul lays out all ui components using combinations of two kinds of boxes: horizontal and vertical. as shown in listing 3, elements can be laid out horizontally using the hbox (horizontal box) element or vertically using the ...
... the flex attribute indicates that an element should be expanded to take up all of a window's height or width. flex takes a positive integer as a value, which is a growth multiple on the axis of the parent element's orient attribute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal
size. you can assign flex="2" (or higher values) as a
size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1px solid;"/> <label value="label2" flex="2" style="border: 1px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, e...
...ton1 (figure 4). if multiple elements have the same ordinal value, they will be laid out in the same relative order they appear in the source code. the default value for ordinal is 1. ...
...And 7 more matches
Visualizing an audio spectrum - Archive of obsolete content
// draw rectangle bars for each frequency bin ctx.fillrect(i * 4, canvas.height, 3, -magnitude); } } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffer
size, samplerate) { this.buffer
size = buffer
size; this.samplerate = samplerate; this.spectrum = new float32array(buffer
size/2); this.real = new float32array(buffer
size); this.imag = new float32array(buffer
size); this.reversetable = new uint32array(buffer
size); this.sintable = new float32array(buffer
size); this.
...e = buffer
size; this.samplerate = samplerate; this.spectrum = new float32array(buffer
size/2); this.real = new float32array(buffer
size); this.imag = new float32array(buffer
size); this.reversetable = new uint32array(buffer
size); this.sintable = new float32array(buffer
size); this.costable = new float32array(buffer
size); var limit = 1, bit = buffer
size >> 1; while ( limit < buffer
size ) { for ( var i = 0; i < limit; i++ ) { this.reversetable[i + limit] = this.reversetable[i] + bit; } limit = limit << 1; bit = bit >> 1; } for ( var i = 0; i < buffer
size; i++ ) { this.sintable[i] = math.sin(-math.pi/i); ...
...t; i++ ) { this.reversetable[i + limit] = this.reversetable[i] + bit; } limit = limit << 1; bit = bit >> 1; } for ( var i = 0; i < buffer
size; i++ ) { this.sintable[i] = math.sin(-math.pi/i); this.costable[i] = math.cos(-math.pi/i); } }; fft.prototype.forward = function(buffer) { var buffer
size = this.buffer
size, costable = this.costable, sintable = this.sintable, reversetable = this.reversetable, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffer
size !== buffer.length ) { throw "supplied buffer is not the same
size as defined fft. fft
size: " +...
...And 7 more matches
Box Objects - Archive of obsolete content
used. the others have functions which are more easily accessible by methods mapped directly onto the element, since those types are generally only used with one particular element. the base box object, or the interface nsiboxobject, however, has a number of properties which are quite useful for xul development. the base box object has two useful features. first, you can retrieve the position and
size of the xul element as displayed, and second, you can determine the order of the elements in the box as displayed, instead of their order as they are stored in the dom. retrieving position and
size the box object provides six read only properties, x, y, screenx, screeny, width and height, for determining the currently displayed position and
size of an element. all values returned are in pixels. x...
...including css padding and borders. css margins are excluded. width, height the width and height properties are also measured in pixels and return the width and height of the element, including css padding and borders. css margins are excluded. *note that x, y refers to the portion of the element that is just inside any borders, which is inconsistent with the other four boxobject position and
size references, which include borders as part of the element. the values are always the position and
sizes as currently displayed, so the values will be different if the element is moved or re
sized. for example, a flexible element will change in
size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" oncomm...
...ment will change in
size and the box object dimensions will update accordingly. the following example shows this. example 1 : source view <button label="click me" oncommand="alert('the width is ' + this.boxobject.width);"/> you can use the width and height attributes of the element to specify the element's width and height, respectively. note that retrieving these values will return the
size only if it was explicitly specified. these properties will return an empty string if the width or height attributes or properties were not set already. that is, you cannot get the current
size with these properties; instead you must use the box object properties. ...
...And 7 more matches
splitter - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element which should appear before or after an element inside a container. when the splitter is dragged, the sibling elements of the splitter are re
sized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. ...
...es | properties | methods | related ] an element which should appear before or after an element inside a container. when the splitter is dragged, the sibling elements of the splitter are re
sized. if a grippy is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, re
sizeafter, re
sizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. ...
...y is placed inside the splitter, one sibling element of the splitter is collapsed when the grippy is clicked. more information is available in the xul tutorial. attributes collapse, re
sizeafter, re
sizebefore, state, substate style classes tree-splitter examples <!-- this bar has some styling associated with it. the vbox is used to hold the .png image that a user clicks on to re
size the search bar.--> <splitter tooltiptext="re
size the search box" oncommand="alert('the splitter was dragged')"> <vbox id="example_vbox" /> </splitter> attributes collapse type: one of the values below determines which side of the splitter is collapsed when its grippy is clicked. if this attribute is not specified, the splitter will not cause a collapse. you should put a grippy elemen...
...And 7 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
code inside the block if the condition is true, or skip the whole block if the condition is false. 35 block cipher mode of operation block cipher mode of operation, cryptography, glossary, security a block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block
size. 36 boolean boolean, codingscripting, glossary, javascript, programming languages, data types in computer science, a boolean is a logical data type that can have only the values true or false. 37 boot2gecko boot2gecko, firefox os, glossary, infrastructure, intro boot2gecko (b2g) is the engineering codename for firefox os and refers to builds that haven't ...
...nd relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. the cssom is very similar to the document object model (dom). both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website. 57 css pixel css, css pixel, glossary, height, length, pixel,
size, unit, width the css pixel—denoted in css with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. by definition, this is the physical
size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes. ...
...ncy analysis and index of coincidence, cryptanalysis includes more recent methods, like linear cryptanalysis or differential cryptanalysis, that can break more advanced ciphers. 97 cryptographic hash function cryptography, glossary, security a cryptographic hash function, also sometimes called a digest function, is a cryptographic primitive transforming a message of arbitrary
size into a message of fixed
size, called a digest. cryptographic hash functions are used for authentication, digital signatures, and message authentication codes. 98 cryptography cryptography, glossary, privacy, security cryptography, or cryptology, is the science that studies how to encode and transmit messages securely. cryptography designs and studies algorithms used to encode...
...And 7 more matches
The box model - Learn web development
vior defined in the box model. the model defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on the page. to add some additional complexity, there is a standard and an alternate box model. parts of a box making up a block box in css we have the: content box: the area where your content is displayed, which can be
sized using properties like width and height. padding box: the padding sits around the content as white space; its
size can be controlled using padding and related properties. border box: the border box wraps the content and any padding. its
size and style can be controlled using border and related properties. margin box: the margin is the outermost layer, wrapping the content, padding and border a...
...: the padding sits around the content as white space; its
size can be controlled using padding and related properties. border box: the border box wraps the content and any padding. its
size and style can be controlled using border and related properties. margin box: the margin is the outermost layer, wrapping the content, padding and border as whitespace between this box and other elements. its
size can be controlled using margin and related properties. the below diagram shows these layers: the standard css box model in the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. any padding and border is then added to that width and height to get the total
size taken up by the box. this is shown in the image below. if...
...nd padding: .box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } the space taken up by our box using the standard box model will actually be 410px (350 + 25 + 25 + 5 + 5), and the height 210px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box. ...
...And 7 more matches
Advanced form styling - Learn web development
t isn't really essential. in a couple of cases — search and radio buttons/checkboxes, it becomes way more useful. we'll look at those now. taming search boxes <input type="search"> is basically just a text input, so why is appearance: none; useful here? the answer is that in chromium-based browsers on macos, search boxes have some styling restrictions — you can't adjust their height or font-
size freely, for example. this is because non-macos chrome browsers no longer use the webkit rendering engine, which enabled aqua appearance by default for certain form controls. with aqua enabled, some form controls are not scalable. this can be fixed using our friend appearance: none;, which disables the default aqua appearance: input[type="search"] { -webkit-appearance: none; appearance:...
...t scalable. this can be fixed using our friend appearance: none;, which disables the default aqua appearance: input[type="search"] { -webkit-appearance: none; appearance: none; } in the example below, you can see two identical styled search boxes. the right one has appearance: none; applied, and the left one doesn't. if you look at it in macos chrome you'll see that the left one isn't
sized properly. interestingly, setting border/background on the search field also fixes this problem, as it disables or "breaks" the aqua appearance too. the following styled search doesn't have appearance: none; applied, but it doesn't suffer from the same problem in macos chrome as the previous example. note: you may have noticed that in the search field, the "x" delete icon disappears when t...
..."x" delete icon disappears when the input loses focus in edge and chrome, but stays put in safari. to remove via css, you can use input[type="search"]::-webkit-search-cancel-button { display: none; }. however, this seems to get rid of the icon with focus too, with no apparent way to get it back. styling checkboxes and radio buttons styling a checkbox or a radio button is tricky by default. the
sizes of check boxes and radio buttons are not meant to be changed with their default designs, and browsers react very differently when you try. for example, consider this simple test case: <span><input type="checkbox"></span> span { display: inline-block; background: red; } input[type="checkbox"] { width: 100px; height: 100px; } different browsers handle this in many different, o...
...And 7 more matches
Basics
m rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a x + b , etc. notice how the mathematics appear in the main flow of text and respond as you re
size the window. you can also make displayed equations, such as the following ones: x → maps to y = f n ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 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 m...
... 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. ...
...urn to javascript and the dom for dynamic operations. </p> <div style="text-align:center"> fill the gaps in this matrix with resizable input fields. ...
...And 7 more matches
nsIMsgDatabase
s article. ...
...hanged in gecko 1.9 (firefox 3) inherits from: nsidbchangeannouncer method overview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearcachedhdrs; void resethdrcache
size(in unsigned long
size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listallkeys(in nsmsgkeyarrayr...
...tattributesonpendinghdr(in nsimsgdbhdr pendinghdr, in string property, in string propertyval, in long flags); void createcollationkey(in astring sourcestring, out octetptr key, out unsigned long len); native code only! long comparecollationkeys(in octetptr key1, in unsigned long len1, in octetptr key2, in unsigned long len2); native code only! ...
...And 7 more matches
nsIScriptableIO
the file does not have to exis...
...n astring afilepath); nsisupports newinputstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffer
size); nsisupports newoutputstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffer
size, [optional] in unsigned long apermissions); nsiuri newuri(in nsivariant auri); methods getfile() retrieves a reference to a file or directory on disk. the file does not have to exist already; this method simply creates the file reference which may then be passed to the newinputstream() or newoutputstream() method to open the file for reading or writing. files are located ...
... value returns an nsiuri object corresponding to the specified string or file. exceptions thrown ns_error_invalid_arg auri was null. newinputstream() retrieves a stream from which data can be read. nsisupports newinputstream( in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffer
size ); parameters abase the base object from which to read. this should be one of the following types: nsifile: an object returned by getfile() or getfilewithpath(), or any object implementing the nsifile interface. nsitransport: a transport object such as a socket. nsiinputstream: a stream returned by a previous call to this method, or any other object that implements nsiinp...
...And 7 more matches
Dominators view - Firefox Developer Tools
otherwise, you might want to review the article on dominators concepts. ...
...otherwise, you might want to review the article on dominators concepts. ...
...otherwise, you might want to review the article on dominators concepts. ...
...And 7 more matches
Viewport concepts - CSS: Cascading Style Sheets
s the area in computer graphics being currently viewed. in web browser terms, it is generally the same as the browser window, excluding the ui, menu bar, etc. that is, the part of the document you are viewing. documents like this article may be very long. your viewport is everything that is currently visible, notably, the "what is a viewport section", and perhaps some of the navigation menu. ...
...g currently viewed. in web browser terms, it is generally the same as the browser window, excluding the ui, menu bar, etc. that is, the part of the document you are viewing. documents like this article may be very long. your viewport is everything that is currently visible, notably, the "what is a viewport section", and perhaps some of the navigation menu. the
size of the viewport depends on the
size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. content outside the viewport, such as the see also section in this document, is likely to not be visible onscreen until scrolled into view. on larger monitors where applications aren't necessarily full screen, the viewport is the
size of the browser window. on most mobile devices and when t...
... when the browser is in fullscreen mode, the viewport is the entire screen. in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. viewport
sizes are mutable the width of the viewport is not always the width of the window. if you query the width or height of the window and document in chrome or firefox, you may get: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there ar...
...And 7 more matches
line-height - CSS: Cascading Style Sheets
he height that is used to calculate line box height. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ line-height: normal; /* unitless values: use this number multiplied by the element's font
size */ line-height: 3.5; /* <length> values */ line-height: 3em; /* <percentage> values */ line-height: 34%; /* global values */ line-height: inherit; line-height: initial; line-height: unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal. values normal depends on the user agent. desktop browsers (including ...
... unset; the line-height property is specified as any one of the following: a <number> a <length> a <percentage> the keyword normal. values normal depends on the user agent. desktop browsers (including firefox) use a default value of roughly 1.2, depending on the element's font-family. <number> (unitless) the used value is this unitless <number> multiplied by the element's own font
size. the computed value is the same as the specified <number>. in most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance. <length> the specified <length> is used in the calculation of the line box height. values given in em units may produce unexpected results (see example below). <percentage> relative to the font
size of the element itself. the c...
...percentage values may produce unexpected results (see the second example below). ...
...And 7 more matches
<input type="email"> - HTML: Hypertext Markup Language
e field is a valid e-mail address or not. on browsers that don't support inputs of type email, a email input falls back to being a standard text input. value a domstring representing an e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required,
size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as conforming to e-mail syntax. more specifically, there are three possible value formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was re...
...the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided ...
...(form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size the
size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the fo...
...And 7 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 ...
...r 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 of the child elements, resulting 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 c...
...use the flex attribute to create elements that stretch in the opposite direction. ...
...And 6 more matches
Manipulating documents - Learn web development
ere are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a browser directly involved in viewing web pages: the window is the browser tab that a web page is loaded into; this is represented in javascript by the window object. using methods available on this object you can do things like return the window's
size (see window.innerwidth and window.innerheight), manipulate the document loaded into that window, store data specific to that document on the client-side (for example using a local database or other storage mechanism), attach an event handler to the current window, and more. the navigator represents the state and identity of the browser (i.e. the user-agent) as it exists on the web. in javascript...
...ources and use it in your ui. you just have to make sure your data is in the right format; javascript makes it easier than many other languages, being weakly typed — for example numbers will convert to strings automatically when you want to print them to the screen. in this example we will solve a common problem — making sure your application is as big as the window it is viewed in, whatever
size it is. this is often useful in situations like games, where you want to use as much of the screen area as possible to play the game in. to start with, make a local copy of our window-re
size-example.html and bgtile.png demo files. open it and have a look — you'll see that we've got a <div> element covering a small part of the screen, which has got a background tile applied to it. we'll use that...
... winwidth = window.innerwidth; let winheight = window.innerheight; next, we'll dynamically alter the width and height of the div to equal that of the viewport. ...
...And 6 more matches
Using the viewport meta tag to control layout on mobile browsers
narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. users can then pan and zoom to see different areas of the page. ...
...m is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques. to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's
size and scale. many other mobile browsers now support this tag, although it is not part of any web standard. apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in fennec. for example, safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages ...
... list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators. learn more about viewports in different mobile browsers in a tale of two viewports at quirksmode.org. ...
...And 6 more matches
Utilities for nss samples
get seed from a noise gile. generate random numbers. get a module password. extract the password from a text file. print data as hexadecimal. util.h /* this source code form is subject to the terms of the mozilla public * license, v. 2.0. ...
...ts_password * token_2_name:its_password * */ extern char * filepasswd(pk11slotinfo * slot, prbool retry, void *arg); /* * getmodulepassword */ extern char * getmodulepassword(pk11slotinfo *slot, int retry, void *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, int r
size); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * file
size */ extern long file
size(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(secitem *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /...
...; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.
size)) { numbytes = pr_read(src, dst->data, info.
size); if (numbytes == info.
size) { return secsuccess; } } secitem_freeitem(dst, pr_false); dst->data = null; return secfailure; } /* * echooff */ static void echooff(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag &= ~echo; tcsetattr(f...
...And 6 more matches
HTMLImageElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 6 more matches
SVGEllipseElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 6 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
example 6 consists of the header, a blank line, and then five cues sep...
...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 optional cue ident...
...der, a blank 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 f...
...And 6 more matches
Logical properties for sizing - CSS: Cascading Style Sheets
left and right). while these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. ...
...design you may well use both physical and logical sizing. you might want some features to always relate to the physical dimensions whatever the writing mode. mappings for dimensions the table below provides mappings between logical and physical properties. these mappings assume that you are in a horizontal-tb writing mode, such as english or arabic, in which case width would be mapped to inline-
size. ...
...you might want some features to always relate to the physical dimensions whatever the writing mode. mappings for dimensions the table below provides mappings between logical and physical properties. these mappings assume that you are in a horizontal-tb writing mode, such as english or arabic, in which case width would be mapped to inline-
size. if you were in a vertical writing mode then inline-
size would be mapped to height. ...
...And 6 more matches
grid-auto-columns - CSS: Cascading Style Sheets
this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-
size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; g...
...And 6 more matches
grid-auto-rows - CSS: Cascading Style Sheets
this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...o-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* multiple track-
size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset; ...
...And 6 more matches
mask - CSS: Cascading Style Sheets
thand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. ...
...and side with a width of 16px */ url(masks.svg#circle) right / 16px repeat-y; /* element within svg graphic is used as a mask on the right-hand side with a width of 16px */ values <mask-reference> sets the mask image source. see mask-image. <masking-mode> sets the masking mode of the mask image. see mask-mode. <position> sets the position of the mask image. see mask-position. <bg-
size> sets the
size of the mask image. see mask-
size. <repeat-style> sets the repetition of the mask image. see mask-repeat. <geometry-box> if only one <geometry-box> value is given, it sets both mask-origin and mask-clip. if two <geometry-box> values are present, then the first sets mask-origin and the second sets mask-clip. <geometry-box> | no-clip sets the area that is affected by the mask i...
...ry-box> | no-clip sets the area that is affected by the mask image. see mask-clip. <compositing-operator> sets the compositing operation used on the current mask layer. see mask-composite. ...
...And 6 more matches
transition-duration - CSS: Cascading Style Sheets
active-examples and send us a pull request. you may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. if there are fewer durations specified than in the master list, the user agent repeat the list of durations. if there are more durations, the list is simply truncated to the right
size. in both case the css declaration stays valid. syntax /* <time> values */ transition-duration: 6s; transition-duration: 120ms; transition-duration: 1s, 15s; transition-duration: 10s, 30s, 230ms; /* global values */ transition-duration: inherit; transition-duration: initial; transition-duration: unset; values <time> is a <time> denoting the amount of time the transition from the old value...
...rmal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-
size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-
size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-
size left top transform -webkit-transform color; transition-duration...
...bkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-
size left top transform -webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-
size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-
size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-
size left top transform -webkit-transformv color; transition-durat...
...And 6 more matches
<input type="file"> - HTML: Hypertext Markup Language
object contains the following information: name the file's name. lastmodified a number specifying the date and time at which the file was last modified, in milliseconds since the unix epoch (january 1, 1970 at midnight). lastmodifieddate a date object representing the date and time at which the file was last modified. this is deprecated and should not be used. use lastmodified instead.
size the
size of the file in bytes. type the file's mime type. webkitrelativepath a string specifying the file's path relative to the base directory selected in a directory picker (that is, a file picker in which the webkitdirectory attribute is set). this is non-standard and should be used with caution. note: you can set as well as get the value of htmlinputelement.files in all modern brows...
... next, let's walk through the javascript. in the first lines of script, we get references to the form input itself, an...
...age into the preview <div> stating that no files have been selected. if files have been selected, we loop through each one, printing information about it into the preview <div>. things to note here: we use the custom validfiletype() function to check whether the file is of the correct type (e.g. the image types specified in the accept attribute). if it is, we: print out its name and file
size into a list item inside the previous <div> (obtained from file.name and file.
size). the custom returnfile
size() function returns a nicely-formatted version of the
size in bytes/kb/mb (by default the browser reports the
size in absolute bytes). generate a thumbnail preview of the image by calling url.createobjecturl(curfiles[i]). then, insert the image into the list item too by creating a new <...
...And 6 more matches
<input type="search"> - HTML: Hypertext Markup Language
ub repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the value contained in the search field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required,
size. idl attributes value methods select(), setrangetext(), setselectionrange(). value the value attribute contains a domstring representing the value contained in the search field. you can retrieve this using the htmlinputelement.value property in javascript. searchterms = mysearch.value; if no validation constraints are in place for the input (see validation for m...
...the <datalist> provides a list of predefined values to sugge...
...(form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size the
size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the fo...
...And 6 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
...
....width, img.height); } now it's "only" a matter of copying the data from javascript into wasm. for that, you need to expose two additional functions — one that allocates memory for the image inside wasm and one that frees it up again: #include <stdlib.h> // required for malloc definition emscripten_keepalive uint8_t* create_buffer(int width, int height) { return malloc(width * height * 4 *
sizeof(uint8_t)); } emscripten_keepalive void destroy_buffer(uint8_t* p) { free(p); } the create_buffer() function allocates a buffer for the rgba image — hence 4 bytes per pixel. the pointer returned by malloc() is the address of the first memory cell of that buffer. when the pointer is returned to javascript land, it is treated as just a number. after exposing the function to javascript using ...
...nctions in c can't have arrays as return types (unless you allocate memory dynamically), this example resorts to a static global array. this may not be clean c. in fact, it relies on wasm pointers being 32 bits wide. ...
...And 6 more matches
The Box Model - Archive of obsolete content
« previousnext » in order to master xul, you'll need to have a fairly good understanding of its box model. this is the system that determines how all elements are laid out visually in a xul document. it is important to know how it works in order to make interfaces that are easy to localize, skin and use in different 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, to...
... is because this attribute is used much too often, and it would require a great deal of css code to avoid using it. at any rate, it can always be overriden using css, so your extension won't lose skinability because of it. flexibility is defined as a numeric value. the default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its
size in that dimension will be determined by its contents and padding. if you want an element to be flexible, you should set its flexibility to 1. this makes the element stretch to occupy as much available space there is in the direction of its orientation. if we add flexibility to the hbox in our first example, we get the following result: the box flexes to cover the available horizontal space. th...
...e determined by its contents and padding. if you want an element to be flexible, you should set its flexibility to 1. this makes the element stretch to occupy as much available space there is in the direction of its orientation. if we add flexibility to the hbox in our first example, we get the following result: the box flexes to cover the available horizontal space. the buttons maintain their
size. if we also add flexibility to the "cat" button, this is what we get: now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box. what would happen if we also add flexibility to the "parrot" button? since both buttons have a flexibility of 1, the available space is distributed evenly among the two. note that this is not alwa...
...And 5 more matches
CSS3 - Archive of obsolete content
css @font-face at-rule. the control of the contextual inter-glyph spacing via the css font-kerning property. the choice of language-specific glyphs via the css font-language-override property. the choice of glyphs with specific opentype features via the css font-feature-settings property. the control of the aspect ratio to use when fallback fonts are selected via the css font-
size-adjust property. the choice of alternative font faces using the css font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. it also extends the related css font-variant shorthand property and introduces the @font-feature-values at-rule. the control of the automatic generation o...
...is module . support for icons, defined by the css icon property simultaneously with the new icon value of the css content property. at risk: due to insufficient browser support, standardization of the icon property and the icon value may be postponed to css4. support for the css outline-offset property giving more control on the position of the outline. support for the css re
size property allowing web authors to control if and how elements should be re
sized. support for the css text-overflow property defining how text overflows, if needed. at risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this module. the ability to define the hotspot of a c...
...xt-overflow property defining how text overflows, if needed. at risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for <string> values may be postponed to the next iteration of this module. the ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-re
size, nwse-re
size, col-re
size, row-re
size, all-scroll, zoom-in, zoom-out, extending the cursor property. the ability to specify the sequential navigation order (that is the tabbing order ) using the css nav-index, nav-up, nav-right, nav-left, nav-down properties. at risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration...
...And 5 more matches
Monitoring downloads - Archive of obsolete content
the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its addlistener() method is called to start listening for download status updates. the datab...
...henever a download's state changes. this is part of the nsidownloadprogresslistener interface. that code looks like this: ondownloadstatechange: function(astate, adownload) { var statement; switch(adownload.state) { case components.interfaces.nsidownloadmanager.download_downloading: // add a new row for the download being started; each row includes the // source uri,
size, and start time. the end time and download speed // are both set to 0 at first, since we don't know those yet. // status is the same status value that came from the download manager. var dbconn = this.storageservice.opendatabase(this.dbfile); statement = dbconn.createstatement("replace into items values " + "(?1, ?2, ?3, 0, ...
... // status is the same status value that came from the download manager. ...
...And 5 more matches
Theme changes in Firefox 2 - Archive of obsolete content
ive #home-button:active #mail-button #mail-button:active #mail-button[disabled="true"] #mail-button[open="true"] #new-tab-button:active #new-tab-button[checked="true"] #new-window-button:active #new-window-button[checked="true"] #paste-button:active #print-button:active #reload-button:active #stop-button:active .messagebutton .messageimage .messagetext browsermessage toolbar[icon
size="small"] #bookmarks-button:active toolbar[icon
size="small"] #copy-button:active toolbar[icon
size="small"] #cut-button:active toolbar[icon
size="small"] #downloads-button:active toolbar[icon
size="small"] #history-button:active toolbar[icon
size="small"] #home-button:active toolbar[icon
size="small"] #mail-button toolbar[icon
size="small"] #mail-button:active toolbar[icon
size="small"] #mail-but...
... toolbar[icon
size="small"] #copy-button:active toolbar[icon
size="small"] #cut-button:active toolbar[icon
size="small"] #downloads-button:active toolbar[icon
size="small"] #history-button:active toolbar[icon
size="small"] #home-button:active toolbar[icon
size="small"] #mail-button toolbar[icon
size="small"] #mail-button:active toolbar[icon
size="small"] #mail-button[disabled="true"] toolbar[icon
size="small"] #mail-button[open="true"] toolbar[icon
size="small"] #new-tab-button:active toolbar[icon
size="small"] #new-window-button:active toolbar[icon
size="small"] #paste-button:active toolbar[icon
size="small"] #print-button:active toolbar[icon
size="small"] #reload-button:active toolbar[icon
size="small"] #stop-button:active toolbar[mode="icons"] .toolbarbutton-text toolbar[mode="text"] .too...
...ck-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocompletecomment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocompletecomment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[icon
size="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[icon
size="small"] #back-button:hover toolbar[icon
size="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker toolbar[icon
size="small"] #back-button:hover:active toolbar[icon
size="small"] #back-button:hover:active .toolbarbutton-menubutton-dropmarker toolbar[icon
size="small"] #back-button[buttondown="true"] > .toolba...
...And 5 more matches
Theme changes in Firefox 4 - Archive of obsolete content
ind all the skin resources you need. /chrome/browser/skin contains application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. ...
...me/browser/skin contains application-specific skin resource files. /chrome/toolkit/skin contains toolkit skin files. note: when extracting omni.jar, you may incorrectly get false warnings from some virus protection software. in addition, due to the way the archive is optiimized, some zip utilities don't work with it. ...
... with it. controlling the actual icon
size used by add-on toolbar buttons the icon
size attribute of the browser's toolbar elements now has a different default value on each toolbar independently. the value does not necessarily reflect the user preference in the toolbar customization palette anymore. the theme can now override the value by setting a special css property on the toolbar. the icon
size attribute of the toolbox element in the main browser window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette. use of the icon
size attribute on toolbar elements add-ons use the icon
size attribute to determine which icon they should display when a button is placed in a specific toolbar. ...
...And 5 more matches
Square tilemaps implementation: Scrolling maps - Game development
y. the camera the camera is an object that holds information about which section of the game world or level is currently being shown. cameras can either be free-form, controlled by the player (such as in strategy games) or follow an object (such as the main character in platform games.) regardless of the type of camera, we would always need information regarding its current position, viewport
size, etc. in the demo provided along with this article, these are the parameters the camera has: x and y: the current position of the camera. in this implementation, we are assuming that (x,y) points to the top left corner of visible portion of the map. width and height: the
size of the camera's viewport. maxx and maxy: the limit for the camera's position — the lower limit will nearly always b...
... rendering the map there are two main differences between rendering scrolling maps vs. ...
... rendering the map there are two main differences between rendering scrolling maps vs. static maps: partial tiles might be shown. ...
...And 5 more matches
Backgrounds and borders - Learn web development
these values out in the example below. we have set the value to no-repeat so you will only see one star. try out the different values — repeat-x and repeat-y — to see what their effects are. sizing the background image in the example above, we have a large image that has ended up being cropped as it is larger than the element it is a background of. in this case we could use the background-
size property, which can take length or percentage values, to
size the image to fit inside the background. you can also use keywords: cover — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. in this case, part of the image is likely to end up outside the box. contain — the browser will make the image the right ...
... property, which can take length or percentage values, to
size the image to fit inside the background. you can also use keywords: cover — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. in this case, part of the image is likely to end up outside the box. contain — the browser will make the image the right
size to fit inside the box. in this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box. in the example below i have used the larger image from the example above and used length units to
size it inside the box. you can see this has distorted the image. try the following. change the length units us...
...e box. in this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box. in the example below i have used the larger image from the example above and used length units to
size it inside the box. you can see this has distorted the image. try the following. change the length units used to modify the
size of the background. remove the length units and see what happens when you use background-
size: cover or background-
size: contain. if your image is smaller than the box, you can change the value of background-repeat to repeat the image. positioning the background image the background-position property allows you to choose the position in which the background image appears on the box it is ap...
...And 5 more matches
How CSS is structured - Learn web development
you expected because something else in the stylesheet has more specificity. recognizing that more than one rule could apply to an element, is the first step in fixing these kinds of issues. properties and values at its most basic level, css consists of two components: properties: these are human-readable identifiers that indicate which stylistic features you want to modify. for example, font-
size, width, background-color. values: each property is assigned a value. this value indicates how to style the property. the example below highlights a single property and value. the property name is color and the value is blue. when a property is paired with a value, this pairing is called a css declaration. css declarations are found within css declaration blocks. in the example below, highli...
...the primary way of defining layout and styling for a document. the css engine calculates which declarations apply to every single element of a page. important: css properties and values are case-sensitive. the property and value in each pair is separated by a colon. (:) look up different values of properties listed below. write css rules that apply styling to different html elements: font-
size width background-color color border important: if a property is unknown, or if a value is not valid for a given property, the declaration is processed as invalid. it is completely ignored by the browser's css engine. important: in css (and other web standards), it has been agreed that us spelling is the standard where there is language variation or uncertainty. for example, color should...
...g for comments in your code editor becomes a way to efficiently find a section of code. /* handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% helvetica, arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* let's special case the global font
size. ...
...And 5 more matches
Styling Vue components with CSS - Learn web development
ng: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-
size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media scr...
... the reset styles should be applied to the app now. the images below show the look of the app before and after the reset is applied. before: ...
...ey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-
size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-
size: 2.4rem; } } .visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: rect(1px, 1px, 1px, 1px); white-space: nowrap; } [class*="stack"] > * ...
...And 5 more matches
Performance best practices for Firefox front-end engineers
composite steps of the pipeline, this hacks blog post does a great job of explaining it. to achieve a 60 fps frame rate, all of the above has to happen in 16 milliseconds or less, every frame. note that requestanimationframe() lets you queue up javascript to run right before the style flush occurs. this allows you to put all of your dom writes (most importantly, anything that could change the
size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames. see detecting and avoiding synchronous reflow below for more information. this also means that requestanimationframe() is not a good place to put queries for...
...f that happens, some of them will be postponed until the next frame (or possibly multiple frames, if necessary), this skipping of frames is called jank. generally speaking, you force a synchronous style flush any time you query for style information after the dom has changed within the same frame tick. depending on whether or not the style information you’re asking for has something to do with
size or position, you may also cause a layout recalculation (also referred to as layout flush or reflow), which is also an expensive step (see detecting and avoiding synchronous reflow below). to avoid this: avoid reading style information if you can. if you must read style information, do so at the very beginning of the frame, before any changes have been made to the dom since the last time a style ...
...ome ui, striving for interruptible layout is always good practice because uninterruptible layout has the potential to be much worse (see next section). to repeat, only interruptible reflows in web content can be interrupted. uninterruptible reflow uninterruptible reflow is what we want to avoid at all costs. uninterruptible reflow occurs when some dom node’s styles have changed such that the
size or position of one or more nodes in the document will need to be updated, and then javascript asks for the
size or position of anything. since everything is pending a reflow, the answer isn't available, so everything stalls until the reflow is complete and the script can be given an answer. flushing layout also means that styles must be flushed to calculate the most up-to-date state of things, so...
...And 5 more matches
MathML Demo: <mfrac> - fractions
inline, text style, thick line x 2 + 1 x x 2 + 1 x the end. ...
... inline, text style, thick line x 2 + 1 x x 2 + 1 x the end. ...
... inline, text style, thick line x 2 + 1 x x 2 + 1 x the end. ...
...And 5 more matches
Index
ction provides a safe way to expose a function from a privileged scope to a less-privileged scope. 37 components.utils.forcegc needscontent, xpcom, xpcom:language bindings, xpconnect components.utils.forcegc lets scripts force a garbage collection cycle. the mozilla javascript engine will perform garbage collection automatically when the javascript heap grows beyond a certain
size. this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascript. 38 compo...
...! 298 getlinkindex no summary! 299 linkcount no summary! 300 nsiaccessibleimage interfaces, interfaces:scriptable, xpcom, xpcom interface reference returns the coordinates of the image accessible. 301 getimageposition this content is now available at nsiaccessibleimage.getimageposition(). 302 getimage
size this content is now available at nsiaccessibleimage.getimage
size(). 303 nsiaccessibleprovider accessibility, interfaces, interfaces:scriptable, xpcom, xpcom api reference, xpcom interface reference no summary! 304 nsiaccessiblerelation interfaces, interfaces:scriptable, xpcom, xpcom interface reference returns accessible relation target at the ...
...you need to use nsitextinputprocessor instead of this. 429 nsiconsolelistener interfaces, interfaces:scriptable, xpcom, xpcom interface reference called by the nsiconsoleservice when a message is posted to the console. listeners must first be attached to the s...
...And 5 more matches
IAccessible2
censes/ia2/accessible2.idlnot scriptable please add a summary to this article. ...
... [propget] hresult groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [propget] hresult indexinparent([out] long indexinparent ); [propget] hresult locale([out] ia2locale locale ); [propget] hresult localizedextendedrole([out] bstr localizedextendedrole ); [propget] hresult localizedextendedstates([in] long maxlocalizedextendedstates, [out,
size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult nrelations([out] long nrelations ); [propget] hresult relation([in] long relationindex, [out] iaccessiblerelation relation ); [propget] hresult relations([in] long maxr...
...dextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] hresult nextendedstates([out] long nextendedstates ); [propget] hresult nrelations([out] long nrelations ); [propget] hresult relation([in] long relationindex, [out] iaccessiblerelation relation ); [propget] hresult relations([in] long maxrelations, [out,
size_is(maxrelations), length_is( nrelations)] iaccessiblerelation relations, [out] long nrelations ); hresult role([out] long role ); hresult scrollto([in] enum ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult states([out] accessiblestates states ); [propget] hresult uniqueid([out] long uniqueid ); ...
...And 5 more matches
nsIAccessibleTable
mnatindex in gecko 1.9.2 void getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring getrowdescription(in long rowindex); long getrowextentat(in long row, in long column); long getrowindexat(in long cellindex); note: renamed from getrowatindex in gecko 1.9.2 void getselectedcellindices(out unsigned long cellsarray
size, [retval, array,
size_is(cellsarray
size)] out long cellsarray); note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarray
size, [retval, array,
size_is(columnsarray
size)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsigned long rowsarray
size, [retval, array,
size...
...ray,
size_is(cellsarray
size)] out long cellsarray); note: renamed from getselectedcells in gecko 1.9.2 void getselectedcolumnindices(out unsigned long columnsarray
size, [retval, array,
size_is(columnsarray
size)] out long columnsarray); note: renamed from getselectedcolumns in gecko 1.9.2 void getselectedrowindices(out unsigned long rowsarray
size, [retval, array,
size_is(rowsarray
size)] out long rowsarray); note: renamed from getselectedrows in gecko 1.9.2 boolean iscellselected(in long rowindex, in long columnindex); boolean iscolumnselected(in long columnindex); boolean isprobablyforlayout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void...
...the number of rows the cell spans. return the index of the row containg the given cell index. long getrowindexat( in long cellindex ); parameters cellindex the cell index. return value the row index. getselectedcellindices() renamed from getselectedcells in gecko 1.9.2 return an array of cell indices currently selected. ...
...And 5 more matches
nsILoginManagerStorage
ager interface instead. the login manager will handle selecting and using the correct nsiloginmanangerstorage module. ...
...hod overview void addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array,
size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array,
size_is(count)] out wstring hostnames); void getallencryptedlogins([optional] out unsigned long count, [retval, array,
size_is(count)] out nsilogininfo logins); void getalllogins([optional] out unsigned long count, [retval, array,
size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void init(); void initwithfile(in nsifile ainputfile, in nsifile aoutpu...
...read only. methods addlogin() called by the login manager to store a new login. gecko 1.9.1 note default values for the nsiloginmetainfo properties are created if the spe...
...And 5 more matches
nsIMsgFolder
; void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long flag); void setprefflag(); nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long result
size, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, i...
...void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); boolean hasmsgoffline(in nsmsgkey msgkey); nsiinputstream getofflinefilestream(in nsmsgkey msgkey, out pruint32 offset, out pruint32
size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); void enablenotifications(in long notificationtype, in boolean enable, in boolean dbbatching); ...
...scope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgpreviewtext([array,
size_is (anumkeys)] in nsmsgkey akeystofetch, in unsigned long anumkeys, in boolean alocalonly, in nsiurllistener aurllistener); void addkeywordstomessages(in nsisupportsarray amessages, in acstring akeywords); void removekeywordsfrommessages(in nsisupportsarray amessages, in acstring akeywords); autf8string getmsgtextfromstream(in nsimsgdbhdr amsghdr, in nsiinputstream astr...
...And 5 more matches
nsINavHistoryQuery
/ seamonkey 2.1) the nsinavhistoryquery is not intended to be a super-general query mechanism. this was designed so that most queries can be done in only one sql query. ...
...so that most queries can be done in only one sql query. ...
... absoluteendtime prtime read only: retrieves...
...And 5 more matches
ctypes
str to utf-8 and returns a new cdata object of array type. type description char a character type that behaves like the char c type on the platform. signed_char a signed character that behaves like the char type on the platform. unsigned_char an unsigned character that behaves like the unsigned char type on the platform. ...
... intptr_t a platform-dependent integer representation of a pointer. uintptr_t a platform-dependent unsigned integer representation of a pointer. ...
... intptr_t a platform-dependent integer representation of a pointer. uintptr_t a platform-dependent unsigned integer representation of a pointer. javascript characters 16-bit c unicode characters are handled by js-ctypes using the jschar type. ...
...And 5 more matches
Responsive Design Mode - Firefox Developer Tools
responsive design mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices. ...
... developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos). from the developer tools toolbox: press the responsive design mode button in the toolbox's toolbar: from the keyboard: press ctrl + shift + m (or cmd + opt + m on macos). controlling responsive design mode with responsive design mode enabled, the content area for web pages is set to the screen
size for a mobile device. initially, it's set to 320 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information for the selected device is centered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have sel...
...0 x 480 pixels. note: the device you select when in responsive design mode and the orientation (portrait or landscape) is saved between sessions. information for the selected device is centered over the display. from left to right, the display includes: name of the selected device - a drop-down list that includes whatever devices you have selected from the device settings screen. ...
...And 5 more matches
Basic animations - Web APIs
ama is scrolled left-to-right. we're using an image of yosemite national park we took from wikipedia, but you could use any image that's larger than the canvas. var img = new image(); // user variables - customize these to change the image being scrolled, its // direction, and the speed. ...
...-right. we're using an image of yosemite national park we took from wikipedia, but you could use any image that's larger than the canvas. var img = new image(); // user variables - customize these to change the image being scrolled, its // direction, and the speed. ...
...rg/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasx
size = 800; var canvasy
size = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale; imgh = img.height * scale; if (imgw > canvasx
size) { // image larger than canvas x = canvasx
size - imgw; } if (imgw > canvasx
size) { // image width larger than canvas clearx = imgw; } else { clearx = canvasx
size; } if (imgh > canvasy
size) { // image height larger than canvas cleary = imgh; } else { cleary = canvasy
size; } // get canvas context ct...
...And 5 more matches
HTMLBodyElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 5 more matches
SVGRectElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 5 more matches
SVGTSpanElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 5 more matches
SVGTextElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 5 more matches
CSS Containment - CSS: Cascading Style Sheets
o make decisions about how to render the content. for example, it might not render articles that are outside the viewable area. if we give each <article> the contain property with a value of content, when new elements are inserted the browser understands it does not need to relayout or repaint any area outside of the containing element's subtree, although if the <article> is styled such that its
size depends on its contents (e.g. with height: auto), then the browser may need to account for its
size changing). we have told it by way of the contain property that each article is independent. the content value is shorthand for contain: layout paint. it tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element i...
...nt containment essentially clips the box to the padding edge of the principal box. there can be no visible overflow. the same things are true for paint containment as layout containment (see above). another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. ...
...x to the padding edge of the principal box. there can be no visible overflow. the same things are true for paint containment as layout containment (see above). another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. ...
...And 5 more matches
Using CSS gradients - CSS: Cascading Style Sheets
repeating-conic-gradient() functions. gradients can be used anywhere you would use an <image>, such as in backgrounds. because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. in addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be re
sized on the fly. we'll start by introducing linear gradients, then introduce features that are supported in all gradient types using linear gradients as the example, then move on to radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you ne...
...gths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top. <div class="radial-gradient"></div> div { width: 120px; height: 240px; } .radial-gradient { background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); } sizing radial gradients unlike linear gradients, you can specify the
size of radial gradients. possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default. example: closest-side for ellipses this example uses the closest-side
size value, which means the
size is set by the distance from the starting point (the center) to the closest side of the enclosing box. <div class="radial-ellipse-side"></div>...
...distance from the starting point (the center) to the closest side of the enclosing box. <div class="radial-ellipse-side"></div> div { width: 240px; height: 100px; } .radial-ellipse-side { background: radial-gradient(ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige); } example: farthest-corner for ellipses this example is similar to the previous one, except that its
size is specified as farthest-corner, which sets the
size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point. <div class="radial-ellipse-far"></div> div { width: 240px; height: 100px; } .radial-ellipse-far { background: radial-gradient(ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige); } ...
...And 5 more matches
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-
size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-
size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-
size left top color; transition-duration:2s; transition-delay:0.
...lor; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-
size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-
size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-
size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-
size left top color; transition-duration:2s; transition-delay...
...el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-
size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-
size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-
size left top color; transition-duration:2s; transition-delay:1s;...
...And 5 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
ion out to their users so they know what the image means. alt text is also displayed on the page if the image can't be loaded for some reason: for example, network errors, content blocking, or linkrot. there are many other attributes to achieve various purposes: referrer/cors control for security and privacy: see crossorigin and referrerpolicy. use both width and height to set the intrinsic
size of the image, allowing it to take up space before it loads, to mitigate content layout shifts. responsive image hints with
sizes and srcset (see also the <picture> element and our responsive images tutorial). supported image formats the html standard doesn't list what image formats to support, so each user agent supports different formats. a complete guide to image formats supported by web br...
...is best for the user. height the intrinsic height of the image, in pixels. must be an integer without a unit. importance indicates the relative download importance of the resource. priority hints allow the values: auto: no preference. the browser may use its own heuristics to prioritize the image. high: the image is of high priority. low: the image is of low priority. intrinsic
size this attribute tells the browser to ignore the actual intrinsic
size of the image and pretend it’s the
size specified in the attribute. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples ismap this boolean attribute indicates that the image is part of a server-side map. i...
...ther origins will limit the included referral data to the scheme, host, and port, while navigating from the same origin will include the full path and query string. unsafe-url: the referer header will always include the origin, path and query string, but not the fragment, password, or username. this is unsafe because it can leak information from tls-protected resources to insecure origins.
sizes one or more strings separated by commas, indicating a set of source
sizes. each source
size consists of: a media condition. this must be omitted for the last item in the list. a source
size value. media conditions describe properties of the viewport, not of the image. for example, (max-height: 500px) 1000px proposes to use a source of 1000px width, if the viewport is not higher than 5...
...And 5 more matches
<input type="tel"> - HTML: Hypertext Markup Language
s also makes adding custom validation and handling of phone numbers more convenient. note: browsers that don't support type tel fall back to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and
size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string (""). additional attributes in addition to the attributes that operate on all <input> elements regard...
...the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values provided are su...
...(form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size the
size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the fo...
...And 5 more matches
<input type="text"> - HTML: Hypertext Markup Language
ory. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. value a domstring representing the text contained in the text field. events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and
size idl attributes list, value methods select(), setrangetext() and setselectionrange(). value the value attribute is a domstring that contains the current value of the text entered into the text field. you can retrieve this using the value property in javascript. let thetext = mytextinput.value; if no validation constraints are in place for the input (see validatio...
...the <datalist> provides a list of predefined values to sugge...
...(form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size the
size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the fo...
...And 5 more matches
Browser detection using the user agent - HTTP
ser agent sniffing is to detect if the device is a mobile device. however, people too often overlook what they are really after. people use user agent sniffing to detect if the users' device is touch-friendly and has a small screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen
sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's devic...
...creen only if (!("maxtouchpoints" in navigator)) { /*code here*/}. using this information of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself. rather, add in touch conveniences such as bigger, more easily clickable buttons (you can do this using css by simply increasing the font
size). here is an example of code that increases the padding of #examplebutton to 1em on mobile devices. var hastouchscreen = false; if ("maxtouchpoints" in navigator) { hastouchscreen = navigator.maxtouchpoints > 0; } else if ("msmaxtouchpoints" in navigator) { hastouchscreen = navigator.msmaxtouchpoints > 0; } else { var mq = window.matchmedia && matchmedia("(pointer:coarse)"); if...
...that will only annoy people because it will force them to use the desktop version. rather, try to have fewer columns of information in a longer page on smaller screens while having more col...
...And 5 more matches
Image file type and format guide - Web media technologies
, dithering is generally used. it is technically possible to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done. pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent. gif supports simple animation, in which following an initial full-
size frame, a series of images reflecting the parts of the image that change with each frame are provided. gif has been extremely popular for decades, due to its simplicity and compatibility. its animation support caused a resurgence in its popularity in the social media era, when animated gifs began to be widely used for short "videos", memes, and other simple animation sequences. another popular f...
...emark, document use and software licensing rules apply. no known royalty-bearing patents. svg (scalable vector graphics) svg is an xml-based vector graphics format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. svg files are ideal for diagrams, icons, and other images which can be accurately drawn at any
size. ...
...hat create shapes, lines, apply colors, filters, and so forth. svg files are ideal for diagrams, icons, and other images which can be accurately drawn at any
size. as such, svg is popular for user interface elements in modern web design. svg files are text files containing source code that, when interpreted, draws the desired image. for instance, this example defines an drawing area with initial
size 100 by 100 units, containing a line drawn diagonally through the box: <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> </svg> svg can be used in web content in two ways: you can directly write the <svg> element within the html, containing svg elements to draw the image. you can display an svg image anywhere you can use ...
...And 5 more matches
Populating the page: how browsers work - Web Performance
nks during parsing, described below. tcp slow start / 14kb rule the first response packet will be 14kb. this is part of tcp slow start, an algorithm which balances the speed of a network connection. slow start gradually increases the amount of data transmitted until the network's maximum bandwidth can be determined. in tcp slow start, after receipt of the initial packet, the server doubles the
size of the next packet to around 28kb. subsequent packets increase in
size until a predetermined threshold is reached, or congestion is experienced. if you’ve ever heard of the 14kb rule for initial page load, tcp slow start is the reason why the initial response is 14kb, and why web performance optimization calls for focusing optimizations with this initial 14kb response in mind. tcp slow start...
...to every visible node in the dom tree, and determining, based on the css cascade, what the computed styles are for each node. layout the fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. ...
...s cascade, what the computed styles are for each node. layout the fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. layout is the process by which the width, height, and location of all the nodes in the render tree are determined, plus the determination of the
size and position of each object on the page. ...
...And 5 more matches
Patterns - SVG: Scalable Vector Graphics
rn)" stroke="black" width="200" height="200"/> </svg> screenshotlive sample inside the <pattern> element, you can include any of the other basic shapes you've included before, and each of them can be styled using any of the styles you've learned before, including gradients and opacity. here, we've just drawn two rectangle elements inside the pattern (which overlap, and one of which is twice the
size of the other and is used to fill in the entire pattern), and one circle. the confusing thing about patterns is defining a unit system and their
size. in the example above, we've defined a width and height attribute on the pattern element to describe how far the pattern should go before it begins repeating itself again. there are also x and y attributes available if you want to offset the start p...
... which specifies the units that these attributes will take. it defaults to "objectboundingbox" as it did above, so a value of 1 is scaled to the width/height of the object you're applying the pattern to. since, in this case, we wanted the pattern to repeat 4 times horizontally and vertically, the height and width are set to 0.25. this means the pattern's width/height is only 0.25 of the total box
size. unlike gradients, patterns have a second attribute, patterncontentunits, which describes the units system used inside the pattern element, on the basic shapes themselves. this attribute defaults to "userspaceonuse", the opposite of the patternunits attribute. what this means is that unless you specify one or both of these attributes (patterncontentunits and patternunits), the shapes you draw in...
... patternunits attribute. what this means is that unless you specify one or both of these attributes (patterncontentunits and patternunits), the shapes you draw inside your pattern are being drawn in a different coordinate system than the pattern element is using, which can make things a bit confusing when you're writing this by hand. to make this work in the example above, we had to consider the
size of our box (200 pixels) and the fact that we wanted the pattern to repeat itself 4 times horizontally and vertically. this means that each pattern unit was a 50×50 square. the two rects and the circle inside the pattern were then
sized to fit in a 50×50 box. anything we had drawn outside that box wouldn't have been shown. the pattern also had to be offset by 10 pixels so that it would start in ...
...And 5 more matches
jspage - Archive of obsolete content
ment.id(o,r); }q.push(o);}o=o[l];}return(p)?new elements(q,{ddup:false,cash:!r}):null;};var e={html:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","nore
size","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling...
... b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,re
size:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave:{base:"mouseout",condition:a},mousewheel:{base:(browser.e...
... b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@px",top:"@px",bottom:"@px",right:"@px",width:"@px",height:"@px",maxwidth:"@px",maxheight:"@px",minwidth:"@px",minheight:"@px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@px @px",color:"rgb(@, @, @)",font
size:"@px",letterspacing:"@px",lineheight:"@px",clip:"rect(@px @px @px @px)",margin:"@px @px @px @px",padding:"@px @px @px @px",border:"@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)",borderwidth:"@px @px @px @px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@px",opacity:"@"}); element.shortstyles={marg...
...And 4 more matches
Images, media, and form elements - Learn web development
elements images and video are described as replaced elements. this means that css cannot affect the internal layout of these elements — only their position on the page amongst other elements. as we will see however, there are various things that css can do with an image. certain replaced elements, such as images and video, are also described as having an aspect ratio. this means that it has a
size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. sizing images as you already know from following these lessons, everything in css generates a box. if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than ...
... already know from following these lessons, everything in css generates a box. if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box. you need to make a decision about what happens with the overflow. ...
...00 pixels in
size: one contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. the other is larger than 200 pixels and overflows the box. so what can we do about the overflowing issue? ...
...And 4 more matches
Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". media queries are a key part of responsive web design, as they allow you to create different layouts depending on the
size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. prerequisites: html basics (study introduction to html), and an idea of how...
...or the contained css to be applied. a set of css rules that will be applied if the test passes and the media type is correct. media types the possible types of media you can specify are: all print screen speech the following media query will only set the body to 12pt if the page is printed. it will not apply when the page is loaded in a browser. @media print { body { font-
size: 12pt; } } note: the media type here is different from the so-called mime type. note: there were a number of other media types defined in the level 3 media queries specification; these have been deprecated and should be avoided. note: media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types. medi...
...h a rule. width and height the feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond to different screen
sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. @media screen and (width: 600px) { body { color: red; } } open this example in the browser, or view the source. the width (and height) media features can be used as ranges, and therefore be prefixed with min- or max- to indicate that the given valu...
...And 4 more matches
How to structure a web form - Learn web development
pose of the <fieldset> it is included inside. many assistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. ...
...sistive technologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. ...
...chnologies will use the <legend> element as if it is a part of the label of each control inside the corresponding <fieldset> element. for example, some screen readers such as jaws and nvda will speak the legend's content before speaking the label of each control. ...
...And 4 more matches
Images in HTML - Learn web development
to. this is called "hotlinking". again, stealing someone's bandwidth is illegal. it also slows down your page, leaving you with no control over whether the image is removed or replaced with something embarrassing. our above code would give us the following result: note: elements like <img> and <video> are sometimes referred to as replaced elements. this is because the element's content and
size are defined by an external resource (like an image or video file), not by the contents of the element itself. note: you can find the finished example from this section running on github (see the source code too.) alternative text the next attribute we'll look at is alt. its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displ...
...doesn't result in much difference to the display, under normal circumstances. but if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do, resulting in the page loading quicker and more smoothly. ...
...ircumstances. but if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do, resulting in the page loading quicker and more smoothly. however, you shouldn't alter the
size of your images using html attributes. ...
...And 4 more matches
Index - Learn web development
2 learn to style html using css beginner, css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. 103 css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. this mo...
...ssment we'll challenge you to create an online template to achieve such a look. 117 debugging css beginner, css, dom, debugging, devtools, learn, source sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect. perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different
size than you expected. this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on. 118 fundamental css comprehension assessment, beginner, css, codingscripting, selectors, style, syntax, box model, comments, rules you've covered a lot in this module, so it ...
...xt, css, data loss, learn, overflow this lesson introduced the concept of overflow. you should understand that default css avoids making overflowing content invisible. you have discovered that you can manage potential overflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. 123 sizing items in css beginner, css, intrinsic
size, learn, max
size, min
size, percentage, sizing, viewport units this lesson has given you a rundown of some key issues that you might run into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. 124 styling tables article, begi...
...And 4 more matches
Multimedia: Images - Learn web development
this article looks at optimizing image and video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. ...
...tly used for content, so it's important that a visitor can see them as soon as possible for a good experience. loading strategy one of the biggest improvements to most websites is lazy-loading images beneath-the-fold, rather than downloading them all on initial page load regardless of whether a visitor scrolls to see them or not. ...
... the less colors an image has and the less photographic it is, the better it is to use the svg format. this requires the source to be available as in a vector graphic format. ...
...And 4 more matches
Firefox UI considerations for web developers
caled and cropped to fit in the space allotted to the icon. if the site also has a favicon, it may be overlaid in the corner of the image. the selected image is then presented within the top sites list. rich icons the high resolution icons—also known as rich icons—are specified by setting the rel attribute to one of: apple-touch-icon apple-touch-icon-precomposed fluid-icon the
size of each icon is taken from the
size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no
size attribute are assumed to be the standard classic iphone
size of 57x57 pixels. the icon closest in
size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, espec...
...taken from the
size attribute specified on the <link>, if it's provided. apple-touch-icon and apple-touch-icon-precomposed icons with no
size attribute are assumed to be the standard classic iphone
size of 57x57 pixels. the icon closest in
size to 96 pixels is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller
sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in
size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. ...
... is selected. firefox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller
sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in
size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. <link rel="apple-touch-icon"
sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon"
sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon"
sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel
size it requires. note: only "rich" icons (app...
...And 4 more matches
NSS Sample Code Utilities_1
; truelen = truelen-1; } outbuf->len = truelen; return 0; } /* * filetoitem */ secstatus filetoitem(secitem *dst, prfiledesc *src) { prfileinfo info; print32 numbytes; prstatus prstatus; prstatus = pr_getopenfileinfo(src, &info); if (prstatus != pr_success) { return secfailure; } dst->data = 0; if (secitem_allocitem(null, dst, info.
size)) { numbytes = pr_read(src, dst->data, info.
size); if (numbytes == info.
size) { return secsuccess; } } secitem_freeitem(dst, pr_false); dst->data = null; return secfailure; } /* * echooff */ static void echooff(int fd) { if (isatty(fd)) { struct termios tio; tcgetattr(fd, &tio); tio.c_lflag &= ~echo; tcsetattr(f...
...password(file *input, file *output, char *prompt, prbool (*ok)(char *)) { char phrase[200] = {'\0'}; int infd = fileno(input); int istty = isatty(infd); for (;;) { /* prompt for password */ if (istty) { fprintf(output, "%s", prompt); fflush (output); echooff(infd); } fgets(phrase,
sizeof(phrase), input); if (istty) { fprintf(output, "\n"); echoon(infd); } /* stomp on newline */ phrase[port_strlen(phrase)-1] = 0; /* validate password */ if (!(*ok)(phrase)) { if (!istty) return 0; fprintf(output, "password must be at least 8 characters long with one or more\n"); fprintf(out...
...h token. ...
...And 4 more matches
JS::AutoVectorRooter
bool appendall(const autovectorrooter<t> &other) appends all elements of other to the array. ...
... bool appendall(const autovectorrooter<t> &other) appends all elements of other to the array. ...
... bool appendall(const autovectorrooter<t> &other) appends all elements of other to the array. bool insert(t *p, const t &val) inserts an element val at the position specified by p. ...
...And 4 more matches
Setting up an update server
ig/version.txt (or something arbitrarily large like 2000.0a1). note: it can be a bit tricky to get the make_full_update.sh script to accept paths with spaces. serving the update preparing the update files first, create the directory that updates will be served from and put the mar file in it. ...
.... note: it can be a bit tricky to get the make_full_update.sh script to accept paths with spaces. serving the update preparing the update files first, create the directory that updates will be served from and put the mar file in it. then, create a file within called update.xml with these contents, replacing <mar name>, <hash> and <
size> with the mar's filename, its sha512 hash, and its file
size in bytes. ...
...s, replacing <mar name>, <hash> and <
size> with the mar's filename, its sha512 hash, and its file
size in bytes. ...
...And 4 more matches
IAccessibleTable
] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long maxchildren, [out,
size_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult selectedcolumns([in] long maxcolumns, [out,
size_is(,maxcolumns), length_is(, ncolumns)] long columns, [out] long ncolumns ); [propget] hresult selectedrows([in] long maxrows, [out,
size_is(,maxrows), length_is(, nrows)] long rows, [out] long nrows ); hresult selectrow([in] long row ); [prop...
...eters row 0 based row index of the accessible for which to return the column extent. column 0 based column index of the accessible for which to return the column extent. ncolumnsspanned returns the 1 based column extent of the specified cell. return value e_invalidarg if bad [in] passed, [out] value is 0. s_ok. columnheader() returns the column headers as an iaccessibletable object. content and
size of the returned table are implementation dependent. [propget] hresult columnheader( [out] iaccessibletable accessibletable, [out] long startingrowindex ); parameters accessibletable the column header. startingrowindex the 0 based row index where the header starts, usually 0. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. columnindex() translates...
...ong nrowsspanned ); parameters row 0 based row index of the accessible for which to return the row extent. column 0 based column index of the accessible for which to return the row extent. nrowsspanned returns the row extent of the specified cell. return value e_invalidarg if bad [in] passed, [out] value is 0. s_ok. rowheader() returns the row headers as an iaccessibletable object. content and
size of the returned table are implementation dependent. [propget] hresult rowheader( [out] iaccessibletable accessibletable, [out] long startingcolumnindex ); parameters accessibletable the row header. startingcolumnindex the 0 based column index where the header starts, usually 0. return value s_false if there is no header, [out] values are null and 0 respectively. s_ok. rowindex() translates...
...And 4 more matches
nsIFile
rns an enumeration of the elements in a directory. each element in the enumeration is an nsifile. read only. exceptions thrown ns_error_file_not_directory indicates that this nsifile does not reference a directory. diskspaceavailable print64 the number of bytes available to non-superuser on the disk volume containing the nsifile. read only. ...
...y indicates that this nsifile does not reference a directory. diskspaceavailable print64 the number of bytes available to non-superuser on the disk volume containing the nsifile. read only. file
size print64 the value of this attribute is the number of bytes corresponding to the data represented by the file. on the mac, getting/setting the file
size with nsifile only deals with the
size of the data fork. ...
...diskspaceavailable print64 the number of bytes available to non-superuser on the disk volume containing the nsifile. read only. file
size print64 the value of this attribute is the number of bytes corresponding to the data represented by the file. on the mac, getting/setting the file
size with nsifile only deals with the
size of the data fork. if you need to know the
size of the combined data and resource forks use nsilocalfilemac.getfile
sizewithresfork(). changing the
size of a nsifile operates on the underlying filesystem, possibly truncating the existing file to specified
size. ...
...And 4 more matches
nsIMessenger
y, in astring amsgfilename); void openattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveattachment(in acstring contenttpe, in acstring url, in acstring displayname, in acstring messageuri, in boolean isexternalattachment); void saveallattachments(in unsigned long count, [array,
size_is(count)] in string contenttypearray, [array,
size_is(count)] in string urlarray, [array,
size_is(count)] in string displaynamearray, [array,
size_is(count)] in string messageuriarray); void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); void detachattachment(in string contenttpe, in stri...
...rray); void saveattachmenttofile(in nsifile afile, in acstring aurl, in acstring amessageuri, in acstring acontenttype, in nsiurllistener alistener); void detachattachment(in string contenttpe, in string url, in string displayname, in string messageuri, in boolean savefirst, [optional] in boolean withoutwarning); void detachallattachments(in unsigned long count, [array,
size_is(count)] in string contenttypearray, [array,
size_is(count)] in string urlarray, [array,
size_is(count)] in string displaynamearray, [array,
size_is(count)] in string messageuriarray, in boolean savefirst, [optional] in boolean withoutwarning); nsilocalfile saveattachmenttofolder(in acstring contenttype, in acstring url, in acstring displayname, in acstring messageuri, in nsilocalfile ...
... attributes attribute type description transactionmanager nsitransactionmanager readonly: the transaction manager for this nsimessenger instance. sendingunsentmsgs boolean indicates if sending messages is in pro...
...And 4 more matches
nsIVariant
ative code only! pruint8 getasint8(); native code only! void getasinterface(out nsiidptr iid, [iid_is(iid), retval] out nsqiresult iface); native code only! nsisupports getasisupports(); native code only! jsval getasjsval(); native code only! string getasstring(); native code only! void getasstringwith
size(out pruint32
size, [
size_is(
size), retval] out string str); native code only! pruint16 getasuint16(); native code only! pruint32 getasuint32(); native code only! pruint64 getasuint64(); native code only! pruint8 getasuint8(); native code only! wchar getaswchar(); native code only! wstring getaswstring(...
...native code only! methods native code only!getasacstring acstring getasacstring(); parameters none. return value the value is converted to an 8-bit string in the iso-8859-1 charac...
...native code only! methods native code only!getasacstring acstring getasacstring(); parameters none. return value the value is converted to an 8-bit string in the iso-8859-1 character set. if the va...
...And 4 more matches
Working with data
ta objects. creating uninitialized cdata objects there are three forms of the syntax for creating cdata objects without immediately assigning them a value: var mycdataobj = new type; var mycdataobj = new type(); var mycdataobj = type(); these all do the same thing: they return a new cdata object of the specified type, whose data buffer has been populated entirely with zeroes. ...
...if the conversion isn't possible, typeerror is thrown. the resulting data is then copied into a new cdata object. if the original value is already a cdata object, the original object is simply duplicated directly into the new one. ...
...sn't undefined, the specified value is converted to the given type. if the conversion isn't possible, typeerror is thrown. the resulting data is then copied into a new cdata object. if the original value is already a cdata object, the original object is simply duplicated directly into the new one. if type is an array type of unspecified length, the following steps are taken: if the value is a
size value, a new array of that length is created, with its cells ready to accept values of the same type as those in the specified array. this is the same as new arraytype(type.elementtype, value). if the type represents a javascript string (that is, an array of jschar characters followed by a null terminator), a copy of that string is created and returned. if the type is an array of 8-bit characte...
...And 4 more matches
Dominators - Firefox Developer Tools
these concepts matter in memory analysis, because often an object may itself be small, but may hold references to other much larger objects, and by doing this will prevent the garbage collector from freeing that extra memory. you can see the dominators in a page using the dominators view in the memory tool. with a garbage-collected language, like javascript, the programmer doesn't generally have to worry about deallocating memory. ...
...n be deallocated. so when an object becomes unreachable (for example, because it is only referenced by a single local variable which goes out of scope) then any objects it references also become unreachable, as long as no other objects reference them: conversely, this means that objects are kept alive as long as some other reachable object is holding a reference to them. ...
...because it is only referenced by a single local variable which goes out of scope) then any objects it references also become unreachable, as long as no other objects reference them: conversely, this means that objects are kept alive as long as some other reachable object is holding a reference to them. ...
...And 4 more matches
HTMLHRElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 4 more matches
HTMLInputElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 4 more matches
HTMLLinkElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 4 more matches
PaintWorklet.registerPaint - Web APIs
that registerpaint() is called without a reference to paintworklet. the file itself is loaded through css.paintworklet.addmodule() (documented here on the parent class of paintworklet, at worklet.addmodule(). ...
...ence to paintworklet. the file itself is loaded through css.paintworklet.addmodule() (documented here on the parent class of paintworklet, at worklet.addmodule(). ...
...hrough css.paintworklet.addmodule() (documented here on the parent class of paintworklet, at worklet.addmodule(). ...
...And 4 more matches
PaintWorklet - Web APIs
r to show creating, loading, and using a paintworklet. create a paintworklet the following shows an example worklet module. this should be in a separate js file. note that registerpaint() is called without a reference to paintworklet. ...
...worklet. create a paintworklet the following shows an example worklet module. this should be in a separate js file. note that registerpaint() is called without a reference to paintworklet. ...
...ows an example worklet module. this should be in a separate js file. note that registerpaint() is called without a reference to paintworklet. ...
...And 4 more matches
SVGCircleElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGLineElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGPathElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGPolygonElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGPolylineElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGTextPathElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
SVGTextPositioningElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 4 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
achment_texture_level: mipmap level. default value: 0. gl.framebuffer_attachment_texture_cube_map_face: the name of cube-map face of the texture. when using the ext_srgb extension: ext.framebuffer_attachment_color_encoding_ext: the framebuffer color encoding. ...
...ault value: 0. gl.framebuffer_attachment_texture_cube_map_face: the name of cube-map face of the texture. when using the ext_srgb extension: ext.framebuffer_attachment_color_encoding_ext: the framebuffer color encoding. ...
...gb extension: ext.framebuffer_attachment_color_encoding_ext: the framebuffer color encoding. when using a webgl 2 context, the following values are available additionally: gl.framebuffer_attachment_alpha_
size gl.framebuffer_attachment_blue_
size gl.framebuffer_attachment_color_encoding gl.framebuffer_attachment_component_type gl.framebuffer_attachment_depth_
size gl.framebuffer_attachment_green_
size gl.framebuffer_attachment_red_
size gl.framebuffer_attachment_stencil_
size gl.framebuffer_attachment_texture_layer when using the ovr_multiview2 extension: ext.framebuffer_attachment_texture_num_views_ovr: the number of views of the framebuffer object attachment. ext.framebuffer_attachment_texture_base_view_index_ovr: the b...
...And 4 more matches
Raining rectangles - Web APIs
me loop is implemented using timeouts. <p>you caught <strong>0</strong>. ...
...so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we won't get any animation. t...
...so we reschedule // the timeout to call drawanimation again in 17ms. // otherwise we won't get any animation. timer = settimeout(draw...
...And 4 more matches
CSS Logical Properties and Values - CSS: Cascading Style Sheets
horizontal dimension in vertical writing modes. for standard english text, it is the vertical dimension. inline dimension the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...mension in vertical writing modes. for standard english text, it is the vertical dimension. inline dimension the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...cal writing modes. for standard english text, it is the vertical dimension. inline dimension the dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. for standard english text, it is the horizontal dimension. ...
...And 4 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
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-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-co...
...oom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized. property links to the new synax. old prefixed syntax is still supported in some browsers. webkit-prefixed properties on the standards 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. a -webkit-align-content -webkit-align-items -webkit-align-self ...
...webkit-align-items -webkit-align-self -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webkit-animation-name -webkit-animation-play-state -webkit-animation-timing-function b -webkit-backface-visibility -webkit-background-clip -webkit-background-origin -webkit-background-
size -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-col...
...And 4 more matches
align-self - CSS: Cascading Style Sheets
normal the effect of this keyword is dependent of the layout mode we are in: in absolutely-positioned layouts, the keyword behaves like start...
...e keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. the property doesn't apply to block-level boxes, and to table cells. self-start aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis. self-end aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the...
...h the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. flex-end the cross-end margin edge of the flex item is flushed with the cross-end edge of the line. center the flex item's margin box is centered within the line on the cross-axis. if the cross-
size of the item is larger than the flex container, it will overflow equally in both directions. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallb...
...And 4 more matches
fit-content() - CSS: Cascading Style Sheets
the fit-content() css function clamps a given
size to an available
size according to the formula min(maximum
size, max(minimum
size, argument)). 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 function can be used as a track
size in css grid properties, where the maximum
size is defined by max-content and the minimum
size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track
size is clamped at argument if it is greater than the auto minimum. ...
... syntax the fit-content() function accepts a <length> or a <percentage> as an argument. ...
... syntax the fit-content() function accepts a <length> or a <percentage> as an argument. /* <length> values */ fit-content(200px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length. ...
...And 4 more matches
flex-basis - CSS: Cascading Style Sheets
the flex-basis css property sets the initial main
size of a flex item. it sets the
size of the content box unless otherwise set with box-sizing. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. ...
...pull request. note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically
size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>. values <'width'> an absolute <length>, a <percentage> of the parent flex container's main
size property, or the keyword auto. negative values are invalid. defaults to a...
...it was implemented in bug 1032922. ...
...And 4 more matches
place-content - CSS: Cascading Style Sheets
items is the same. the empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. ...
...before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. ...
...quals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. ...
...And 4 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links. <a> and <area> will still created links, but without a defined relationship. like all html keyword attribute values, these values are case-insenstive. ...
...instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. ...
...d, the default cursor will be help instead of pointer. icon valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document. ...
...And 4 more matches
<input type="url"> - HTML: Hypertext Markup Language
denote whether the current value of the field is a valid url or not. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and
size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <input> element's value attribute contains a domstring which is automatically validated as conforming to url syntax. more specifically, there are two possible value formats that will pass validation: an empty string ("") indicating tha...
...the <datalist> provides a list of predefined values to sugge...
...(form input) element for more information. readonly a boolean attribute which, if present, means this field cannot be edited by the user. its value can, however, still be changed by javascript code directly setting the htmlinputelement.value property. note: because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.
size the
size attribute is a numeric value indicating how many characters wide the input field should be. the value must be a number greater than zero, and the default value is 20. since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the fo...
...And 4 more matches
HTML documentation index - HTML: Hypertext Markup Language
orm, rel the rel attribute defines the relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. ...
...ween a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. 48 html attribute: required attribute, attributes, constraint validation, forms, required the boolean required attribute 49 html attribute:
size attribute, html, input, reference, select the
size attribute defines the width of the <input> and the height of the <select> element. for the input, if the type attribute is text or password then it's the number of characters. this must be an integer value 0 or higher. if no
size is specified, or an invalid value is specified, the input has no
size declared, and the form control will be the default width based on the user agent. if css targets th...
...65 <base>: the document base url element element, html, html document metadata, html:metadata content, reference the html <base> element specifies the base url to use for all relative urls in a document. 66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face,
size, and color for the other elements which are descended from its parent element. 67 <bdi>: the bidirectional isolate element bdi, bidi, directionality, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, internationalization, left-to-right, reference, right-to-left, text, web, direction, i18n, ltr, rtl the html bidirectiona...
...And 4 more matches
Responsive Navigation Patterns - Progressive web apps (PWAs)
terns are a great place to start. the following present several ways to handle navigation on large and small screens. top and left navigation menus are common on larger screens, but are often not the optimal way to present information on small screens because of the reduced screen real estate. therefore, it is necessary to consider the presentation of content and ease of navigation for all screen
sizes. note: html/css for the corresponding patterns will be available soon. pattern 1: top toggle menu in this pattern, as the screen width is reduced, the top navigation items rearrange until there is not enough space. at that point, some items move from the top navigation to a drop-down menu. in the smallest screen, all navigation items live in a toggle menu, and the user has to tap to ex...
...move from the top navigation to a drop-down menu. in the smallest screen, all navigation items live in a toggle menu, and the user has to tap to expand the toggle menu. you could rank the item priorities to ensure the most important items always appear in the top navigation. ...
...at that point, some items move from the top navigation to a drop-down menu. ...
...And 4 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
troke attributes. this is done the same way you reference elements in css, using a url. in this case, the url is just a reference to our gradient, which i've given the creative id, "gradient". to attach it, set the fill to url(#gradient), and voila! our object is now multicolored. you can do the same with stroke. the <lineargradient> element also takes several other attributes, which specify the
size and appearance of the gradient. the orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. these attributes define a line along which the gradient travels. the gradient defaults to a horizontal orientation, but it can be rotated by changing these. gradient2 in the above example is designed to create a vertical gradient. <lineargradient id="grad...
...entation. however, unlike linear gradients, it's a bit more complex. the radial gradient is again defined by two points, which determine where its edges are. the first of these defines a circle around which the gradient ends. it requires a center point, designated by the cx and cy attributes, and a radius, r. setting these three attributes will allow you to move the gradient around and change its
size, as shown in the second rect above. the second point is called the focal point and is defined by the fx and fy attributes. while the first point described where the edges of the gradient were, the focal point describes where its middle is. this is easier to see with an example. center and focal point <?xml version="1.0" standalone="no"?> <svg width="120" height="120" version="1.1" xmlns="ht...
...if the focal point isn't given at all, it's assumed to be at th...
...And 4 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
you want to include many options in your toolbar and you don't want it to be too cluttered. the other types, checkbox and radio are useful when you have buttons that change state when the user clicks on them. read more about this in the type attribute specification. keep in mind some users have small screens with low resolution. if you shrink the firefox window, you'll notice that the content re
sizes until it reaches its minimum
size and begin to be cropped (cut), making ui elements disappear. you should test that your toolbar re
sizes gracefully and doesn't force firefox to crop content before it's strictly necessary. when you need something more elaborate than a button in your toolbar, you can use the toolbaritem element instead. this element is nothing more than a wrapper, so you can hav...
...ally matter as long as the contents are 16x16 and they are centered in the frame. mac os x lion has icons with a lighter shade. on linux, icons are 24x24 pixels by default. since firefox is a gtk application, it uses gtk icons whenever possible. the icons in the image are the ones that aren't provided by gtk. gtk icons are accessed using special urls, like this one: moz-icon://stock/gtk-go-back?
size=menu. you can enter this url in firefox on linux, and the corresponding icon will be displayed. this is also the reason this is the only theme that still has colorful icons for its buttons. now let's look at the css work involved in a toolbar that works on the aforementioned systems. if you want your toolbar to look right on all systems, you should consider having different icon sets for each. ...
...on the other hand, it is often the case that there are multiple images and css sheets that are the same for all systems. for example, your extension logo icon will probably be the same. having multiple copies of these files can be wasteful, so you may want to have a "common" directory. image files use the most space in an extension package, by far. most extensions are a few hundred kilobytes in
size or smaller. if your file is getting too big, you should look into optimizing your images. given the way manifest files work, we have found that the best solution is to have a separate package name for os-specific skin files. skin xulschoolhello classic/1.0 skin/all/ skin xulschoolhello-os classic/1.0 skin/unix/ skin xulschoolhello-os classic/1.0 skin/win/ os=winnt skin xulschoolhello-os ...
...And 3 more matches
MMgc - Archive of obsolete content
e a few methods that you may need to call directly, such as alloc and free. gc::alloc, gc::free the alloc and free methods are garbage-collected analogs for malloc and free. memory allocated with alloc doesn't need to be explicitly freed, although it can be freed with free if it is known that there are no other references to it. alloc is often used to allocate arrays and other objects of variable
size that contain gc pointers or are otherwise desirable to have in managed memory. these flags may be passed to alloc to control the allocation type. /** * flags to be passed as second argument to alloc */ enum allocflags { kzero=1, kcontainspointers=2, kfinalize=4, krcobject=8 }; kzero zeros out the memory. otherwise, the memory contains undefined values. kcontainspointers indicates to the ...
...ect is. use of gcroot is required to have gc pointers from unmanaged memory, since without gcroot, those pointers won't be marked by the mark phase of the gc. note that gcroot can be used either by subclassing, or by creating a gcroot and passing it the memory locations to treat as a root: /** subclassing constructor */ gcroot(gc *gc); /** general constructor */ gcroot(gc *gc, const void *object,
size_t
size); allocating objects allocating unmanaged objects is as simple as using global operator new/delete, the same way you always have. to allocate a managed (gc) object, you must use the parameterized form of operator new, and pass it a reference to the mmgc::gc object. class myobject : public mmgc::gcobject { ... }; ... myobject* myobject = new (gc) myobject(); dwb/drc/drcwb there are severa...
...al debugging aids that can be useful in your development work. underwrite/overwrite detection mmgc can often detect when you write outside the boundaries of an object, and will throw an assert in debugging builds when this happens. leak detection (for unmanaged memory) when the application is exiting, mmgc will detect memory leaks in its unmanaged memory allocators and print out the addresses and
sizes of the leaked objects, and stack traces if stack traces are enabled. stack traces are enabled via the mmgc_memory_profiler feature and setting the mmgc_profile environment variable to 1. the mmgc_memory_profiler feature is implied by the debugger feature and is always on in debug builds. deleted object poisoning and write detection mmgc will "poison" memory for deleted objects, and will detect ...
...And 3 more matches
Notes on HTML Reflow - Archive of obsolete content
rom the network, or some script manipulates the dom. an incremental reflow is targeted at a single frame in the frame hierarchy. during an incremental reflow, a frame can assume that none of the constraints computed "from above" (for example, available width) have changed; instead, something "within" the frame has changed, which may have bottom-up impact to the frame hierarchy. re
size, when the containing boundary for the frame hierarchy changes. during a re
size reflow, the frame can assume that none of the frame's internal state (e.g., a text frame's text) has changed; instead, a top-down change in the layout constraints has occurred. stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font si...
... frame's text) has changed; instead, a top-down change in the layout constraints has occurred. stylechange, when the entire frame hierarchy must be traversed to recover from stylistic change; for example, a change in the default font
size. dirty, when a container frame has consolidated several individual incremental reflows that have been targeted at its child frames. ...
... a style change reflow is performed when the presentation shell's global stylistic information is changed; e.g., addition or removal of a style sheet, a change to the shell's default font. a dirty reflow is never performed directly from the presentation shell. ...
...And 3 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
s flag is set if the inline frame has any children that have a percentage value set (via the style context) for the width or height of the content area, padding, border, or margin. nshtmlreflowstate the current state of reflow, built up as reflow recursively descends the frame tree. this is "passed in" to a child frame from its parent, and provides the constraints in which the child frame must
size itself; e.g. the width and height available to the child frame. mcomputedwidth mcomputedheight mcomputedmargin mcomputedborderpadding mcomputedpadding mcomputedoffsets mcomputedminwidth mcomputedmaxwidth mcomputedminheight mcomputedmaxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box. ...
...dborderpadding mcomputedpadding mcomputedoffsets mcomputedminwidth mcomputedmaxwidth mcomputedminheight mcomputedmaxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box. nshtmlreflowmetrics the structure that is "filled in" by a frame during reflow, and is used to communicate the frame's desired
size information back to its container. mmaximumwidth the maximum width that the frame would consume if it were reflowed with an unconstrained available width. it might be better named "preferred width". this is computed when the nsblockreflowstate flag brs_computemaxwidth is set. maxelementwidth the maximum width for elements within the frame that cannot be broken down further; e.g., the longes...
... unconstrained available width. it might be better named "preferred width". this is computed when the nsblockreflowstate flag brs_computemaxwidth is set. maxelementwidth the maximum width for elements within the frame that cannot be broken down further; e.g., the longest word in a paragraph. note that an out-of-flow frame (e.g., a floater) may affect this value. this field is a pointer to an ns
size object. when null, the frame need not compute it. nsblockreflowstate additional reflow state information that the block frame uses along with nshtmlreflowstate. like nshtmlreflowstate, this is read-only data that is passed down from a parent frame to its children. mflags brs_unconstrainedwidth this flag is set in the nsblockreflowstate constructor when: there is no computed width for the...
...And 3 more matches
Browser Feature Detection - Archive of obsolete content
borderbottomwidth true true true borderleftwidth true true true borderwidth true true true clear true true true color true true true display true true true cssfloat true false true font true true true fontfamily true true true font
size true true true fontstyle true true true fontvariant true true true fontweight true true true height true true true letterspacing true true true lineheight true true true liststyle true true true liststyleimage true true true liststylepos...
...nterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true font
sizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth true ie7 only true minheight true true true minwidth true ie7 only true orphan...
... pauseafter true false true pausebefore true false true pitch true false false pitchrange true false true playduring false false false position true true true quotes true false true richness true false false right true true true
size true false true speak true false true speakheader true false false speaknumeral true false false speakpunctuation true false false speechrate true false true stress true false false tablelayout true true true textshadow true false true t...
...And 3 more matches
Square tilemaps implementation: Static maps - Game development
veral atlases — or spritesheets — that contain all of the tile images. this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context. ...
...ritesheets — that contain all of the tile images. this is the atlas we will be using as an example, which features five different tiles: to draw a tile from the atlas into the canvas we make use of the drawimage() method in a canvas 2d context. ...
... you would need to know how many rows and columns there are to be able to compute the source x and y. the tilemap data structure to store that map data, we can use a plain object or a custom class. for the sake of simplicity, in the example code a plain object has been used. it contains the basic map properties: cols: the width of the map, in columns. rows: the height of the map, in rows. t
size: the tile
size, in pixels. tiles: a 1-dimensional array containing the visual grid. gettile(): a helper method that gets the tile index in a certain position. tiles contains the actual visual map data. we are representing the tiles with indices, assigned to the tiles dependant on their position in the atlas (e.g. 0 for the left-most tile.) however, we must account for empty tiles, since they ...
...And 3 more matches
Styling links - Learn web development
sing htmlelement.focus()) — 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...
... example the styles in the first rule will apply to all the subsequent ones, and when a link is being activated, it is also being hovered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. ...
...t.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-
size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437a16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #bae498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #cdfeaa;\n}\n\na:active {\n background: #265301;\n color: #cdf...
...And 3 more matches
Styling lists - Learn web development
eep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the finished styled example on github, and find the source code too.) the css used for the text styling and spacing is as follows: /* general styles */ html { font-family: helvetica, arial, sans-serif; font-
size: 10px; } h2 { font-
size: 2rem; } ul,ol,dl,p { font-
size: 1.5rem; } li, p { line-height: 1.5; } /* description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } the first rule sets a sitewide font and a baseline font
size of 10px. these are inherited by everything on the page. rules 2 and 3 set relative font
sizes for the headings, different list types (th...
... rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. ...
...u set the value to inside, the bullets will sit inside the lines: ol { list-style-type: upper-roman; list-style-position: inside; } using a custom bullet image the list-style-image property allows you to use a custom image for your bullet. the syntax is pretty simple: ul { list-style-image: url(star.svg); } however, this property is a bit limited in terms of controlling the position,
size, etc. of the bullets. you are better off using the background family of properties, which you've learned in the backgrounds and borders article. for now, here's a taster! in our finished example, we have styled the unordered list like so (on top of what you've already seen above): ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.s...
...And 3 more matches
Other form controls - Learn web development
ng other html elements, css, and javascript), because of its nature, it is all rendered as if it was plain text content. (using contenteditable on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the
size of the text area. the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos, and edge 18, yandex 14, firefox 71 and chrome 79 on windows 10. note: you can find a slightly more interesting example of text area usage in the example we put together in the first article of the series (see the source code also). controlling multi-line...
... 2. wrap specifies how the control wraps text. the values are soft (the default value), which means the text submitted is not wrapped but the text rendered by the browser is wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are wrapped, and off, which stops wrapping. controlling textarea resizability the ability to re
size a <textarea> is controlled with the css re
size property. its possible values are: both: the default — allows resizing horizontally and vertically. horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the d...
...orizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the directionality of your text; read handling different text directions if you want to find out more.) play with the interactive example at the top of the re
size reference page for a demonstration of how these work. drop-down controls drop-down controls are a simple way to let users select from many different options without taking up much space in the user interface. html has two forms of drop down content: the select box, and the autocomplete box. in both cases the interaction is the same — once the control is activated, the browser displays a list ...
...And 3 more matches
Styling web forms - Learn web development
m control styling and placement. before we do that however, we'd like to say a few words about specific aspects of form styling that are worth knowing about. fonts and text css font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). however, browser behavior is often inconsistent. ...
... the screenshots below show the difference. ...
...rt for every property related to the css box model, such as width, height, padding, margin, and border. as before, however, browsers rely on the system default styles when displaying these widgets. it's up to you to define how you wish to blend them into your content. if you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent
size. ...
...And 3 more matches
Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your webpage. prerequisites: you should know the basics of html and how to insert an image into your document. objective: learn how to embed an svg (vector) image into a webpage. note: this article doesn't intend to teach you svg; just what it is, and how to add it to web pages. ...
...ly identical images side by side, of a red star with a black drop shadow. the difference is that the left one is a png, and the right one is an svg image. the difference becomes apparent when you zoom in the page — the png image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color). when it is zoomed, each pixel is simply increased in
size to fill multiple pixels on screen, so the image starts to look blocky. the vector image however continues to look nice and crisp, because no matter what
size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger. note: the images above are actually all pngs — with the left-hand star in each case representing a raster imag...
...ed so far: text in vector images remains accessible (which also benefits your seo). svgs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via css or scripted via javascript. so why would anyone want to use raster graphics over svg? well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file
sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are argua...
...And 3 more matches
Mozilla’s UAAG evaluation report
na this relates to multimedia players 2.6 respect synchronization cues. (p1) na this relates to multimedia players 2.7 repair missing content. (p2) p no alt repair strategies in place. reasons: the title attribute is almost never present when the alt isn't. in the rare cases where it is, it is of no help (typically it's just the filename, maybe with a file
size). also, in the overwhelming majority of cases, the filename is unintelligible. developers interested in this problem can look at the getalternatetext() method -- see the cvs history for suggestions. we consider this to be a very difficult problem. 2.8 no repair text. (p3) p we have no repair strategy in 2.7 we have no way to configure that alt="" still needs to be repaired ...
...mozilla has no features for toggling redirects 3.7 toggle images. (p2) p our interface for image toggling needs redesign unfortunately, there are quite a few open bugs on image toggling guideline 4. ensure user control of rendering. checkpoint title status notes/plans checkpoint title status notes/plans 4.1 configure text
size. (p1) c can be changed through preferences, zooming or user style sheet. zooming is really the best solution, because the document retains its look - all font
sizes are increased the same percentage. zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if yo...
...references, zooming or user style sheet. zooming is really the best solution, because the document retains its look - all font
sizes are increased the same percentage. zooming can be controlled via hotkeys ctrl+plus and ctrl+minus the prefs are at preferences, appearances, fonts there is also a hidden pref line that can be added to prefs.js, if you just want to change the minimum font
size for a certain font: user_pref("font.minimum-
size.x-western", newfont
sizeinpoints); for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw 4.2 configure font family. (p1) c can be changed through preferences or user style sheet the prefs are at preferences, appearances, fonts ...
...And 3 more matches
OS.File for the main thread
} else { // some other error throw reason; } } ); example: copy a file by chunks the following snippet writes a (presumably large) buffer by chunks. note that this snippet is useful as a demonstration of complex asynchronous programming with os.file – in most cases, function os.file.writeatomic is a better choice. ...
...and loop. }); }; let promise = loop(0); // enter the loop. ...
... // enter the loop. promise = promise.then(function onsuccess() { // once loop is complete, finalize. ...
...And 3 more matches
NSS tools : signtool
name signtool — digitally sign objects and files. synopsis signtool [-k keyname] -h -h -l -l -m -v -w -g nickname -s
size -b basename [[-c compression level] ] [[-d cert-dir] ] [[-i installer script] ] [[-m metafile] ] [[-x name] ] [[-f filename] ] [[-t|--token tokenname] ] [[-e extension] ] [[-o] ] [[-z] ] [[-x] ] [[--outfile] ] [[--verbose value] ] [[--norecurse] ] [[--leavearc] ] [[-j directory] ] [[-z jarfile] ] [[-o] ] [[-p password] ] [directory-tree] [archive] description the signing tool, signtool, creates digital signatures and uses a java archive (jar) file to associate the signatures with files in a directory. electronic software distribution over any network involves potential security problems. to help address some of these probl...
...n you receive an object-signing certificate for your own use, it is automatically installed in your copy of the communicator client software. communicator supports the public-key cryptography standard known as pkcs #12, which governs key portability. you can, for example, move an object-signing certificate and its associated private key from one computer to another on a credit-card-
sized device called a smart card. options -b basename specifies the base filename for the .rsa and .sf files in the meta-inf directory to conform with the jar format. for example, -b signatures causes the files to be named signatures.rsa and signatures.sf. the default is signtool. -c# specifies the compression level for the -j or -z opt...
...to browser software such as communicator, it behaves like an object-signing ca and cannot be used to sign objects. the -g option is available in netscape signing tool 1.0 and later versions only. by default, it produces only rsa certificates with 1024-byte keys in the internal token. however, you can use the -s option specify the required key
size and the -t option to specify the token. for more information about the use of the -g option, see "generating test object-signing certificates""generating test object-signing certificates" on page 1241. -l lists signing certificates, including issuing cas. if any of your certificates are expired or invalid, the list will so spe...
...And 3 more matches
64-bit Compatibility
this article focuses on hacking tracemonkey code generation (jstracer.cpp, jsregex.cpp) in ways that will work on both 32-bit and 64-bit jit backends. what widths are the random typedefs everywhere? the following types or typedefs are always 64-bit on 64-bit platforms, and 32-bit on 32-bit platforms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably)
size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, js
size, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit platforms. for all intents and purposes they are also 32-bit on 64-bit platforms: intn, uintn jsintn, jsuintn, jsbool general problems with pointers when performing bitwise operations on poin...
...o keep in mind an invariant that bits 63-48 must be sign-extended from bit 47. if you use these bits to squirrel away a payload, they must be adjusted before attempting to dereference the pointer. for more information and platform specific details on virtual address widths, see this article on wikipedia. builtins and calls when passing arguments to lirwriter::inscall(), there are four types: arg
size_f - floating point value arg
size_i - 32-bit integer arg
size_q - 64-bit integer arg
size_p - 32-bit integer on 32-bit platforms, 64-bit integer on 64-bit platforms. remember to use arg
size_p where appropriate - on pointers or natively
sized integers (including jsvals). similarly, when adding types to jsbuiltins.h, remember to use _js_ptr for pointer-width values. lir safety it is not immediatel...
...s should be used for 64-bit safety. if you make a mistake, there's an extremely good chance the sanityfilter in nanojit will catch it while generating code. if this happens you will get an assert that points directly to the ill-typed lir. not all pointer-width values are actually pointers. to avoid equivocating, the rest of this article will use the term "native integers". a native integer is the
size used for intptr_t/uintptr_t, which is usually the width of a general-purpose register on the target cpu. loading and storing native integers the harder cases to detect usually involve runtime value truncation. for example, this code will not load a native integer correctly on a 64-bit machine: struct object { void *data; }; lir->insload(lir_ld, objins, ins->insimm(offsetof(object, data))); l...
...And 3 more matches
JS_malloc
allocate and free memory that is not managed by the garbage collector. syntax void * js_malloc(jscontext *cx,
size_t nbytes); void * js_realloc(jscontext *cx, void *p,
size_t oldbytes,
size_t newbytes); char * js_strdup(jscontext *cx, const char *s); void js_free(jscontext *cx, void *p); name type description cx jscontext * pointer to a js context. if allocation fails, an error is reported in this context. p void * (js_realloc and js_free only) pointer to a previously allocated region of memory to re
size or deallocate. nbytes
size_t (js_malloc and js_realloc only) amount of space, in bytes, to allocate. s const char * (js_strdup only) pointer to a null-terminated string. s must not be null. description js_m...
... p void * (js_realloc and js_free only) pointer to a previously allocated region of memory to re
size or deallocate. nbytes
size_t (js_malloc and js_realloc only) amount of space, in bytes, to allocate. s const char * (js_strdup only) pointer to a null-terminated string. s must not be null. description js_malloc allocates a region of memory nbytes in
size. on success, js_malloc returns a pointer to the beginning of the region. as with the standard c function malloc, memory allocated by js_malloc is uninitialized. js_realloc tries to change the allocation
size of the region of memory at p to nbytes. failing that, js_realloc allocates a new region of
size nbytes and copies as much of the existing data in p as will fit to the new region. then it free...
... in the same runtime. implementation note: currently these four functions are implemented using the corresponding standard c functions. do not make assumptions based on this implementation detail. future releases may implement these functions differently. js_realloc code sample realloc is famously tricky to use correctly. ...
...And 3 more matches
Starting WebLock
/** * returns true if the property with the given name exists. */ boolean has(in string prop); /** * undefines a property. * @return ns_error_failure if a property with that name doesn't * already exist. */ void undefine(in string prop); /** * returns an array of the keys. */ void getkeys(out pruint32 count, [array,
size_is(count), retval] out string keys); }; directory service hierarchy there are two steps involved to find directories or files with the directory service (nsidirectoryservice). you must know the string key (or property) that refers to the location you are interested in, which is published in the file nsdirectoryservicedefs.h that comes with the gecko sdk (for a listing of these locations, see...
...e *, use this result with fread, and close the file pointer. ...
...he file pointer. ...
...And 3 more matches
nsFixedCString
replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members. ...
... operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members. ...
...+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nscstring data members no public members. ...
...And 3 more matches
nsFixedString
replace replaceascii append appendascii appendliteral(const char appendliteral(char operator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members. ...
...erator+= insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members. ...
... insert cut setcapacity setlength truncate getdata getmutabledata setisvoid stripchar base classes nsstring data members no public members. ...
...And 3 more matches
Clone
return values this function returns nsnull if the memory allocation fails. otherwise, it returns a pointer to the newly allocated buffer. ...
... return values this function returns nsnull if the memory allocation fails. otherwise, it returns a pointer to the newly allocated buffer. ...
... return values this function returns nsnull if the memory allocation fails. otherwise, it returns a pointer to the newly allocated buffer. ...
...And 3 more matches
amIWebInstallListener
on displays a confirmation dialog when add-ons are ready to install and uses the observer service to notify when installations are blocked. ...
... methods onwebinstallblocked() called when the websit...
... boolean onwebinstallblocked(in nsidomwindow awindow, in nsiuri auri, [array,
size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); void onwebinstalldisabled(in nsidomwindow awindow, in nsiuri auri, [array,
size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); boolean onwebinstallrequested(in nsidomwindow awindow, in nsiuri auri, [array,
size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindowinternal. methods onwebinstallblocked() called when the website is not allowed to directly prompt the user to install add-ons. ...
...And 3 more matches
mozIStorageBindingParams
is article. last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports you can only create mozistoragebindingparams objects by calling the mozistoragebindingparamsarray.newbindingparams(). ...
... last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsisupports you can only create mozistoragebindingparams objects by calling the mozistoragebindingparamsarray.newbindingparams(). ...
...hunderbird 3.1 / fennec 1.0) inherits from: nsisupports you can only create mozistoragebindingparams objects by calling the mozistoragebindingparamsarray.newbindingparams(). ...
...And 3 more matches
nsIContentViewManager
ameloader object to nsicontentviewmanager. see getting access to content views for details. once you have the view manager, you can call getcontentviewsin() to get a list of the content views for a given portion of the browser display, then use those nsicontentview objects to manipulate the content views. method overview void getcontentviewsin(in float axpx, in float aypx, in float atop
size, in float aright
size, in float abottom
size, in float aleft
size, [optional] out unsigned long alength, [retval, array,
size_is(alength)] out nsicontentview aresult); attributes attribute type description rootcontentview nsicontentview the root content view. read only. methods getcontentviewsin() returns an array of nsicontentview objects representing ...
... point, then four distances to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are relative to the browser element. ...
...nces to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are relative to the browser element. void getcontentviewsin( in float axpx, in float aypx, in float atop
size, in float aright
size, in float abottom
size, in float aleft
size, out unsigned long alength, optional [retval, array,
size_is(alength)] out nsicontentview aresult ); parameters axpx the x coordinate of the anchor point of the rectangle, in css pixels. aypx the y coordinate of the anchor point of the rectangle, in css pixels. atop
size the distance upward from the y anchor to expand the rectangle. arig...
...And 3 more matches
nsIConverterInputStream
/ thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-input-stream;1. to create an instance, use: var converterinputstream = components.classes["@mozilla.org/intl/converter-input-stream;1"] .createinstance(components.interfaces.nsiconverterinputstream); method overview void init(in nsiinputstream astream, in string acharset, in long abuffer
size, in prunichar areplacementchar); constants constant value description default_replacement_character 0xfffd default replacement character value. methods init() initialize this stream. void init( in nsiinputstream astream, in string acharset, in long abuffer
size, in prunichar areplacementchar ); parameters astream the source stream which is read and converted. acharset the char...
...this is currently set to 8192 bytes. areplacementchar any unknown byte sequence will be replaced with this character. ...
...this is currently set to 8192 bytes. areplacementchar any unknown byte sequence will be replaced with this character. the default replacement character is u+fffd. ...
...And 3 more matches
nsILoginManager
astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array,
size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array,
size_is(count)] out wstring hostnames); void getalllogins([optional] out unsigned long count, [retval, array,
size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void modifylogin(in nsilogininfo oldlogin, in ns...
... note: default values for the nsiloginmetainfo properties are created if the specified login doesn't explicitly specify them. ...
...mpt to fill out. return value true if the form was successfully filled out; otherwise false. findlogins() searches for logins matching the specified criteria. called when looking for logins that might be applicable to a given form or authentication request. void findlogins( out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array,
size_is(count)] out nsilogininfo logins ); parameters count the number of elements in the returned array. javascript callers can simply use the array's length property and supply a dummy argument for this parameter. ahostname the hostname to restrict searches to, formatted as a url. for example, "http://www.bar.com". aactionurl for form logins, this parameter should specify the url to which ...
...And 3 more matches
nsIProcess
d by: @mozilla.org/process/util;1. ...
....classes["@mozilla.org/process/util;1"] .createinstance(components.interfaces.nsiprocess); method overview void init(in nsifile executable); void initwithpid(in unsigned long pid); obsolete since gecko 1.9.2 void kill(); void run(in boolean blocking, [array,
size_is(count)] in string args, in unsigned long count); void runasync([array,
size_is(count)] in string args, in unsigned long count, [optional] in nsiobserver observer, [optional] in boolean holdweak); void runw(in boolean blocking, [array,
size_is(count)] in wstring args, in unsigned long count); void runwasync([array,
size_is(count)] in wstring args, in unsigned long count, [optional] in nsiobserver observer, [optional] in boolean holdweak); attri...
...ed. gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method did not work on windows or mac os x. now it does. void kill(); parameters none. run() starts executing the process. gecko 1.9.1 note prior to gecko 1.9.1 (firefox 3.5), this method returned the process id of the newly executing process. it no longer returns a value. void run( in boolean blocking, [array,
size_is(count)] in string args, in unsigned long count ); parameters blocking if true, this method will block until the process terminates; if false, the method returns immediately. args an array of count arguments, using the native character set, to be passed to the executable on its command line. count the number of arguments in the args array. runasync() asynchronously runs the proce...
...And 3 more matches
Network request list - Firefox Developer Tools
request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a re
size icon when you move it over the border of a column. you can drag to manually set the
size of column. starting in firefox 76 you can double-click a column divider to re
size the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that colu...
...ookies associated to the request. this column is hidden by default. this is new in firefox 55. set-cookies: the number of response cookies associated to the request. this column is hidden by default. this is new in firefox 55. transferred: the number of bytes that were actually transferred to load the resource, or a message about why the resource was not transferred. a number value is less than
size if the resource was compressed. if the resource was fetched from a service worker cache, then this cell displays "service worker". cached resources may be fetched from the cache and the network simultaneously, which may improve load time for slow caches. starting with firefox 68, the transferred column lists either "cached (raced)" or "[
size] (raced)" depending on the faster source. this...
... may improve load time for slow caches. starting with firefox 68, the transferred column lists either "cached (raced)" or "[
size] (raced)" depending on the faster source. this feature is called race cache with network (rcwn). if the resource was blocked, the message indicates why it was blocked. for example, "csp", "malware", "cors missing allow origin", "blocked by [name of extension]".
size: the
size of the transferred resource. image thumbnails if the request is for an image, hovering over its filename shows a preview of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra information about the security status of the request: icon meaning https weak https (for exam...
...And 3 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
e source image. dwidth optional the width to draw the image in the destination canvas. this allows scaling of the drawn image. if not specified, the image is not scaled in width when drawn. dheight optional the height to draw the image in the destination canvas. this allows scaling of the drawn image. if not specified, the image is not scaled in height when drawn. exceptions thrown index_
size_err if the canvas or source rectangle width or height is zero. invalid_state_err the image has no image data. type_mismatch_err the specified source element isn't supported. ns_error_not_available the image is not loaded yet. use .complete === true and .onload to determine when it is ready. examples drawing an image to the canvas this example draws an image to the canvas using the draw...
...of 104 and a height of 124. it is drawn to the canvas at (21, 20), where it is given a width of 87 and a height of 104. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); }); result understanding source element
size the drawimage() method uses the source element's intrinsic
size in css pixels when drawing. for example, if you load an image and specify the optional
size parameters in its constructor, you will have to use the naturalwidth and naturalheight properties of the created instance to properly calculate things like crop and scale regions, rather than element.width and element.height. the same goes f...
...ated instance to properly calculate things like crop and scale regions, rather than element.width and element.height. the same goes for videowidth and videoheight if the element is a <video> element, and so on. ...
...And 3 more matches
FileHandle API - Web APIs
ng operation successful'); } writing.onerror = function () { console.log('something goes wrong in the writing process: ' + this.error); } reading it's possible to directly write the content of a lockedfile object without using an intermediate file object and a filereader object. the lockedfile interface provides a readastext method and a readasarraybuffer method. ...
...} reading it's possible to directly write the content of a lockedfile object without using an intermediate file object and a filereader object. the lockedfile interface provides a readastext method and a readasarraybuffer method. those two methods expect a
size to indicate how many bytes must be read starting at the lockedfile.location byte. to read the whole file, it is required to know its
size. this information (as well as the date of its last modification) can be retrieved through the lockedfile.getmetadata() method. ...
...e two methods expect a
size to indicate how many bytes must be read starting at the lockedfile.location byte. to read the whole file, it is required to know its
size. this information (as well as the date of its last modification) can be retrieved through the lockedfile.getmetadata() method. ...
...And 3 more matches
HTMLAudioElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLMediaElement - Web APIs
tion: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLSelectElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLSourceElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLTableElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLTableRowElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLTableSectionElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
HTMLVideoElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 3 more matches
Resource Timing API - Web APIs
me it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc. the interface also includes other properties that provide data about the
size of the fetched resource as well as the type of resource that initiated the fetch. this document provides an overview of the resource timing interfaces. for more details about the interfaces including examples see each interface's reference page, using the resource timing api, and the references in the see also section. for a graphical representation of the resource timing processing model see th...
...timing properties. the redirectstart and redirectend properties return timestamps for redirect start and end times, respectively. likewise, the the domainlookupstart and domainlookupend properties return timestamps for dns lookup start and end times, respectively. this would be a nice place to have a diagram showing the relationships between these segments of the resource loading time. ...
... start and end times, respectively. likewise, the the domainlookupstart and domainlookupend properties return timestamps for dns lookup start and end times, respectively. this would be a nice place to have a diagram showing the relationships between these segments of the resource loading time. resource
size the performanceresourcetiming interface has three properties that can be used to obtain
size data about a resource. ...
...And 3 more matches
SVGAnimateElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGAnimateMotionElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGAnimateTransformElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGDefsElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGFEFuncAElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGFEFuncBElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGFEFuncGElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGFEFuncRElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGForeignObjectElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGGElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGGeometryElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGImageElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGLinearGradientElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGRadialGradientElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGSetElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGSwitchElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGTextContentElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
SVGUseElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 3 more matches
WebGLRenderingContext.getParameter() - Web APIs
eter value to return. see below for possible values. return value depends on the parameter. parameter names webgl 1 you can query the following pname parameters when using a webglrenderingcontext. ...
...ee also frontface. gl.generate_mipmap_hint glenum gl.fastest, gl.nicest or gl.dont_care. see also hint. ...
...e. see also hint. ...
...And 3 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
must be 1, 2, 3, or 4. ...
...must be 1, 2, 3, or 4. ...
... normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float. for types gl.byte and gl.short, normalizes the values to [-1, 1] if true. for types gl.unsigned_byte and gl.unsigned_short, normalizes the values to [0, 1] if true. for types gl.float and gl.half_float, this parameter has no effect. stride a gl
sizei specifying the offset in bytes between the beginning of consecutive vertex attributes. cannot be larger than 255. if stride is 0, the attribute is assumed to be tightly packed, that is, the attributes are not interleaved but each attribute is in a separate block, and the next vertex' attribute follows immediately after the current vertex. offset a glintptr specifying an offset in bytes of the ...
...And 3 more matches
Using WebRTC data channels - Web APIs
el() is used to trigger negotiation, to create a remote channel with the same id as the local channel. doing this lets you create data channels with each peer using different properties, and to create channels declaratively by simply using the same value for id. buffering webrtc data channels support buffering of outbound data. this is handled automatically. while there's no way to control the
size of the buffer, you can learn how much data is currently buffered, and you can choose to be notified by an event when the buffer starts to run low on queued data. this makes it easy to write efficient routines that make sure there's always data ready to send without over-using memory or swamping the channel completely. <<<write more about using bufferedamount, bufferedamountlowthreshold, onbuffer...
...you can choose to be notified by an event when the buffer starts to run low on queued data. this makes it easy to write efficient routines that make sure there's always data ready to send without over-using memory or swamping the channel completely. <<<write more about using bufferedamount, bufferedamountlowthreshold, onbufferedamountlow, and bufferedamountlow here>>> ... understanding message
size limits for any data being transmitted over a network, there are
size restrictions. at a fundamental level, the individual network packets can't be larger than a certain value (the exact number depends on the network and the transport layer being used). at the application level—that is, within the user agent's implementation of webrtc on which your code is running—the webrtc implementation im...
...tions. at a fundamental level, the individual network packets can't be larger than a certain value (the exact number depends on the network and the transport layer being used). at the application level—that is, within the user agent's implementation of webrtc on which your code is running—the webrtc implementation implements features to support messages that are larger than the maximum packet
size on the network's transport layer. this can complicate things, since you don't necessarily know what the
size limits are for various user agents, and how they respond when a larger message is sent or received. even when user agents share the same underlying library for handling stream control transmission protocol (sctp) data, there can still be variations due to how the library is used. for exam...
...And 3 more matches
Visualizations with Web Audio API - Web APIs
(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's output to another node for it to work, as long as the input is connected to the source, either directly or via another node. the analyser node will then capture audio data using a fast fourier transform (fft) in a certain frequency domain, depending on what you specify as the analysernode.fft
size property value (if no value is specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant. read those pages to get more information on how to use them. to capture data, you need to use th...
...pecified array, so you need to create a new array to receive the data before invoking one. the first one produces 32-bit floating point numbers, and the second and third ones produce 8-bit unsigned integers, therefore a standard javascript array won't do — you need to use a float32array or uint8array array, depending on what data you are handling. ...
...vascript array won't do — you need to use a float32array or uint8array array, depending on what data you are handling. so for example, say we are dealing with an fft
size of 2048. we return the analysernode.frequencybincount value, which is half the fft, then call uint8array() with the frequencybincount as its length argument — this is how many data points we will be collecting, for that fft
size. analyser.fft
size = 2048; var bufferlength = analyser.frequencybincount; var dataarray = new uint8array(bufferlength); to actually retrieve the data and copy it into our array, we then call the data collection method we want, with the array passed as it's argument. for example: analyser.getbytetimedomaindata(dataarray); we now have the audio data for that moment in time captured in our array,...
...And 3 more matches
Window.devicePixelRatio - Web APIs
in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. ...
...in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. ...
...in simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single css pixel. ...
...And 3 more matches
Window.open() - Web APIs
ame can be used as the target for the target attribute of <a> or <form> elements. the name should not contain whitespace. keep in mind that this will not be used as the window's title. windowfeatures optional a domstring containing a comma-separated list of window features given with their corresponding values in the form "name=value". these features include options such as the window's default
size and position, whether or not to include toolbar, and so forth. there must be no whitespace in the string. see window features below for documentation of each of the features that can be specified. return value a windowproxy object, which is basically a thin wrapper for the window object representing the newly created window, and has all its features available. if the window couldn't be opened,...
...the features. if windowname does not specify an existing window and the windowfeatures parameter is not provided (or if the windowfeatures parameter is an empty string), then the new secondary window will render the default toolbars of the main window. tip: note that in some browsers, users can override the windowfeatures settings and enable (or prevent the disabling of) features position and
size features windowfeatures parameter can specify the position and
size of the new window. note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. left or screenx specifies the distance the new window is placed from the left side of the work area for applications of the user's ...
...ordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. an offset is universally implemented by browser manufacturers (it is 29 pixels in ie6 sp2 with the default theme) and its purpose is to help users to notice new windows opening. if the most recently used window was maximized, then there is no offset: the new window will be maximized as well.
size if only one of them is specified, the behavior is implementation-dependent, and web author should not rely on it. width or innerwidth specifies the width of the content area, viewing area of the new secondary window in pixels. the width value includes the width of the vertical scrollbar if present. the width value does not include the sidebar if it is expanded. the minimum required value i...
...And 3 more matches
Window - Web APIs
hese are documented in the javascript reference and the dom reference. in a tabbed browser, each tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as re
sizeto() and innerheight. generally, anything that can't reasonably pertain to a tab pertains to the window instead. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectra...
... domparser domparser can parse xml or html source stored in a string into a dom document. domparser is specified in dom parsing and serial...
...nt dialog to print the current document. window.prompt() returns the text entered by the user in a prompt dialog. window.requestanimationframe() tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. window.requestidlecallback() enables the scheduling of tasks during a browser's idle periods. window.re
sizeby() re
sizes the current window by a certain amount. window.re
sizeto() dynamically re
sizes window. window.scroll() scrolls the window to a particular place in the document. window.scrollby() scrolls the document in the window by the given amount. window.scrollbylines() scrolls the document by the given number of lines. window.scrollbypages() scrolls the current document by the speci...
...And 3 more matches
Perceivable - Accessibility
trast (aa) the color contrast between background and foreground content should be at a minimum level to ensure legibility: text and its background should have a contrast ratio of at least 4.5:1. heading (or just larger) text should have a ratio of at least 3:1. larger text is defined as at least 18pt, or 14pt bold. see color and color contrast. 1.4.4 re
size text (aa) the page should be readable and usable when the text
size is doubled. this means that designs should be responsive, so that when the text
size is increased, the content is still accessible. 1.4.5 images of text (aa) images should not be used to present content where text would do the job. for example, if an image is mostly textual, it could be represented using text a...
... 1.4.8 visual presentation (aaa) for text content presentation, the following should be true: foreground and background colors should be user-selectable. text blocks should be no wider than 80 characters (or glyphs), for maximum readability. text should not be fully justified (e.g., text-align: justify;). line height should be at least 1.5 times the text
size within paragraphs (e.g., line-height: 1.5;), and at least 2.25 times the text
size between paragraphs (e.g., padding: 2.25rem;). when the text
size is doubled, the content should not need to be scrolled. 1.4.9 images of text (no exception) (aaa) text should not be presented as part of an image unless it is purely decoration (i.e., it does not convey any content) or c...
...anding reflow 1.4.11 non-text contrast(aa) added in 2.1 minimum color contrast ratio of 3:1 for user interface components and graphical objects. ...
...And 3 more matches
Basic concepts of flexbox - CSS: Cascading Style Sheets
tems. as with all properties in css, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way. items display in a row (the flex-direction property's default is row). the items start from the start edge of the main axis. the items do not stretch on the main dimension, but can shrink. the items will stretch to fill the
size of the cross axis. the flex-basis property is set to auto. the flex-wrap property is set to nowrap. the result of this is that your items will all line up in a row, using the
size of the content as their
size in the main axis. if there are more items than can fit in the container, they will not wrap but will instead overflow. if some items are taller than others, all items will stretch along ...
... you can see in the live example below how this looks. try editing the items or adding additional items in order to test the initial behavior of flexbox. ...
...ilable 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 the leftover space between the items. this is what the flex properties that we apply to the items themselves, will do. the flex-basis property the flex-basis is what defines the
size of that item in terms of the space it leaves as available space. the initial value of this property is auto — in this case the browser looks to see if the items have a
size. in the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis. if the items don’t have a
size then the content's
size is used as the flex-basis. this is why when we just declare ...
...And 3 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
of the css grid layout level 1 specification. the features shown in this overview will then be explained in greater detail in the rest of this guide. what is a grid? a grid is a set of intersecting horizontal and vertical lines defining columns and rows. elements can be placed onto the grid within these column and row lines. css grid layout has the following features: fixed and flexible track
sizes you can create a grid with fixed track
sizes – using pixels for example. this sets the grid to the specified pixel which fits to the layout you desire. you can also create a grid using flexible
sizes with percentages or with the new fr unit designed for this purpose. item placement you can place items into a precise location on the grid using line numbers, names or by targeting an area of t...
...rid tracks we define rows and columns on our grid with the grid-template-columns and grid-template-rows properties. these define grid tracks. a grid track is the space between any two lines on the grid. in the below image you can see a track highlighted – this is the first row track in our grid. i can add to our earlier example by adding the grid-template-columns property, then defining the
size of the column tracks. i have now created a grid with three 200-pixel-wide column tracks. the child items will be laid out on this grid one in each grid cell. <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { ...
...-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks. the available space is split into four. two parts are given to the first track and one part each to the next two tracks. .wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } in this final example, we mix absolute
sized tracks with fraction units. the first track is 500 pixels, so the fixed width is taken away from the available space. the remaining space is divided into three and assigned in proportion to the two flexible tracks. .wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } track listings with repeat() notation large grids with many tracks can use the repeat() notation, to repeat a...
...And 3 more matches
CSS reference - CSS: Cascading Style Sheets
nimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotationannotation()attr()b::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-
size<basic-shape>::before (:before)bleed (@page)<blend-mode>block-
sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusb...
...nter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-
sizefont-
size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)format()fr<frequency><frequency-percentage>...
...columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-
sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()...
...And 3 more matches
all - CSS: Cascading Style Sheets
d valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum dolor sit amet, consectetur adipiscing elit. </blockquote> phasellus eget velit sagittis. ...
... ipsum dolor sit amet, consectetur adipiscing elit. </blockquote> phasellus eget velit sagittis. css body { font-
size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis. body { font-
size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } the <blockquote> uses the browser's default styling together with a specific background and text color. it also behaves as a block element: the text that follows it is beneath it. all:unset <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasel...
...lor:blue; } blockquote { background-color: skyblue; color: red; } the <blockquote> uses the browser's default styling together with a specific background and text color. it also behaves as a block element: the text that follows it is beneath it. all:unset <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis. body { font-
size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } the <blockquote> doesn't use the browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), but its font-
size is still small (inherited value) and its color is blue (inherited value). all:initial <b...
...And 3 more matches
border-image-slice - CSS: Cascading Style Sheets
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 slicing process creates nine regions in total: four corners, four edges, and a middle region. four slice lines, set a given distance from their respective sides, control the
size of the regions. the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. these are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element. zone 9 is the middle region. it is discarded by default, but is ...
...sured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. for vector images, the number is relative to the element's
size, not the
size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's
size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height...
... the
size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's
size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height are
sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal table elements when border-collapse is collapse. ...
...And 3 more matches
repeat() - CSS: Cascading Style Sheets
ed-repeat> values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length. ...
...x [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) syntax values <length> a positive integer length. <percentage> a non-negative percentage relative to the inline
size of the grid container in column grid tracks, and the block
size of the grid container in row grid tracks. if the
size of the grid container depends on the
size of its tracks, then the <percentage> must be treated as auto. the user-agent may adjust the intrinsic
size contributions of the track to the
size of the grid container and increase the final
size of the track by the minimum amount that would result in honoring the percentage. <flex> a non-negative di...
...r depends on the
size of its tracks, then the <percentage> must be treated as auto. the user-agent may adjust the intrinsic
size contributions of the track to the
size of the grid container and increase the final
size of the track by the minimum amount that would result in honoring the percentage. <flex> a non-negative dimension with the unit fr specifying the track’s flex factor. each <flex>-
sized track takes a share of the remaining space in proportion to its flex factor. max-content represents the largest max-content contribution of the grid items occupying the grid track. min-content represents the largest min-content contribution of the grid items occupying the grid track. auto as a maximum, identical to max-content. ...
...And 3 more matches
text-transform - CSS: Cascading Style Sheets
ansform: lowercase). the language is defined by the lang html attribute or the xml:lang xml attribute. note: support for language-specific cases varies between browsers, so check the browser compatibility table. syntax /* keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-
size-kana; /* global values */ text-transform: inherit; text-transform: initial; text-transform: unset; capitalize is a keyword that converts the first letter of each word to uppercase. other characters remain unchanged (they retain their original case as written in the element's text). a letter is defined as a character that is part of unicode's letter or number general categories ; thus, an...
...ts all characters to uppercase. lowercase is a keyword that converts all characters to lowercase. none is a keyword that prevents the case of all characters from being changed. full-width is a keyword that forces the writing of a character — mainly ideograms and latin scripts — inside a square, allowing them to be aligned in the usual east asian scripts (like chinese or japanese). full-
size-kana generally used for <ruby> annotation text, the keyword converts all small kana characters to the equivalent full-
size kana, to compensate for legibility issues at the small font
sizes typically used in ruby. accessibility concerns large sections of text set with a text-transform value of uppercase may be difficult for people with cognitive concerns such as dyslexia to read. mdn unders...
...cult for people with cognitive concerns such as dyslexia to read. mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1 formal definition initial valuenoneapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | capitalize | uppercase | lowercase | full-width | full-
size-kana examples none <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transform: none; } strong { float: right; } this demonstrates no text transformation. capitalize (general) <p>initial string <s...
...And 3 more matches
<input type="password"> - HTML: Hypertext Markup Language
e to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small
size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards. note: any forms involving sensitive information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events chang...
... like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and
size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an empty string (""). if the requi...
...this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the password field has no maximum length. this value must also be greater than or equal to the value of minlength. ...
...And 3 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
see from our link types reference, there are many different kinds of relationship. there are a number of other common types you'll come across. for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile platforms, e.g.: <link rel="apple-touch-icon-precomposed"
sizes="114x114" href="apple-icon-114.png" type="image/png"> the
sizes attribute indicates the icon
size, while the type contains the mime type of the resource being linked. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media conditi...
...r's path. unsafe-url means that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel this attribute names a relationship of the linked document to the current document. the attribute must be a space-separated list of link type values. ...
...the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe because it can leak origins and paths from tls-protected resources to insecure origins. rel this attribute names a relationship of the linked document to the current document. the attribute must be a space-separated list of link type values. ...
...And 3 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
erver when that option is selected. if no value attribute is included, the value defaults to the text contained inside the element. you can include a selected attribute on an <option> element to make it selected by default when the page first loads. the <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and
size to specify how many options should be shown at once. it also accepts most of the general form input attributes such as required, disabled, autofocus, etc. you can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown. for further examples, see the native form widgets: drop-down content. attributes this element includes the global at...
...t multiple options can be selected in the list. if it is not specified, then only one option can be selected at a time. when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. name this attribute is used to specify the name of the control. required a boolean attribute indicating that an option with a non-empty string value must be selected. ...
...non-empty string value must be selected.
size if the control is presented as a scrolling list box (e.g. when multiple is specified), this attribute represents the number of rows in the list that should be visible at one time. browsers are not required to present a select element as a scrolled list box. the default value is 0. note: according to the html5 specification, the default value for
size should be 1; however, in practice, this has been found to break some web sites, and no other browser currently does that, so mozilla has opted to continue to return 0 for the time being with firefox. usage notes selecting multiple options on a desktop computer, there are a number of ways to select multiple options in a <select> element with a multiple attribute: mouse users can hold the ct...
...And 3 more matches
Using Feature Policy - HTTP
re name> <allowlist of origin(s)> for example, to block all content from using the geolocation api across your site: feature-policy: geolocation 'none' several features can be controlled at the same time by sending the http header with a semicolon-separated list of policy directives, or by sending a separate header for each policy. for example, the following are equivalent: feature-policy: un
sized-media 'none'; geolocation 'self' https://example.com; camera *; feature-policy: un
sized-media 'none' feature-policy: geolocation 'self' https://example.com feature-policy: camera *; the iframe allow attribute the second way to use feature policy is for controlling content within an iframe. use the allow attribute to specify a policy list for embedded content. for example, allow all browsing...
...the user experience over time. you can use feature policies to specify the desired best practices, and rely on the browser to enforce the policies to prevent regressions. there are several policy-controlled features designed to represent functionality that can negatively impact the user experience. these features include: layout-inducing animations unoptimized (poorly compressed) images over
sized images synchronous scripts synchronous xmlhttprequest un
sized media to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. that is, the default allowlist is '*' for each feature. preventing the use of the sub-optimal functionality requires explicitly specifying a policy that disables the features. for...
...when applying a policy to existing content, testing is likely required to verify it continues to work as expected. this is especially important for embedded or third-party content that you do not control. to turn on the enforcement of all the best practices, specify the policy as below. ...
...And 3 more matches
MathML attribute reference - MathML
this is an alphabetical list of mathml attributes. more details for each attribute are available on particular element pages. notes: the mathml <mstyle> and <math> elements accept all attributes of all mathml presentation elements. see values for notes on values and units in mathml. the attributes background, color, fontfamily, font
size, fontstyle, fontweight and xlink:href are deprecated. the xlink attributes on mathml elements: xlink:actuate, xlink:href, xlink:show and xlink:type are deprecated as well. name elements accepting 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 th...
...f space before the operator (see length for values and units). lquote <ms> the opening quote character (depends on dir) to enclose the content. the default value is """. mathbackground all the background color. you can use #rgb, #rrggbb and html color names. mathcolor all the text color. you can use #rgb, #rrggbb and html color names. math
size <mi>, <mn>, <mo>, <ms>, <mtext> the
size of the content. mathvariant <mi>, <mn>, <mo>, <ms>, <mtext> the logical class of the identifier, which varies in typography. max
size <mo> the maximum
size of the operator. unimplemented minlabelspacing <mtable> a length value specifing the minimum space between a label and the adjacent cell in the row. ...
... movablelimits <mo> specifies whether attached under- and overscripts move to sub- and superscript positions. notation <menclose> a list of notations, separated by white space, to apply to the child elements. numalign <mfrac> the alignment of the numerator over the fraction. ...
...And 3 more matches
Critical rendering path - Web Performance
th includes the document object model (dom), css object model (cssom), render tree and layout. the document object model is created as the html is parsed. the html may request javascript, which may, in turn, alter the dom. the html includes or makes requests for styles, which in turn builds the css object model. the browser engine combines the two to create the render tree. layout determines the
size and location of everything on the page. once layout is determined, pixels are painted to the screen. optimizing the critical rendering path improves the time to first render. understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure performant user interactions and avoid jank. understanding crp web perform...
...ml is halted until the imported asset is handled. the browser continues to parse the html making requests and building the dom, until it gets to the end, at which point it constructs the css object model. with the dom and cssom complete, the browser builds the render tree, computing the styles for all the visible content. after the render tree is complete, layout occurs, defining the location and
size of all the render tree elements. once complete, the page is rendered, or 'painted' on the screen. document object model dom construction is incremental. the html response turns into tokens which turns into nodes which turn into the dom tree. a single dom node starts with a starttag token and ends with an endtag token. nodes contain all relevant information about the html element. the informatio...
...hich css rules are attached. the render tree only captures visible content. the head section (generally) doesn't contain any visible information, and is therefore not included in the render tree. if there's a display: none; set on an element, neither it, nor any of its descendants, are in the render tree. layout once the render tree is built, layout becomes possible. layout is dependent on the
size of screen. the layout step determines where and how the elements are positioned on the page, determining the width and height of each element, and where they are in relation to each other. what is the width of an element? block level elements, by definition, have a default width of 100% of the width of their parent. an element with a width of 50%, will be half of the width of its parent. unless ...
...And 3 more matches
Mobile first - Progressive web apps (PWAs)
ormation is loaded on top of that, whenever appropriate. this means that mobiles (often the target devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for different viewport
sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first. this way, mobile devices don't have to load assets and other information twice. if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on v...
... it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first. this way, mobile devices don't have to load assets and other information twice. if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport
size, feature support, etc., you should just load the very basics that pretty much all browsers will need first, then progressively enhance browsers higher up the food chain. note: starting with very little and working up as the need arises usually makes more sense than starting with everything and then covering up things if they aren't needed! mobile constraints we have already mentioned the fa...
...therefore, as well as splitting content into different views, and simplifying the interface and content on each view of your application for mobile as much as possible, it is also a good idea to not include visual effects such as shadows, animations, and gradients. you should at least consider it as an option, especially if you are experiencing slow or laggy performance when your appli...
...And 3 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
iles: a base file (bulk of formatting) a file for finance/table formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font
sizes (small, large, larger) how much did the
size of a typical wired news page shrink? the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb. we've noted that some of the file
size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design using html, tables, and spacer gifs to a new design much richer in imagery a...
...sured the flexibility we needed if certain modules and pieces of content appeared or disappeared. when you get to that point, the amount of markup you have to sift through to find anything becomes ridiculous. until this redesign, wired news wasn't even using css to style the content inside tables. the sheer amount [sic] of redundant <font> tags inside every cell was probably enough to double file
size. my initial attempts at the markup and css for the wired news design eliminated the majority of our tables, but left one master table to control the primary columns of each page. that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the browser window. that wasn't good enough. around that time, i started discovering great sites...
... start in the same vertical position. to be fair, i did note two disadvantages of positioning. when one or more columns is positioned absolutely, there is no way to ensure a footer would always appear at the bottom of the longest column. we ended up confining the footer to the width of the center column to avoid any possible overlap. the other disadvantage comes into play at small browser window
sizes. while floats automatically reconfigure if they don't fit within the window width, absolute positioned columns always remain in the same place, even if it means content in one column begins to overlap another column. both of these put together weren't enough to dissuade me from the advantages of positioning over floats. how does the new design perform when the pages are printed? we have one cs...
...And 2 more matches
Creating a Web based tone generator - Archive of obsolete content
to write those samples produced in the audio stream. in order to always have samples to play, a buffer of 500 ms is created. the function mozcurrentsampleoffset() is used to know the position of the samples being played so that we can fill a 500 ms buffer of audio samples. <!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <input type="text"
size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output. var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var p...
..."freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio output. var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffer
size = samplerate / 2; // buffer 500ms var tail = null; // the function called with regular interval to populate // the audio output buffer. setinterval(function() { var written; // check if some data was not written in previous attempts. if(tail) { written = audio.mozwriteaudio(tail); currentwriteposition += writte...
... { // not all the data was written, saving the tail... tail = tail.subarray(written); return; // ... and exit the function. } tail = null; } // check if we need add some data to the audio output. var currentposition = audio.mozcurrentsampleoffset(); var available = currentposition + prebuffer
size - currentwriteposition; if(available > 0) { // request some sound data from the callback function. var sounddata = new float32array(parsefloat(available)); readfn(sounddata); // writing the data. written = audio.mozwriteaudio(sounddata); if(written < sounddata.length) { // not all the data was written...
...And 2 more matches
Layout System Overview - Archive of obsolete content
ons. the original design of the layout system allowed for multiple, possibly different, presentations to be supported simultaneously from the same content model. in other words, the same html or xml document could be viewed as a normal galley presentation in a browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthe
sizer. to date the only real use of this multiple presentation ability is seen in printing, where multiple presentations are managed, all connected to the same content model. (note: it is unclear if this is really a benefit - it may have been better to use a copy of the content model for each presentation, and to remove the complexity of managing separate presentations - analysis is needed here). the ...
...tually, it is possible and supported by the architecture. how layout does its job: frames and reflow so, layout is concerned with providing a presentation, in galley or paged mode. given a content model, how does the layout system actually create the presentation? through the creation and management of frames. frames are an encapsulation of a region on the screen, a region that contains geometry (
size and location, stacking order). generally frames correspond to the content elements, though there is often a one-to-many correspondence between content elements and frames. layout creates frames for content based on either the specific html rules for an element or based on the css display type of the element. in the case of the html-specific elements, the frame types that correspond to the element...
...me to create (block, inline, table, etc.). the style context is associated with the frame via a reference because it is needed for many other computations during the formatting of the frames. once a frame is created for a content element, it must be formatted. we refer to this as 'laying out' the frame, or as 'reflowing' the frame. each frame implements a reflow method to compute its position and
size, among other things. for more details on the reflow mechanism, see the reflow overview document... the css formatting requirements present two distinct layout models: 1) the in-flow model, where the geometry of an element is influenced by the geometry of the elements that precede it, and 2) the positioned model, where the geometry of an element is not influenced by the geometry of the elements th...
...And 2 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
ar. styling the button most toolbar buttons have icons. to attach an image to the button we use standard mozilla skinning facilities. if you're unfamiliar with how that works, read the skinning section of jonah bishop's excellent toolbar tutorial. although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here. ...
... have icons. to attach an image to the button we use standard mozilla skinning facilities. if you're unfamiliar with how that works, read the skinning section of jonah bishop's excellent toolbar tutorial. although the article covers creating an entire toolbar, rather than just a button, it has a great explanation of the techniques we'll use here. icon
size toolbar buttons can have two different
sizes -- big and small. ...
...ion of the techniques we'll use here. icon
size toolbar buttons can have two different
sizes -- big and small. this means you'll need to provide two icons for each of your toolbar buttons. ...
...And 2 more matches
Adding more elements - Archive of obsolete content
« previousnext » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file
size and date. ...
... » we will conclude the discussion of boxes by adding some boxes to the find files dialog. adding elements to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file
size and date. ...
...s"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been given an explicit width of 10 pixels each. you will notice that if the window is re
sized, the textbox grows but the other components do not. you will also notice that the label was removed. if you re
size the window vertically, the elements do not change
size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal box...
...And 2 more matches
Features of a Window - Archive of obsolete content
dfile", "chrome"); specifying the width and height you should have noticed that whenever elements were added to a window, the window's width expanded to fit the new elements. the window is really just a box which is flexible and defaults to vertical orientation. you can also specify the width and height directly on the window tag. this, of course, causes the window to be displayed in a specific
size. if you leave it out, the
size is determined by the elements that are in it. gecko 1.9.2 note starting in gecko 1.9.2 (firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. that means the next time the window is opened, it will still open in the saved location. <window id="findfile-window" titl...
... feature. that means the next time the window is opened, it will still open in the saved location. <window id="findfile-window" title="find files" width="400" height="450" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels. even if there aren't enough elements to fit this
size, the window will still open at this
size and there will be blank space in the remaining area. if there are too many elements, the window will not be large enough to fit the elements. the user will have to re
size the dialog. you have to be careful when specifying a width and height that the window is not too small or too big. you should also consider that a user might be using a different theme or...
... other window features the flags below can be passed as part of the third argument to the window.open function. ...
...And 2 more matches
menu - Archive of obsolete content
tes | properties | methods | related ] an element, much like a button, that is placed on a menubar. when the user clicks the menu element, the child menupopup of the menu will be displayed. this element is also used to create submenus. more information is available in the xul tutorial. ...
...t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled,...
...pcially, the theme will use this to highlight the item. a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive event will be sent to the item when the selection moves away. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed.
sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the
sizetopopup attribute is left out or set to none, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. otherwise, the menu will
size itself to at least the
size of the popup. if the menu has a maximum...
...And 2 more matches
menulist - Archive of obsolete content
on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox. if the text does not match any of the items in the...
...sent if the menu is closed. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. readonly type: boolean if set to true, then the user cannot change the value of the element. however, the value may still be modified by a script.
sizetopopup type: one of the values below indicates how the menu width and the menupopup width are determined. if the
sizetopopup attribute is left out or set to none, the menu will be its preferred width and the popup may extend outside of this width, unaffected by the maximum width of the menu itself. otherwise, the menu will
size itself to at least the
size of the popup. if the menu has a maximum...
...And 2 more matches
window - Archive of obsolete content
ko 1.9.2, you can detect when a window is activated or deactivated by watching for the "activate" and "deactivate" events. see window activation events. more information is available in the xul tutorial. ...
...oolean true if the window supports lightweight themes, otherwise false. lightweightthemesfooter type: id specifies the id of an element to which a lightweight theme's footer image will be applied. screenx type: integer the horizontal position at which the window appears on the screen. screeny type: integer the vertical position at which the window appears on the screen.
sizemode type: one of the values below the state of the window. it can have one of the following values: maximized the window is maximized, and occupies the full
size of the screen. normal the window appears in a normal state at the desired
size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide t...
... type: one of the values below the state of the window. it can have one of the following values: maximized the window is maximized, and occupies the full
size of the screen. normal the window appears in a normal state at the desired
size. this attribute is used to save and restore the state of a window (together with the persist attribute) and for css styles (e.g. to hide the re
sizer grippy on maximized windows). note: when a window is minimized, the
sizemode attribute is not updated. this is done so that if a window is closed while minimized, its persisted
sizemode attribute wouldn't be minimized. setting this attribute does not change the window state. use window.maximize(), window.restore(), or window.minimize() to change the window state. to get the window state from ...
...And 2 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
summary: when in quirks mode, gecko-based browsers will appear to ignore inheritance of font styles into tables from parent elements. find out why this happens and how to fix it in documents that have to remain in quirks mode. in version 4 browsers such as netscape navigator 4.x and internet explorer 4.x, tables generally "broke" the inheritance of font styling. if the author had set a font
size on the body element, for example, the font
size of text within a table would match the user's default, not the body style. this led to a number of workarounds which were designed to cater to these bugs, and also to gecko-based browsers emulating the behavior in some cases. fortunately, the behavior can be overcome in all cases with a single css2 rule. tables and inheritance in css terms, tables are ...
...cases. fortunately, the behavior can be overcome in all cases with a single css2 rule. tables and inheritance in css terms, tables are like any other element when it comes to inheritance. if a css property can be inherited, then table elements and their components (tr, td, etc.) should inherit just as any other element would. for example, if an author writes: <style type="text/css"> body {font-
size: 11px;} </style> ...then the text inside table cells should also be 11 pixels in
size. browsers from the version-four era, however, treated tables differently. in these browsers, a table's text would be the same
size as the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules, and led many authors to cre...
...to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family. ...
...And 2 more matches
Mobile accessibility - Learn web development
he main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download
sizes, and think about the provision of images for high-resolution screens. summary of screenreader testing on android and ios the most common mobile platforms have fully functional screen readers. these function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations. let's look at the main two: talkback on android and voic...
...d touch events together — see multi-control-box-drag.html (see the example live also). note: you can also see fully functional examples showing how to implement different control mechanisms at implementing game control mechanisms. responsive design responsive design is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen
size and resolution, so they are usable and accessible to users of different device types. in particular, the most common problems that need to be addressed for mobile are: suitability of layouts for mobile devices. a multi-column layout won't work as well on a narrow screen, for example, and the text
size may need to be increased so it is legible. such issues can be solved by creating a responsiv...
...in general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. ...
...And 2 more matches
Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern browsers can help you to find out what is going on. ...
... and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem. the following video provides some useful tips on debugging css using the firefox devtools: editing values in addition to turning properties on and off, you can edit their values. perhaps you want to see if another color looks better, or wish to tweak the
size of something? devtools can save you a lot of time editing a stylesheet and reloading the page. with box1 selected, click on the swatch (the small colored circle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. a...
...ircle) that shows the color applied to the border. a color picker will open up and you can try out some different colors; these will update in real time on the page. in a similar fashion, you could change the width or style of the border. adding a new property you can add properties using the devtools. perhaps you have realised that you don't want your box to inherit the <body> element's font
size, and want to set its own specific
size? you can try this out in devtools before adding it to your css file. you can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and devtools will show you an autocomplete list of matching properties. after selecting font-
size, enter the value you want to try. you can al...
...And 2 more matches
Flexbox - Learn web development
t. in this case we want to lay out the <article> elements, so we set this on the <section>: section { display: flex; } this causes the <section> element to become a flex container, and its children to become flex items. the result of this should be something like so: so, this single declaration gives us everything we need — incredible, right? we have our multiple column layout with equal
sized columns, and the columns are all the same height. this is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this. to be clear, let's reiterate what is happening here. the element we've given a display value of flex to is acting like a block-level element in terms of how it interacts with the rest of the page, but it...
...u refresh, you'll see that the third <article> takes up twice as much of the available width as the other two — there are now four proportion units available in total (since 1 + 1 + 2 = 4). the first two flex items have one unit each so they take 1/4 of the available space each. the third one has two units, so it takes up 2/4 of the available space (or one-half). you can also specify a minimum
size value inside the flex value. try updating your existing article rules like so: article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the spa...
...; } article:nth-of-type(3) { flex: 2 200px; } this basically states "each flex item will first be given 200px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out. the real value of flexbox can be seen in its flexibility/responsiveness — if you re
size the browser window, or add another <article> element, the layout continues to work just fine. flex: shorthand versus longhand flex is a shorthand property that can specify up to three different values: the unitless proportion value we discussed above. this can be specified individually using the flex-grow longhand property. a second unitless proportion value — flex-shrink — that comes i...
...And 2 more matches
Legacy layout methods - Learn web development
all seems! this knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. it is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that css grid layout creates a grid. they work by giving items a
size, and pushing them around to line them up in a way that looks like a grid. a two column layout let's start with the simplest possible example — a two column layout. you can follow along by creating a new index.html file on your computer, filling it with a simple html template, and inserting the below code into it at the appropriate places. at the bottom of the section you can see a live exampl...
...try adjusting the width of your browser window to see for yourself. this is a valuable tool for responsive web design. note: you can see this example running at 0_two-column-layout.html (see also the source code). creating simple legacy grid frameworks the majority of legacy frameworks use the behavior of the floa...
...try adjusting the width of your browser window to see for yourself. ...
...And 2 more matches
create fancy boxes - Learn web development
we will always work on the most simple piece of html possible, a simple element: <div class="fancy">hi! i want to be fancy.</div> ok, that's a very small bit of html, what can we tweak on that element? all of the following: its box model properties: width, height, padding, border, etc. its background properties: background, background-color, background-image, background-position, background-
size, etc. its pseudo-element: ::before and ::after and some aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/...
... aside properties like: box-shadow, transform, outline, etc. so we have a very large playground. let the fun begin. box model tweak the box model alone allows us to do some basic stuff, like adding simple borders, making squares, etc.. it starts to get interesting when you push the properties to the limit by having negative padding and/or- margin by having border-radius larger than the actual
size of the box. making circles <div class="fancy">hi! i want to be fancy.</div> this is something that is both very simple and very fun. the border-radius property is made to create a rounded corner applied to 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; /...
... is an empty string */ content: ''; /* we positionnate our pseudo-elements on the left and right sides of the box, but always at the bottom */ position: absolute; bottom : 0; /* this makes sure our pseudo-elements will be below the box content whatever happens. ...
...And 2 more matches
Client-side form validation - Learn web development
maxlength attributes. a field is invalid if it has a value and that value has fewer characters than the minlength value or more than the maxlength value. browsers often don't let the user type a longer value than expected into text fields. a better user experience than just using maxlength is to also provide character count feedback in an accessible manner and let them edit their content down to
size. an example of this is the character limit seen on twitter when tweeting. javascript, including solutions using maxlength, can be used to provide this constraining the values of your entries for number fields (i.e. <input type="number">), the min and max attributes can be used to provide a range of valid values. if the field contains a value outside this range, it will be invalid. let's look a...
.... ...
...e; appearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-
size: 90%; box-sizing: border-box; } /* this is our style for the invalid fields */ input:invalid{ border-color: #900; background-color: #fdd; } input:focus:invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-
size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } now lets look at the javascript that implements the custom error validation. // there are many ways to pick a dom node; here we get the form itself and the email // input box, as well as the span element into which we will place the error message. const...
...And 2 more matches
UI pseudo-classes - Learn web development
ch as a label or icon, but don't want it to be picked up by assistive technologies. ...
...ldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <span> has a width of 0 so can sit on the same line as the input. now onto the generated content. ...
...ious example to provide out-of-range messages for the numeric inputs, as well as saying whether they are required. ...
...And 2 more matches
CSS basics - Learn web development
next, delete the existing rule you have in your style.css file. it was a good test, but let's not continue with lots of red text. add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?. the property font-family refers to the font(s) you want to use for text. ...
...d text. add the following lines (shown below), replacing the font-family assignment with your font-family selection from what will your website look like?. the property font-family refers to the font(s) you want to use for text. this rule defines a global base font and font
size for the whole page. since <html> is the parent element of the whole page, all elements inside it inherit the same font-
size and font-family. html { font-
size: 10px; /* px means "pixels": the base font
size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes abo...
... px means "pixels": the base font
size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font
sizes for elements that will have text inside the html body (<h1>, <li>, and <p>). we'll also center the heading. finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable. ...
...And 2 more matches
Multimedia: video - Learn web development
ing images. this article looks at optimizing video to improve web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the various video formats, their impact on performance, and how to reduce video impact on overall page load time while serving the smallest video file
size based on each browsers file type support. why optimize your multimedia? for the average website, 25% of bandwidth comes from video. optimizing video has the potential for very large bandwidth savings that translate into better website performance. optimizing video delivery it's best to compress all video, optimize <source> order, set autoplay, remove audio from muted video, optimize vid...
...o. the sections below describe each of these optimization techniques. compress all videos most video compression work compares adjacent frames within a video, with the intent of removing detail that is identical in both frames. compress the video and export to multiple video formats, including webm, mpeg-4/h.264, and ogg/theora. your video editing software probably has a feature to reduce file
size. if not, there are online tools, such as ffmpeg (discussed in section below), that encode, decode, convert, and perform other optimization functions. optimize <source> order order video source from smallest to largest. for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" contr...
...ferring download for less popular videos. setting preload="none" results in none of the video being downloaded until playback. it delays startup, but offers significant data savings for videos with a low probability of playback. offering more modest bandwidth savings, setting preload="metadata" may download up to 3% of the video on page load. ...
...And 2 more matches
PR_Writev
if it is, the function will fail and the error will be set to pr_buffer_overflow_error. ...
...if it is, the function will fail and the error will be set to pr_buffer_overflow_error. ...
...if it is, the function will fail and the error will be set to pr_buffer_overflow_error. ...
...And 2 more matches
NSS 3.19.1 release notes
patch release includes a fix for the recently published logjam attack. notable changes in nss 3.19.1 nss reports the bit length of keys more accurately. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. this affects the key strength values that are reported by ssl_getchannelinfo. ...
... 3.19.1 nss reports the bit length of keys more accurately. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. this affects the key strength values that are reported by ssl_getchannelinfo. ...
...tely. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. this affects the key strength values that are reported by ssl_getchannelinfo. ...
...And 2 more matches
NSS API Guidelines
he form layer_body(), where layer is an all caps prefix for what layer the macro lives in, and body is english words, all in upper case, separated by underscores. for example: layer_upper_case_english_words() or der_convert_bit_string(). structure members for exposed data structures should have the form capitalizedenglishwords (the first letter uncapitalized). for example: pk11rsagenparamsstr.key
sizeinbits for members of enums, our current api has no standard (typedefs for enums should follow the data types standard). there seem to be three reasonable options: enum members have the same standard as exposed data structure members. enum members have the same standard as data types. enum members have the same standard as public macros (minus the '()' of course). options 2 and 3...
...glishwords or seckeyprivatekey. opaque data structures there are many data structures in the security library whose definition is effectively private, to the portion of the security library that defines and operates on those data structures. external code does not have access to these definitions. the goal here is to increase the opaqueness of these structures. this will allow us to modify the
size, definition, and format of these data structures in future releases, without interfering with the operation of existing applications that use the security library. the first task is to ensure the data structure definition lives in a private header file, while its declaration lives in the public. the current standard in the security library is to typedef the data structure name, the easiest way t...
..., should be added to the api. there can be legitimate exceptions to this 'make everything opaque' rule. for example, in container structures, such as secitem, or maybe linked list data structures. these data structures need to be examined on a case by case basis, to determine if they are truly stable and will not change in future release it is necessary for the callers of the api to know the
size of these structures, as they may allocate new ones and pass them down. memory allocation with arenas this section discusses memory allocation using arenas. nss code uses arenas, and this section explains some of the improvements we are making. nss makes use of traditional memory allocation functions, wrapping nspr's pr_alloc in a util function called port_alloc. though nss makes further use o...
...And 2 more matches
NSS Sample Code sample2
on. for * des ops, internal slot is typically the best slot */ if (slot == null) { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); goto out; } /* nss passes blobs around as secitems. these contain a pointer to * data and a length. turn the raw key into a secitem. */ keyitem.type = sibuffer; keyitem.data = gkey; keyitem.len =
sizeof(gkey); /* turn the raw key into a key object. we use pk11_originunwrap * to indicate the key was unwrapped - which is what should be done * normally anyway - using raw keys isn't a good idea */ symkey = pk11_importsymkey(slot, ciphermech, pk11_originunwrap, cka_encrypt, &keyitem, null); if (symkey == null) { fprintf(stderr, "failure to import key ...
...); if (symkey == null) { fprintf(stderr, "failure to import key into nss (err %d)\n", pr_geterror()); goto out; } /* set up the pkcs11 encryption paramters. ...
...*/ /* section and after this section needs to be done only once */ /* encrypt data into buf1. ...
...And 2 more matches
NSS Sample Code sample3
h does not * require a nss database to exist */ nss_nodb_init("."); /* get a slot to use for the crypto operations */ slot = pk11_getinternalkeyslot(); if (!slot) { cout << "getinternalkeyslot failed" << endl; status = 1; goto done; } /* * part 1 - simple hashing */ cout << "part 1 -- simple hashing" << endl; /* initialize data */ memset(data, 0xbc,
sizeof data); /* create a context for hashing (digesting) */ context = pk11_createdigestcontext(sec_oid_md5); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data,
sizeof data); if (s != secsuccess) { cout << "digestupdate faile...
...pk11_createdigestcontext(sec_oid_md5); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestop(context, data,
sizeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len,
sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 2 - hashing with included secret key */ cout << "part 2 -- hashing with included secret key" << endl; /* initialize data */ memset(data, 0xbc,
sizeof data); /* create a key */...
... pk11_createcontextbysymkey(ckm_md5, cka_digest, key, &noparams); if (!context) { cout << "createdigestcontext failed" << endl; goto done; } s = pk11_digestbegin(context); if (s != secsuccess) { cout << "digestbegin failed" << endl; goto done; } s = pk11_digestkey(context, key); if (s != secsuccess) { cout << "digestkey failed" << endl; goto done; } s = pk11_digestop(context, data,
sizeof data); if (s != secsuccess) { cout << "digestupdate failed" << endl; goto done; } s = pk11_digestfinal(context, digest, &len,
sizeof digest); if (s != secsuccess) { cout << "digestfinal failed" << endl; goto done; } /* print digest */ printdigest(digest, len); pk11_destroycontext(context, pr_true); context = 0; /* * part 3 - mac (with secret key) */ cout << "part 3 ...
...And 2 more matches
NSS tools : certutil
al · filename: full path to a file containing an encoded extension -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g key
size set a key
size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 16384 bits. the default is 2048 bits. any
size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal ...
...tead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified file to generate a new private and public key pair. this argument makes it possible to use hardware-generated seed values or manually create a value from the keyboard. the minimum file
size is 20 bytes. -0 sso_password set a site security officer password on a token. -1 | --keyusage keyword,keyword set a netscape certificate type extension in the certificate. there are several available keywords: + digital signature + nonrepudiation + keyencipherment + dataencipherment + keyagreemen...
... a certificate request contains most or all of the information that is used to generate the final certificate. this request is submitted separately to a certificate authority and is then approved by some mechanism (automatically or by human review). once the request is approved, then the certificate is generated. ...
...And 2 more matches
certutil
check a certificate's signature during the process of validating a certificate. -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g key
size set a key
size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 8192 bits. the default is 1024 bits. any
size between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slo...
...y for the database, instead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified file to generate a new private and public key pair. this argument makes it possible to use hardware-generated seed values or manually create a value from the keyboard. the minimum file
size is 20 bytes. -0 sso_password set a site security officer password on a token. -1 | --keyusage keyword,keyword set a netscape certificate type extension in the certificate. there are several available keywords: o digital signature o nonrepudiation o keyencipherment o dataencipherment ...
...uest a certificate request contains most or all of the information that is used to generate the final certificate. this request is submitted separately to a certificate authority and is then approved by some mechanism (automatically or by human review). once the request is approved, then the certificate is generated. ...
...And 2 more matches
Index
jsapi reference, reference, référence(2), spidermonkey js::autovaluearray<n> holds a rooted array of js::value. this is typically used for local variables being passed to function which requires js::handlevaluearray or a pointer to js::value array. 26 js::autovectorrooter jsapi reference, reference, référence(2), spidermonkey js::autovectorrooter<t> holds a variable-
size rooted array of type t. 27 js::booleanvalue jsapi reference, reference, référence(2), spidermonkey js::booleanvalue converts a c boolean of type bool to js::value, the type of javascript values. 28 js::call jsapi reference, reference, spidermonkey js::call calls a specified function, fun, on an object, thisobj. in terms of function execution, the object...
... specified javascript str to a c string (an array of 8-bit chars). 252 js_encodestringtobuffer jsapi reference, reference, référence(2), spidermonkey js_encodestringtobuffer converts the specified javascript str to a c string (an array of 8-bit chars) and fills the specified buffer with up to length bytes of the string. it returns the length of the whole string encoding or (
size_t)-1 if the string can't be encoded as bytes. if the returned value is greater than the length you specified, the string was truncated. 253 js_entercompartment jsapi reference, spidermonkey no summary! 254 js_entercrosscompartmentcall jsapi reference, obsolete, spidermonkey no summary! 255 js_enterlocalrootscope jsapi reference, obsolete, s...
...y to translate a series of native c/c++ values to jsvals with a single function call. 429 js_putescapedstring jsapi reference, reference, référence(2), spidermonkey js_putescapedstring and js_putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless
size is 0. returns the length of the written output, not including the nul. thus, a return value of
size or more means that the output was truncated. if buffer is null, just returns the length of the output. if quote is not 0, it must be a single or double quote character that will quote the output. 430 js_remove*root jsapi reference, obsolete, spidermonkey js_removeroot removes t...
...And 2 more matches
JS::Compile
ers features introduced in spidermonkey 17 compile a script for execution. ...
...readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes,
size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars,
size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext ...
... js::mutablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes,
size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars,
size_t length, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, file *file, js::mutablehandlescript scrip...
...And 2 more matches
JS::DeflateStringToUTF8Buffer
this article covers features introduced in spidermonkey 38 encode the given string as utf8 into given buffer. ...
... this article covers features introduced in spidermonkey 38 encode the given string as utf8 into given buffer. ...
... description js::deflatestringtoutf8buffer encodes src as utf8. the caller must either ensure dst has enough space to encode the entire string, or pass the length of the buffer as dstlenp. ...
...And 2 more matches
JS::Evaluate
tures introduced in spidermonkey 17 compile and execute a script. ...
...eadonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars,
size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes,
size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars,
size_t length, js::mutablehandlevalue rval); //...
...rcbuf, js::mutablehandlevalue rval); // obsolete since jsapi 39 bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, js::sourcebufferholder &srcbuf, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char16_t *chars,
size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *bytes,
size_t length, js::mutablehandlevalue rval); bool js::evaluate(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlevalue ...
...And 2 more matches
JS_CompileScript
compiles a script for execution. ...
... compiles a script for execution. ...
...mpileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, const char16_t *chars,
size_t length, const js::compileoptions &options, js::mutablehandlescript script); // obsolete since jsapi 39 bool js_compilescript(jscontext *cx, js::handleobject obj, const char *ascii,
size_t length, const js::compileoptions &options, js::mutablehandlescript script); bool js_compileucscript(jscontext *cx, js::handleobject obj, const char16_t *chars,
size_t length, const js::compileoptions &options, js::mutablehandlescript script); name type description cx jscontex...
...And 2 more matches
JS_DefineProperty
value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineproperty(jscontext *cx, js::handleobject obj, const char *name, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::handlevalue value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucp...
...rs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::handleobject value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::handlestring value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(...
...igned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, int32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, uint32_t value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); // ---- added in spidermonkey 45 -...
...And 2 more matches
JS_NewContext
this is a memory management tuning parameter which most users should not adjust. 8192 is a good default value. description js_newcontext creates a new jscontext in the runtime rt. on success, it returns a pointer to the new context. otherwise it returns null. ...
...this is a memory management tuning parameter which most users should not adjust. 8192 is a good default value. description js_newcontext creates a new jscontext in the runtime rt. on success, it returns a pointer to the new context. otherwise it returns null. ...
...this is a memory management tuning parameter which most users should not adjust. 8192 is a good default value. description js_newcontext creates a new jscontext in the runtime rt. on success, it returns a pointer to the new context. otherwise it returns null. ...
...And 2 more matches
Gecko events
ndent_changed the active descendant of a component has changed. the active descendant is used in objects with transient children. is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or
size. is supported: no event_name_change an object's name property has changed. is supported: yes targets: table_cell - the cell of <xul:tree/>, any accessible for html element when @title or @alt attribute is changed. event_description_change an object's description property has changed. is supported: no event_value_change an object's value property has changed. is supported: yes event_help_c...
... is supported: yes event_menu_end a menu from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. ...
...u from the menu bar has been closed. is supported: yes event_menupopup_start a pop-up menu has been displayed. is supported: yes event_menupopup_end a pop-up menu has been closed. is supported: yes event_capture_start a window has received mouse capture. is supported: no event_capture_end a window has lost mouse capture. is supported: no event_move
size_start a window is being moved or re
sized. ...
...And 2 more matches
Mozilla internal string guide
ring. ...
... < len - 1) memmove(cur + 4, cur + 1, (len - 1 - pos) *
sizeof(char16_t)); // fill the tab with spaces *cur = char16_t(' '); *(cur + 1) = char16_t(' '); *(cur + 2) = char16_t(' '); *(cur + 3) = char16_t(' '); pos += 4; cur += 4; } } } if a string buffer becomes smaller while writing it, use setlength to inform the string class of the new
size: /** * remove every tab character from `data` */ void removetabs(nsastring& data) { int len = data.length(); char16_t* cur = data.beginwriting(); char16_t* end = data.endwriting(); while (cur < end) { if (char16_t('\t') == *cur) { len -= 1; end -= 1; if (cur < end) memmove(cur, cur + 1, (end - cur) *
sizeof(char16_t)); } else { cur += 1; } ...
...e the string longer, call setlength() before beginwriting() or use the bulkwrite() api described below. bulk write bulkwrite() allows capacity-aware cache-friendly low-level writes to the string's buffer. capacity-aware means that the caller is made aware of how the caller-requested buffer capacity was rounded up to mozjemalloc buckets. this is useful when initially requesting best-case buffer
size without yet knowing the true
size need. if the data that actually needs to be written is larger than the best-case estimate but still fits within the rounded-up capacity, there is no need to reallocate despite requesting the best-case capacity. cache-friendly means that the zero terminator for c compatibility is written after the new content of the string has been written, so the result is a for...
...And 2 more matches
mozIStorageConnection
storageasyncstatement createasyncstatement(in autf8string asqlstatement); void createfunction(in autf8string afunctionname, in long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); void createtable(in string atablename, in string atableschema); mozistoragependingstatement executeasync([array,
size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void preload(); obsolete since gecko 1.9 void removefunction(in autf8string afunctionname); mozistora...
.... constants transaction execution time constants. constant value description transaction_deferred 0 no database lock is obtained until the first statement is run. transaction_immediate 1 a reserved lock is obtained on the database. transaction_exclusive 2 an exclusive lock is obtained on the database. sqlite database page
size constant constant value description default_page_
size 32768 the default
size for sqlite database pages. this is used by the storage api when creating new databases, and must match the sqlite_default_page_
size configured in db/sqlite3/src/makefile.in. methods asyncclose() asynchronously closes a database connection, allowing all pending asynchronous stateme...
...le already exists or the requested table couldn't be created. executeasync() asynchronously executes an array of queries created with this connection, using any currently bound parameters. the statements are run wrapped in a transaction. note: the statements may be reused immediately, and the statements do not need to be reset individually. mozistoragependingstatement executeasync( [array,
size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, in mozistoragestatementcallback acallback optional ); parameters astatements the array of statements to execute asynchronously. they will be executed sequentially, in the order in which they appear in the array. prior to gecko 2.0 this was type mozistoragestatement. anumstatements the number ...
...And 2 more matches
nsIAccessibleEvent
vent_active_decendent_changed 0x0007 0x0004 the active descendant of a component has changed. the active descendant is used in objects with transient children. event_focus 0x8005 0x0008 0x0005 an object has received the keyboard focus. event_state_change 0x800a 0x0009 0x0006 an object's state has changed. event_location_change 0x800b 0x000a 0x0007 an object has changed location, shape, or
size. event_name_change 0x800c 0x000b 0x0008 an object's name property has changed. event_description_change 0x000c 0x0009 an object's description property has changed. event_value_change 0x800e 0x000d 0x000a an object's value property has changed. event_help_change 0x000e 0x000b an object's help has changed. event_defaction_change 0x000f 0x000c an object's default action has changed. ...
...nu bar has been selected. event_menu_end 0x0019 0x0016 a menu from the menu bar has been closed. event_menupopup_start 0x001a 0x0017 a pop-up menu has been displayed. event_menupopup_end 0x001b 0x0018 a pop-up menu has been closed. event_capture_start 0x001c 0x0019 a window has received mouse capture. event_capture_end 0x001d 0x001a a window has lost mouse capture. event_move
size_start 0x001e 0x001b a window is being moved or re
sized. event_move
size_end 0x001f 0x001c the movement or resizing of a window has finished. event_contexthelp_start 0x0020 0x001d a window has entered context-sensitive help mode. event_contexthelp_end 0x0021 0x001e a window has exited context-sensitive help mode. event_dragdrop_start 0x0022 0x001f an application is about to enter ...
... event_hyperlink_number_of_anchors_changed 0x0052 0x004e the number of anchors associated with this hyperlink object has changed. event_hyperlink_selected_link_changed 0x0053 0x004f the hyperlink selected stat...
...And 2 more matches
nsIBrowserSearchService
void addengine(in astring engineurl, in long datatype, in astring iconurl, in boolean confirm, [optional] in nsisearchinstallcallback callback); void addenginewithdetails(in astring name, in astring iconurl, in astring alias, in astring description, in astring method, in astring url); void getdefaultengines([optional] out unsigned long enginecount, [retval, array,
size_is(enginecount)] out nsisearchengine engines); nsisearchengine getenginebyalias(in astring alias); nsisearchengine getenginebyname(in astring aenginename); void getengines([optional] out unsigned long enginecount, [retval, array,
size_is(enginecount)] out nsisearchengine engines); void getvisibleengines([optional] out unsigned long e...
...rchengine engines); nsisearchengine getenginebyalias(in astring alias); nsisearchengine getenginebyname(in astring aenginename); void getengines([optional] out unsigned long enginecount, [retval, array,
size_is(enginecount)] out nsisearchengine engines); void getvisibleengines([optional] out unsigned long enginecount, [retval, array,
size_is(enginecount)] out nsisearchengine engines); void init([optional] in nsibrowsersearchinitobserver observer); void moveengine(in nsisearchengine engine, in long newindex); void removeengine(in nsisearchengine engine); void restoredefaultengines(); attributes attribute type description ...
...st be a case insensitive value of either "get" or "post". url the url to which search queries should be sent. must not be null. getdefaultengines() returns an array of all default search engines. this includes all loaded engines that aren't in the user's profile directory (ns_app_user_search_dir). void getdefaultengines( [optional] out unsigned long enginecount, [retval, array,
size_is(enginecount)] out nsisearchengine engines ); parameters enginecount the number of default search engines. engines an array of the default nsisearchengines. getenginebyalias() returns an engine with the specified alias. nsisearchengine getenginebyalias( in astring alias ); parameters alias the search engine's alias. return value an nsisearchengi...
...And 2 more matches
nsIFaviconService
e: var faviconservice = components.classes["@mozilla.org/browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,
size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdataurl(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri); boolean isf...
...); boolean isfailedfavicon(in nsiuri afaviconuri); void removefailedfavicon(in nsiuri afaviconuri); void setandloadfaviconforpage(in nsiuri apageuri, in nsiuri afaviconuri, in boolean aforcereload, in unsigned long afaviconloadtype, [optional] in nsifavicondatacallback acallback); obsolete since gecko 22.0 void setfavicondata(in nsiuri afaviconuri, [const,array,
size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, in prtime aexpiration); obsolete since gecko 22.0 void setfavicondatafromdataurl(in nsiuri afaviconuri, in astring adataurl, in prtime aexpiration); obsolete since gecko 22.0 void setfaviconurlforpage(in nsiuri apageuri, in nsiuri afaviconuri); obsolete since gecko 22.0 attributes ...
...async api moziasyncfavicons.getfavicondataforpage() instead. this method retrieves the given favicon data. throws an exception if we don't have data. if there is no data but we have an entry for this favicon, adatalen will be "0" and adata will be null. void getfavicondata( in nsiuri afaviconuri, out autf8string amimetype, out unsigned long adatalen, optional from gecko 2.0 [array,retval,
size_is(adatalen)] out octet adata ); parameters afaviconuri uri of the favicon whose data is being read. amimetype output parameter where the mime type will be placed. adatalen output parameter where the
size of the binary data will be placed. adata output parameter where the binary favicon data will be placed. this will be null if we have this uri but have no data a...
...And 2 more matches
nsIHttpActivityObserver
terface provides a way for http transport activities to be reported to observers. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextra
sizedata, in acstring aextrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false. if this is false, the observeactivity() method should not be called. read only. note: this attribute is present only for compatibility and should not be used. constants activity type constants constant value...
...tion_close 0x5006 the http transaction has been closed. methods observeactivity() called when activity occurs on the http transport. you should implement this method to perform whatever tasks you wish to perform when http activity occurs. void observeactivity( in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextra
sizedata, in acstring aextrastringdata ); parameters ahttpchannel the nsihttpchannel on which the activity occurred. aactivitytype the type of activity that occurred; this will be one of the values specified in activity type constants. aactivitysubtype the subtype that further narrows the type of activity that occurred. if the activity type is activity_type_socket_transport, this value will be one...
...ty type is activity_type_socket_transport, this value will be one of the status_* constants defined by nsisockettransport. if the activity type is activity_type_http_transaction, this will be one of the constants specified in activity subtype constants above. atimestamp the time at which the activity occurred, specified as microseconds elapsed since the epoch of midnight on january 1, 1970. aextra
sizedata any additional
size data available with this activity. see interpreting activity data below. aextrastringdata any additional string data available with this activity. see interpreting activity data below. interpreting activity data depending on the values of the aactivitytype and aactivitysubtype fields, the aextra
sizedata and aextrastringdata parameters take on different meanings. socket tr...
...And 2 more matches
nsIMimeConverter
the nsimimeconverter service allows you to convert headers into and out of mime format. inherits from: nsisupports implemented by: @mozilla.org/messenger/mimeconverter;1. ...
...erits from: nsisupports implemented by: @mozilla.org/messenger/mimeconverter;1. ...
...this should only be used by native code, as xpconnect translation causes it to not work properly. string encodemimepartiistr(in string header, in boolean structured, in string mailcharset, ...
...And 2 more matches
nsITransport
e an event sink associated with it. the event sink receives transport-specific events as the transfer is occurring. for a socket transport, these events can include status about the connection. see nsisockettransport for more info about socket transport specifics. method overview void close(in nsresult areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegment
size, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegment
size, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtarget aeventtarget); constants open flags. constant value description open_blocking 1<<0 open flags. open_unbuffered 1<<1 generic nsitransporteventsink status cod...
...ransport). constant value description status_reading 0x804b0008 status_writing 0x804b0009 methods close() close the transport and any open streams. void close( in nsresult areason ); parameters areason the reason for closing the stream. openinputstream() open an input stream on this transport. nsiinputstream openinputstream( in unsigned long aflags, in unsigned long asegment
size, in unsigned long asegmentcount ); parameters aflags optional transport specific flags. flags have the following meaning: open_blocking if specified, then the resulting stream will have blocking stream semantics. this means that if the stream has no data and is not closed, then reading from it will block the calling thread until at least one byte is available or until the stream is closed. if...
...returns ns_base_stream_would_block. in addition, in non-blocking mode, the stream is guaranteed to support nsiasyncinputstream. this interface allows the consumer of the stream to be notified when the stream can again be read. open_unbuffered if specified, the resulting stream may not support readsegments. readsegments is only guaranteed to be implemented when this flag is not specified. asegment
size if open_unbuffered is not set, then this parameter specifies the
size of each buffer segment (pass 0 to use default value). asegmentcount if open_unbuffered is not set, then this parameter specifies the maximum number of buffer segments (pass 0 to use default value). return value openoutputstream() open an output stream on this transport. nsioutputstream openoutputstream( in unsigned long afl...
...And 2 more matches
Using C struct and pointers
in this example, we show how to use c structs and pointers with js-ctypes. ...
... in this example, we show how to use c structs and pointers with js-ctypes. ...
...cture like this: struct st_t { void *self; char *str;
size_t buff_
size; int i; float f; char c; }; we can use it in javascript by writing something like this: var st_t = new ctypes.structtype("st_t", [ { "self": ctypes.pointertype(ctypes.void_t) }, { "str": ctypes.pointertype(ctypes.char) }, { "buff_
size": ctypes.
size_t }, { "i": ctypes.int }, { "f": ctypes.float }, { "c": ctypes.char } ]); here we are using the structtype() factory method of the ctypes object to create a ctype object that represents the c struct named st_t. the first parameter of this method is the name of the type, which corresponds to the name of the c s...
...And 2 more matches
ArrayType
of the elements or variable which is going to be present in an array length optional it denotes the number of entries present in an array or the number of elements that an array should contain. if you don't specify this parameter, the array's length is unspecified. return value a ctype represents the newly declared array type. exceptions thrown typeerror type is not a ctype, or type.
size is undefined.if the length is specifed but if it is not a valid one,then it is also thrown rangeerror the
size of the resulting array can't be represented as both a
size_t and as a javascript number. properties property type description elementtype ctype the data type of the elements in an array type. read only. length number the number of elemen...
...name of the corresponding c type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only. ...
... type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only.
size number the
size of the type, in bytes. ...
...And 2 more matches
Aggregate view - Firefox Developer Tools
pied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. the "total bytes" column shows you the number of bytes occupied by objects in each category, and that number as a percentage of the whole heap
size for that tab. the screenshots in this section are taken from a snapshot of the monster example page. for example, in the screenshot above, you can see that: there are four array objects that account for 15% of the total heap. next to the type's name, there's an icon that contains three stars arranged in a triangle: click this to see every instance of that type. for example, the entr...
... objects that account for 15% of the total heap. next to the type's name, there's an icon that contains three stars arranged in a triangle: click this to see every instance of that type. for example, the entry for array tells us that there are four array objects in the snapshot. if we click the star-triangle, we'll see all four array instances: for each instance, you can see the retained
size and shallow
size of that instance. in this case, you can see that the first three arrays have a fairly large shallow
size (5% of the total heap usage) and a much larger retained
size (26% of the total). on the right-hand side is a pane that just says "select an item to view its retaining paths". if you select an item, you'll see the retaining paths panel for that item: call stack the cal...
...you'll see the retaining paths panel for that item: call stack the call stack shows you exactly where in your code you are making heap allocations. because tracing allocations has a runtime cost, it must be explicitly enabled by checking "record call stacks" before you allocate the memory in the snapshot. you'll then see a list of all the functions that allocated objects, ordered by the
size of the allocations they made: the structure of this view is very much like the structure of the call tree, only it shows allocations rather than processor samples. so, for example, the first entry says that: 4,832,592 bytes, comprising 93% of the total heap usage, were allocated in a function at line 35 of "alloc.js", or in functions called by that function we can use the disclosure tri...
...And 2 more matches
Web Console remoting - Firefox Developer Tools
the new network event actor stores further request and response information. the networkeventupdate packet the web console ui needs to be kept up-to-date when changes happen, when new stuff is added. the new networkeventupdate packet is sent for this purpose. ...
...t is sent for this purpose. ...
... "requestcookies", "cookies": 0 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "requestpostdata", "data
size": 1024, "discardrequestbody": false }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsestart", "response": { "httpversion": "http/1.1", "status": "304", "statustext": "not modified", "headers
size": 194, "discardresponsebody": true } }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "eventtimings", "totaltime": 1 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responseheaders", "headers": 6, "headers
size": 194 }, { "from": "conn0.netevent14", "type": "networkeventupdate", "updatetype": "responsecookies",...
...And 2 more matches
AnalyserNode - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke=...
..." fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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" st...
...l="#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,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object. properties inherits properties from its parent, audionode. analysernode.fft
size is an unsi...
...And 2 more matches
BaseAudioContext.createScriptProcessor() - Web APIs
the createscriptprocessor() method of the baseaudiocontext interface creates a scriptprocessornode used for direct audio processing. note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode). ...
...seaudiocontext interface creates a scriptprocessornode used for direct audio processing. note: as of the august 29 2014 web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode). syntax var scriptprocessor = audioctx.createscriptprocessor(buffer
size, numberofinputchannels, numberofoutputchannels); parameters buffer
size the buffer
size in units of sample-frames. if specified, the buffer
size must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. if it's not passed in, or if the value is 0, then the implementation will choose the best buffer
size for the given environment, which will be a constant power of 2 throughout the lifetime of the node. this value controls how frequently the audiop...
...: 256, 512, 1024, 2048, 4096, 8192, 16384. if it's not passed in, or if the value is 0, then the implementation will choose the best buffer
size for the given environment, which will be a constant power of 2 throughout the lifetime of the node. this value controls how frequently the audioprocess event is dispatched and how many sample-frames need to be processed each call. lower values for buffer
size will result in a lower (better) latency. higher values will be necessary to avoid audio breakup and glitches. it is recommended for authors to not specify this buffer
size and allow the implementation to pick a good buffer
size to balance between latency and audio quality. numberofinputchannels integer specifying the number of channels for this node's input, defaults to 2. values of up to 32 ar...
...And 2 more matches
CDATASection - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#...
...ce" 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,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#fff" stroke="#d...
...And 2 more matches
Document - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#d4d...
...depending on the document's type (e.g. html, xml, svg, …), a larger api is available: h...
...And 2 more matches
HTMLAnchorElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLAreaElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLBRElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLBaseElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLButtonElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLCanvasElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLDListElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLDataElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLDataListElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLDivElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLEmbedElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLFieldSetElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLFormElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLHeadElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLHeadingElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLHtmlElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLIFrameElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLImageElement.src - Web APIs
the htmlimageelement property src, which reflects the html src attribute, specifies the image to display in the <img> element. syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the browser selects the best match for the viewport
size and display pixel density, the src attribute is a usvstring specifying the url of the desired image. this can be set either within the html itself using the src content attribute, or programmatically by setting the element's src property. if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't ...
...l itself using the src content attribute, or programmatically by setting the element's src property. if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset. ...
... different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for browsers that don't support srcset. as an equivalent for specifying an image in srcset with the
size multiplier 1x; that is, the image specified by src is used on low-density screens (such as typical 72 dpi or 96 dpi displays). additionally, if you use src along with both
sizes (or the corresponding
sizes content attribute) and srcset in order to choose an image based on the viewport
size, the src attribute is only used as a fallback for browsers that don't support
sizes and srcset; otherwise, it's not used at all. examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefru...
...And 2 more matches
HTMLLIElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLLabelElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLLegendElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMapElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMediaElement.onencrypted - Web APIs
; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMenuElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMenuItemElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMetaElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLMeterElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLModElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLOListElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLObjectElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLOptGroupElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLOptionElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLOutputElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLParagraphElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLParamElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLPictureElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLPreElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLProgressElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLQuoteElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLScriptElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLShadowElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLSpanElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLStyleElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTableCaptionElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTableCellElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTableColElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTemplateElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTextAreaElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTimeElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTitleElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLTrackElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLUListElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
HTMLUnknownElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="...
...And 2 more matches
PerformanceResourceTiming - Web APIs
resource, such as an xmlhttprequest, <svg>, image, or script. the interface's properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, 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. <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:h...
...h: 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/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="5...
... properties this interface extends the following performanceentry properties for resource performance entry types by...
...And 2 more matches
SVGAnimationElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGClipPathElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGComponentTransferFunctionElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGCursorElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGDescElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGElement - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke...
...And 2 more matches
SVGFEBlendElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEColorMatrixElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEComponentTransferElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFECompositeElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEConvolveMatrixElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEDiffuseLightingElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEDisplacementMapElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEDistantLightElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEDropShadowElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEFloodElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEGaussianBlurElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEImageElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEMergeElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEMergeNodeElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEMorphologyElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEOffsetElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFEPointLightElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFESpecularLightingElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFESpotLightElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFETileElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFETurbulenceElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGFilterElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGGradientElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGGraphicsElement - Web APIs
tion: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGMPathElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGMaskElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGMetadataElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGPatternElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGScriptElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGStopElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGStyleElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGSymbolElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
SVGTitleElement - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#...
...And 2 more matches
Streams API concepts - Web APIs
t, pause, or cancel access to the stream. examples include video streams and tcp/web sockets. pull sources require you to explicitly request data from them once connected to. examples include a file access operation via a fetch or xhr call. the data is read sequentially in small pieces called chunks. a chunk can be a single byte, or it can be something larger such as a typed array of a certain
size. a single stream can contain chunks of different
sizes and types. the chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. an internal queue keeps track of the chunks that have not yet been read (see the internal queues and queuing strategies section below). the chunks inside the stream are read by a reader — this processes the data ...
...es the speed of reading/writing. when a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere. to use backpressure in a readablestream, we can ask the controller for the chunk
size desired by the consumer by querying the readablestreamdefaultcontroller.desired
size property on the controller. if it is too low, our readablestream can tell its underlying source to stop sending data, and we backpressure along the stream chain. if later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our strea...
...y an internal queue. in the case of readable streams, these are the chunks that have been enqueued but not yet read in the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink. internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state. in general, the strategy compares the
size of the chunks in the queue to a value called the high water mark, which is the largest total chunk
size that the queue can realistically manage. the calculation performed is high water mark - total
size of chunks in queue = desired
size the desired
size is the
size of chunks the stream can still accept to keep the stream flowing but below the high water mark in
size. after the calculation is p...
...And 2 more matches
WebGLRenderingContext.bufferData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. ...
...from one buffer object to another. gl.copy_write_buffer: buffer for copying from one buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations.
size a gl
sizeiptr setting the
size in bytes of the buffer object's data store. srcdata optional an arraybuffer, sharedarraybuffer or one of the arraybufferview typed array types that will be copied into the data store. if null, a data store is still created, but the content is uninitialized and undefined. usage a glenum specifying the intended usage pattern of the data store for optimization purp...
...eading data from webgl, and used at most a few times as the source for webgl drawing and image specification commands. srcoffset a gluint specifying the element index offset where to start reading the buffer. length optional a gluint defaulting to 0. return value none. exceptions a gl.out_of_memory error is thrown if the context is unable to create a data store with the given
size. a gl.invalid_value error is thrown if
size is negative. a gl.invalid_enum error is thrown if target or usage are not one of the allowed enums. examples using bufferdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); getting bu...
...And 2 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
at. compressed image formats must be enabled by webgl extensions before using these methods. ...
...ssed image formats must be enabled by webgl extensions before using these methods. ...
...format, width, height, border, gl
sizei image
size, glintptr offset); void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); // read from buffer bound to gl.pixel_unpack_buffer void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, gl
sizei image
size, glintptr offset); void gl.compressedteximage3d(target, level, internalformat, width, height, depth, border, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture. possible values for compressedteximage2d: gl.texture_2d: a two-dimensional text...
...And 2 more matches
WebGLRenderingContext.viewport() - Web APIs
sformation of x and y from normalized device coordinates to window coordinates. syntax void gl.viewport(x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the viewport origin. default value: 0. y a glint specifying the vertical coordinate for the lower left corner of the viewport origin. default value: 0. ...
...x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the viewport origin. default value: 0. y a glint specifying the vertical coordinate for the lower left corner of the viewport origin. default value: 0. width a non-negative gl
sizei specifying the width of the viewport. default value: width of the canvas. height a non-negative gl
sizei specifying the height of the viewport. default value: height of the canvas. return value none. ...
...in this situation, you can use gl.viewport. gl.viewport(0, 0, canvas.width, canvas.height); the viewport width and height are clamped to a range that is implementation dependent. ...
...And 2 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
g an audio buffer we need to create an empty container to put these numbers into, however, one that the web audio api understands. this is where audiobuffer objects come in. you can fetch a file and decode it into a buffer (we'll get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data. for noise, let's do the latter. ...
...audio api understands. this is where audiobuffer objects come in. you can fetch a file and decode it into a buffer (we'll get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data. for noise, let's do the latter. we first need to calculate the
size of our buffer, to create it. ...
...nd decode it into a buffer (we'll get to that later on in the tutorial), or you can create an empty buffer and fill it with your own data. for noise, let's do the latter. we first need to calculate the
size of our buffer, to create it. ...
...And 2 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
simplifying section selectors the :is() pseudo-class is particularly useful when dealing with html5 sections and headings. since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky. ...
... when dealing with html5 sections and headings. since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky. for example, without :is(), styling all the <h1> elements at different depths could be very complicated: /* level 0 */ h1 { font-
size: 30px; } /* level 1 */ section h1, article h1, aside h1, nav h1 { font-
size: 25px; } /* level 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-
size: 20px; } /* level 3 */ /* ... don't even think about it! */ using :is(), though, it's muc...
...on h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-
size: 20px; } /* level 3 */ /* ... ...
...And 2 more matches
align-items - CSS: Cascading Style Sheets
e keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. the property doesn't apply to block-level boxes, and to table cells. flex-start the cross-start margin edges of the flex items are flushed with the cross-start edge of the line. flex-end the cross-end margin edges of the flex items are flushed with the cross-end edge of the line. center the flex items' margin boxes are centered within the line on the cros...
...ke start. the property doesn't apply to block-level boxes, and to table cells. flex-start the cross-start margin edges of the flex items are flushed with the cross-start edge of the line. flex-end the cross-end margin edges of the flex items are flushed with the cross-end edge of the line. center the flex items' margin boxes are centered within the line on the cross-axis. if the cross-
size of an item is larger than the flex container, it will overflow equally in both directions. start the items are packed flush to each other toward the start edge of the alignment container in the appropriate axis. end the items are packed flush to each other toward the end edge of the alignment container in the appropriate axis. self-start the items are packed flush to the edge of the alignme...
... edge of the alignment container of the end side of the item, in the appropriate axis. baseline first baseline last baseline all flex items are aligned such that their flex container baselines align. the item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line. ...
...And 2 more matches
flex - CSS: Cascading Style Sheets
eted as <flex-grow>. the second value must be one of: a <number>: then it is interpreted as <flex-shrink>. a valid value for width: then it is interpreted as <flex-basis>. three-value syntax: the values must be in the following order: a <number> for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. ...
...t is interpreted as <flex-shrink>. a valid value for width: then it is interpreted as <flex-basis>. three-value syntax: the values must be in the following order: a <number> for <flex-grow>. a <number> for <flex-shrink>. a valid value for width for <flex-basis>. values initial the item is
sized according to its width and height properties. it shrinks to its minimum
size to fit the container, but does not grow to absorb any extra free space in the flex container. this is equivalent to setting "flex: 0 1 auto". auto the item is
sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum
size to fit the container. this is equivalent to setting "flex: 1 1 auto". none the item is s...
...lation to the flex container. this is equivalent to setting "flex: 0 0 auto". <'flex-grow'> defines the flex-grow of the flex item. negative values are considered invalid. defaults to 1 when omitted. <'flex-shrink'> defines the flex-shrink of the flex item. negative values are considered invalid. defaults to 1 when omitted. <'flex-basis'> defines the flex-basis of the flex item. a preferred
size of 0 must have a unit to avoid being interpreted as a flexibility. defaults to 0 when omitted. description for most purposes, authors should set flex to one of the following values: auto, initial, none, or a positive unitless number. to see the effect of these values, try resizing the flex containers below: <div class="flex-container"> <div class="item auto">auto</div> <div class="item a...
...And 2 more matches
grid-template - CSS: Cascading Style Sheets
er-bottom] [main-top] "b b b" 1fr [main-bottom] / auto 1fr auto; /* global values */ grid-template: inherit; grid-template: initial; grid-template: unset; values none is a keyword that sets all three longhand properties to none, meaning there is no explicit grid. there are no named grid areas. ...
..., meaning there is no explicit grid. there are no named grid areas. rows and columns will be implicitly generated; their
size will be determined by the grid-auto-rows and grid-auto-columns properties. <'grid-template-rows'> / <'grid-template-columns'> sets grid-template-rows and grid-template-columns to the specified values, and sets grid-template-areas to none. [ <line-names>? <string> <track-
size>? <line-names>? ]+ [ / <explicit-track-list> ]? sets grid-template-areas to the strings listed, grid-template-rows to the track
sizes following each string (filling in auto for any missing
sizes), and splicing in the named lines defined before/after each
size, and grid-template-columns to the track listing specified after the slash (or none, if not specified). note: the repeat() function isn...
...alueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? ...
...And 2 more matches
minmax() - CSS: Cascading Style Sheets
it is used with css grids. 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. ...
...rameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto. if max < min, then max is ignored and minmax(min,max) is treated as min. as a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum. values <length> a non-negative length. ...
...e of the keyword values max-content, min-content, or auto. if max < min, then max is ignored and minmax(min,max) is treated as min. as a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum. values <length> a non-negative length. <percentage> a non-negative percentage relative to the inline
size of the grid container in column grid tracks, and the block
size of the grid container in row grid tracks. if the
size of the grid container depends on the
size of its tracks, then the <percentage> must be treated as auto. the user agent may adjust the intrinsic
size contributions of the track to the
size of the grid container and increase the final
size of the track by the minimum amount that would result in honoring the percentage. <flex> a non-negative di...
...And 2 more matches
object-fit - CSS: Cascading Style Sheets
you can alter the alignment of the replaced element's content object within the element's box using the object-position property. 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. ...
...d as a single keyword chosen from the list of values below. values contain the replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. the entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box. cover the replaced content is
sized to maintain its aspect ratio while filling the element’s entire content box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. fill the replaced content is
sized to fill the element’s content box. the entire object will completely fill the box. if the object's aspect ratio does not match the aspect ratio of its box, then the ob...
...content box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit. fill the replaced content is
sized to fill the element’s content box. the entire object will completely fill the box. if the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit. none the replaced content is not re
sized. scale-down the content is
sized as if none or contain were specified, whichever would result in a smaller concrete object
size. formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill<...
...And 2 more matches
text-rendering - CSS: Cascading Style Sheets
r than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family). syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. for differences in how this value is interpreted by the browser, see the compatibility table. optimizespeed the browser empha
sizes rendering speed over legibility and geometric precision when drawing text. it disables kerning and ligatures. optimizelegibility the browser empha
sizes legibility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser empha
sizes geometric precision over rendering speed and legibility. certain aspects of fonts — such as ke...
...bility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser empha
sizes geometric precision over rendering speed and legibility. certain aspects of fonts — such as kerning — don't scale linearly. so this value can make text using those fonts look good. in svg, when text is scaled up or down, browsers calculate the final
size of the text (which is determined by the specified font
size and the applied scale) and request a font of that computed
size from the platform's font system. but if you request a font
size of, say, 9 with a scale of 140%, the resulting font
size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font
size to 12 instead. this results in stair-step scaling of text. but ...
... note: webkit precisely applies the specified value, but gecko treats the value the same as optimizelegibility. ...
...And 2 more matches
Constraint validation - Developer guides
ed for this country zipfield.setcustomvalidity(constraints[country][1]); } } then we link it to the onchange event for the <select> and the oninput event for the <input>: window.onload = function () { document.getelementbyid("country").onchange = checkzip; document.getelementbyid("zip").oninput = checkzip; } you can see a live example of the postal code validation. limiting the
size of a file before its upload another common constraint is to limit the
size of a file to be uploaded. checking this on the client side before the file is transmitted to the server requires combining the constraint validation api, and especially the field.setcustomvalidity() method, with another javascript api, here the file api. here is the html part: <label for="fs">select a file smaller than ...
...n the client side before the file is transmitted to the server requires combining the constraint validation api, and especially the field.setcustomvalidity() method, with another javascript api, here the file api. ...
...the file is transmitted to the server requires combining the constraint validation api, and especially the field.setcustomvalidity() method, with another javascript api, here the file api. ...
...And 2 more matches
<basefont> - HTML: Hypertext Markup Language
attributes like all other html elements, this element supports the global attributes. color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. ...
... attributes like all other html elements, this element supports the global attributes. color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. ...
... attributes like all other html elements, this element supports the global attributes. color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. ...
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
ent. a <picture> element, and it must be placed before the <img> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. ...
... and it must be placed before the <img> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element. ...
...ng role permitted aria roles no role permitted dom interface htmlsourceelement attributes this element includes the global attributes. media media query of the resource's intended media; this should be used only in a <picture> element.
sizes is a list of source
sizes that describes the final rendered width of the image represented by the source. each source
size consists of a comma-separated list of media condition-length pairs. ...
...And 2 more matches
HTML elements reference - HTML: Hypertext Markup Language
el> and <ins> elements, as appropriate. <samp> the html sample element (<samp>) is used to enclose inline text which represents sample (or quoted) output from a computer program. <small> the html <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. by default, it renders text within it one font-
size smaller, such as from small to x-small. <span> the html <span> element is a generic inline container for phrasing content, which does not inherently represent anything. it can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. <strong> the html strong importance element (<strong>) ind...
...<progress> the html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar. <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a
sizeable amount of free-form text, for example a comment on a review or feedback form. interactive elements html offers a selection of elements which help to create interactive user interface objects. element description <details> the html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled int...
...ronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word. <applet> the obsolete html applet element (<applet>) embeds a java applet into the document; this element has been deprecated in favor of <object>. ...
...And 2 more matches
Closures - JavaScript
this are particularly common on the web. much of the code written in front-end javascript is event-based. you define some behavior, and then attach it to an event that is triggered by the user (such as a click or a keypress). the code is attached as a callback (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text
size. ...
...he code written in front-end javascript is event-based. you define some behavior, and then attach it to an event that is triggered by the user (such as a click or a keypress). the code is attached as a callback (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text
size. ...
... you define some behavior, and then attach it to an event that is triggered by the user (such as a click or a keypress). the code is attached as a callback (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text
size. one way of doing this is to specify the font-
size of the body element (in pixels), and then set the
size of the other elements on the page (such as headers) using the relative em unit: body { font-family: helvetica, arial, sans-serif; font-
size: 12px; } h1 { font-
size: 1.5em; } h2 { font-
size: 1.2em; } such interactive text
size buttons can change the font-
size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units. he...
...And 2 more matches
Codecs used by WebRTC - Web media technologies
ific capabilities and requirements, there are a few overall requirements that must be met by any codec configuration used with webrtc. unless the sdp specifically signals otherwise, the web browser receiving a webrtc video stream must be able to handle video at at least 20 fps at a minimum resolution of 320 pixels wide by 240 pixels tall. it's encouraged that video be encoded at a frame rate and
size no lower than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is acceptable. the sender is not required to support this mechanism, however, so you have to be prepared to r...
...n't have to be used. indeed, some of these are pretty complicated to use. max-br if specified and supported by the software, the max-br parameter specifies the maximum video bit rate in units of 1,000 bps for vcl and 1,200 bps for nal. you'll find details about this on page 47 of rfc 6184. max-cpb if specified and supported by the software, max-cpb specifies the maximum coded picture buffer
size. ...
...mplicated to use. max-br if specified and supported by the software, the max-br parameter specifies the maximum video bit rate in units of 1,000 bps for vcl and 1,200 bps for nal. you'll find details about this on page 47 of rfc 6184. max-cpb if specified and supported by the software, max-cpb specifies the maximum coded picture buffer
size. this is a fairly complicated parameter whose unit
size can vary. see page 45 of rfc 6184 for details. max-dpb if specified and supported, max-dpb indicates the maximum decoded picture buffer
size, given in units of 8/3 macroblocks. see rfc 6184, page 46 for further details. max-fs if specified and supported by the software, max-fs specifies the maximum
size of a single video frame, given as a number of macroblocks. max-mbps if specified and sup...
...And 2 more matches
How to make PWAs installable - Progressive web apps (PWAs)
e worker. if developing your app using firefox, be aware that you will need a service worker to be compatible with chromium-based browsers. the manifest file the key element is a web manifest file, which lists all the information about the website in a json format. it usually resides in the root folder of a web app. it contains useful information, such as the app’s title, paths to different-
sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens. this information is needed for the browser to present the web app properly during the installation process, as well as within the device's app-launching interface, such as the home screen of a...
...rmat is explicitly mentioned in the w3c manifest specification, so that's what we'll use here. ...
...of the file looks like this: { "name": "js13kgames progressive web app", "short_name": "js13kpwa", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "
sizes": "32x32", "type": "image/png" }, // ... { "src": "icons/icon-512.png", "
sizes": "512x512", "type": "image/png" } ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#b12a34", "background_color": "#b12a34" } most of the fields are self-explanatory, but to be certain we're on the same page: name: the full name of your web app. short_name: short name to be shown on the home screen. description: a sentence o...
...And 2 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
rs color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-
size font-
size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernel...
...sentation attributes note that all svg presentation attributes can be used as css properties. ...
...ttributes note that all svg presentation attributes can be used as css properties. ...
...And 2 more matches
Using templates and slots - Web Components
lement-details (see it running live also). ...
...d slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-
size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-
size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h4><span>attributes</span></h4> <slot name="attribu...
...ails> element lacks any reference to the "attributes" named slot. the first <element-details> element references the "attributes" named slot using a <dl> element with <dt> and <dd> children. adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-
size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px } result finally let’s put all the snippets together and see what the rendered result looks like. screenshotlive sample notice the following points about this rendered result: even though the instances of the <element-details> element in the document do not directly u...
...And 2 more matches
JavaScript Daemons Management - Archive of obsolete content
feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-
size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> <butt...
...letter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-
size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick="ounh...
... lucky, punk?", orecompose = new daemon.safe(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50px; font-
size: 20px; line-height: 20px; } </style> </head> <body> <h1>new daemon.safe(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</button> ...
...letter.val : this.pool[parseint(math.random() * this.pool.length)]; } } }, 33, 30); onload = function () { ounhide.owner.target.id = "animate-me"; document.body.appendchild(ounhide.owner.target); ounhide.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #animate-me { margin: 50px; font-
size: 20px; line-height: 20px; } </style> </head> <body> <h1>daemon.safe.buildaround()</h1> <p><button onclick="ounhide.skipto(11);">skipto(11)</button> <button onclick="ounhide.makesteps(29);">makesteps(29)</button> <button onclick="ounhide.fixposition(-13);">fixposition(-13)</button> <button onclick="ounhide.play();">play</button> <button onclick="ounhide.turn();">turn</button> <button onclick=...
Adding sidebars - Archive of obsolete content
ent from other xul windows or overlays. one minor difference is that the xul sidebar should be defined using the « xul reference « root element instead of window or dialog. the load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up . ...
... unload every time it's closed, so you can use those for initialization and clean up . another, more important difference to take into account is that users can re
size the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. you should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. there are ways to limit the
size boundaries of your sidebar with css or even disable resizing altogether, but none of those are good practices. forcing sidebars to have a fixed
size can cause accessibility and usability problems. you can still have plenty of content available in your sidebar, you just need to organize it in a way that doesn't take too much space. for this purpose we'll also look at some handy xul elements in th...
...in the following example, the second child will be displayed, not the first which would be the default. <deck selectedindex="2"> <hbox> <!-- content for the first child. --> </hbox> <hbox> <!-- content for the second child. --> </hbox> </deck> note how this is one of the few cases where an attribute of an element is named using camel case instead of all small caps. the
size of the deck depends on the
size of the largest child node, just like in a tabbox. we recommend that you use hbox or vbox elements as children of a deck or stack. the code is easier to read and maintain this way. a deck can be very useful when you have a large piece of xul code that only changes in a small way depending on different circumstances. for instance, you could have a window that i...
...e of the window. this way you can still use dtd, and the code remains simple. a stack is like a deck, except that all of its children are always on display, one of top of the other. it allows you to decompose complex ui into individual layers, broadening the layout possibilities. one common use for a stack is to have an image background that stretches horizontally and vertically depending on the
size of the foreground object: <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" /> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> this workaround is necessary because you can't have an background image stretch using css. a less common use for the stack element is to use the left and top attributes on its children in order to ha...
Style System Overview - Archive of obsolete content
ave other implementations in c++ that: do what css can't do do things faster than css would css style sheets at basic level, sheet is collection of rules other special things: @import, @media, @namespace, etc. a rule is a selector and a declaration block. a declaration block is a group of declarations. a declaration is a property and a value. ...
... “reset”: 'border', 'background', etc. ...
... the declarations (properties & values) are stored in data structs (ns...
... rules that are matched, we build or walk along the rule tree. the rule tree is a lexicographic tree of matched rules, where each node in the tree is represented by a nsrulenode. some style data is cached on nsrulenode objects to speed up computation and reduce memory use. ...
New Skin Notes - Archive of obsolete content
d graphics. -- dria when will these fixes be on the live site? --nickolay 10:38, 31 aug 2005 (pdt) existing fixes should be on test/docs/ now. --dria stuff that's been fixed note that while i've made these fixes, they haven't necessarily been checked in yet. edit page textarea needs to 'scale' better with page width (so large whitespace area's are non-existant), suggest min-width:some-em-
size; width: 88%; and max-width set to 95% or something like that. --callek i tried this, but it gets totally screwed up in ie for some reason. i'll try again, but can't guarantee this will be fixed for the initial upgrades. --dria took two days, but i finally got this sorted out. when the skin is updated on test/docs, editform textarea should be re
sizeable in all browsers. yay! --dria wordpress...
... page title needs "development skin" removed. -- dria the skin looks nice, but the links on the right are too small. if this is going to be the default skin used by editors, they are unacceptably small. --nickolay 01:59, 25 aug 2005 (pdt) i'm planning on doing up a special skin for editors in the future (with the edit tools and such closer to the top, etc). in the meantime, i'll bump the font
size of those links up. --dria but if the editors use a different skin, they won't have an easy way to make sure the pages look good to end-users. --nickolay 04:43, 25 aug 2005 (pdt) the skin won't be that different -- it will just have the editor tools moved around. the main content layout will not change. --dria the color of the internal and extenrnal links is now the same, is that intentiona...
... mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to 800 (we can ignore 640, this will most likely require fonts settings changes as well). but it should work by default with 800 pixels width, imo. --mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-
size to anything other than 100%, let the user figure out which font-setting is best for him/her on his/her computer, rather than tweak it to what the designer feels is the right
size for the designers eye(s). if the designer wants smaller text, tweak his ua's text
size off of the base, for 100% page specified text. and when done, verify that the designer did not break the page with a "normal" font se...
...the menu bar at the right, however, is too large in the new system, but is fine on the current (non-test) system. ...
The new nsString class implementation (1999) - Archive of obsolete content
ll usage due to fragility little intrinsic i18n support few efficiencies, notably a lack of support for narrow (1-byte) character strings no support for external memory management policy lack of xpcom interface notable features of the new nsstrimpl implementation are: intrinsic support for 1 and 2 byte character widths provides automatic conversion between strings with different character
sizes inviolate base structure eliminates class fragility problem; safe across dll boundaries offers c-style function api to manipulate nsstrimpl offers simple memory allocator api for specialized memory policy shares binary format with bstring coming soon: a new xpcom (nsistring) interface non-templatized; this is a requirement for gecko very efficient buffer manipulation architecture the fun...
... static void ensurecapacity(nsstrimpl& astring,pruint32 anewlength); static void growcapacity(nsstrimpl& astring,pruint32 anewlength); static void append(nsstrimpl& adest,const nsstrimpl& asource,pruint32 anoffset,print32 acount); static void appendcstring(nsstrimpl& adest,const char* asource,pruint32 anoffset,print32 acount); ...
...terface in the existing nsstring class found in mozilla/base/src/nsstring.h. nsautostring we still offer an nsautostring that provides its own stack based buffer. this very useful class allows programmers to take advantage of the nsstring/nsstrimpl implementation, while eliminating heap based allocations. an additional improvement has been made to nsautostring that allows it to use an arbitrarily
sized stack based buffer rather than its own internal buffer. this means that you can continue to use efficient (temporary) stack buffers for string storage with the bonus of storage pools that serve your specific need. (sounds complicated, but it's really easy). this class fully interoperates with nsstring and nsstrimpl. nscstring the new nscstring class shares the same api with nsstring, but uses a ...
...ation simpler in a multiprocess environment. i'm wondering if this is sufficient, namely, that a string can return it's own (shared) allocator for this purpose. our minimalistic nsimemoryagent interface is just rich enough to support the nsstring idiom, and could be extended to serve as the general memory allocation idiom. here's it's api: class nsimemoryagent : nsisupports { void* new(nsint32 a
size)=0; //used for both alloc and realloc void* delete(void* aptr)=0; }; internationalization the new nsstrimpl/nsstring implementation addresses at least two of the primary concerns of our i18n team. first, nsstrimpl offers charset conversion hooks for use during construction, comparison and assignment. (these are stubbed out today awaiting their review and implementation). second, they are conc...
XUL Events - Archive of obsolete content
hange, thus it is not called when the user presses non-displayable keys. attribute: oninput overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'. ...
... overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'. when there is not enough space to display the contents of the element at full
size, the overflow event will be fired. depending on the value of the overflow property, scrollbars may have appeared. for example, if a box has a maximum
size of 100 pixels, and only enough space for 80 pixels is available, the overflow event will be sent to the box. if the
size changes, for example, by the user resizing the window, the underflow event will be fired when enough space becomes available. attribute: onoverflow popuphidden this event is sent t...
...ad it is just a function call and must use the attribute syntax. the script may return a value to set the preference to a specific value rather than the value of the element. attribute: onsynctopreference underflow this event is sent to an element when there becomes enough space to display it at full
size. this applies to boxes and other layout elements with a css overflow property other than 'visible'. the underflow event can be used to indicate that a scrolling mechanism is no longer necessary. attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or hi...
...ched to top-level dom windows and can be listened to using window.addeventlistener. event description activate sent when a window becomes active. deactivate sent when a window becomes inactive.
sizemodechange sent when a window is minimized or un-minimized, switched between full screen and windowed mode, or maximized. note: this event may fire several times or while resizing the window (for example, see bug 715867), so always check if the window state changed by inspecting window.windowstate in the event. accessibility events these events...
textbox (Toolkit autocomplete) - Archive of obsolete content
pletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn,
size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, sho...
...this should be one of the characters tha...
...e page titles associated with each url. if this attribute is not specified, the comment column doesn't appear. showimagecolumn type: boolean if true, an image column appears in the popup. there is no default styling of this image, but the class name returned by the results appears in the property list for the column. if this attribute is not specified, the image column doesn't appear.
size type: integer the number of characters that can be displayed in the textbox. 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. tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cy...
...et or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. showcommentcolumn type: boolean gets and sets the value of the showcommentcolumn (or showcommentcolumn) attribute. showimagecolumn type: boolean gets and sets the value of the showimagecolumn attribute.
size type: integer gets and sets the value of the
size attribute. tabindex type: integer gets and sets the value of the tabindex attribute. tabscrolling type: boolean gets and sets the value of the tabscrolling (or tabscrolling) attribute. textlength type: integer holds the length of the text entered in the textbox. this property is read-only. textvalue new...
Textbox (XPFE autocomplete) - Archive of obsolete content
focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup,
size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, pop...
...llaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup,
size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey t...
...cified, the comment column doesn't appear. showpopup type: boolean note: applies to: thunderbird, seamonkeyif true, the popup will be shown. if false, the popup will not be shown, but the autocomplete results will still be available. you can set this to false and set the autofill attribute to true to emulate a communicator 4.x style autocomplete textbox. the default value is true.
size type: integer the number of characters that can be displayed in the textbox. 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. tabscrolling obsolete since gecko 1.9.1 type: boolean if true, the user may c...
...ield's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character. sessioncount type: integer holds the number of sessions. showcommentcolumn type: boolean gets and sets the value of the showcommentcolumn (or showcommentcolumn) attribute. showpopup type: boolean gets and sets the value of the showpopup attribute.
size type: integer gets and sets the value of the
size attribute. tabindex type: integer gets and sets the value of the tabindex attribute. tabscrolling type: boolean gets and sets the value of the tabscrolling (or tabscrolling) attribute. textlength type: integer holds the length of the text entered in the textbox. this property is read-only. textvalue new...
Box Model Details - Archive of obsolete content
element. we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> in the example above, all three elements will re
size themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this
size but they may grow 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,...
...s is that you need to know how big the element will be beforehand. example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum
sizes on some elements, and make certain elements flexible. the best interface is one that can be displayed at various
sizes without problems. the box model 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 h...
...> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height: 30px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button. the left box has a flexiblity that is 3 times greater than the right one so it will always receive 3 times as much of the extra space when the window
size is increased. the right box enforces a minimum width of 150 pixels. the textbox is flexible so it will re
size as the window re
sizes. the textbox also enforces a minimum width of 100 pixels. the check box appears in the right box along with its label. just below the check box is a spacer. the spacer will grow and shrink but not exceed 30 pixels. the result is that the check box and the find button...
... the result is that the check box and the find button will be spaced apart from each other by some space of no more than 30 pixels. the second box has an alignment of start. this causes the child elements to be aligned on the left edge. if this was not specified, the default would be stretch, which would make the child elements stretch horizontally. because we don't want the find button to change
size, we need to set an alignment. next, we will learn about a more specialized type of box, the groupbox. « previousnext » ...
Grids - Archive of obsolete content
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 columns to specify the
size and appearance of the columns in a grid. alternatively, you can put content inside the columns, and use the rows to specify the appearance. we'll look at the case of organizing elements by row first. declaring a grid to declare a set of rows, use the rows tag, which should be a child element of grid. inside that you should add row elements, which are used for each row. inside the row element, y...
... <button label="browse..."/> </hbox> </row> </rows> </grid> notice in the image how the first column of elements containing the labels has only a single element in each row. the second column contains a box in its second row, which in turn contains two elements, a textbox and a button. you could add additional nested boxes or even another grid inside a single cell. if you re
size the window of the last example, you will see that the textboxes re
size, but no other elements do. this is because of the flex attributes added to the textboxes and the second column. the first column does not need to be flexible as the labels do not need to change
size. the initial width of a column is determined by the largest element in the column. similarly, the height of a row is determined ...
... column based organization you can also place the elements inside the column elements instead of the rows. if you do this, the rows are just declared to specify how many rows there are. ...
... column based organization you can also place the elements inside the column elements instead of the rows. if you do this, the rows are just declared to specify how many rows there are. ...
Trees - Archive of obsolete content
« previousnext » xul provides a way to create tabular or hierarchical lists using a tree. the tree one of the more complex elements in xul is the tree. a tree may be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, re
size and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may on...
...ng sections. there are also two elements used to define the columns to be displayed in the tree. tree this is the outer element of a tree. treecols this element is a placeholder for a set of treecol elements. treecol this is used to declare a column of the tree. by using this element, you can specify additional information about how the data in the columns are sorted and if the user can re
size the columns. you should always place an id attribute on a column, as mozilla uses the ids to identify the columns when rearranging and hiding them. this is no longer required in mozilla 1.8 and later, but it is still a good idea to use ids on columns. treechildren this contains the main body of the tree where the individual rows of data will be displayed. example tree with two columns exampl...
...he columns flexible if your tree is flexible, so that the columns stretch as the tree does. in this example, the second column will be approximately twice as wide as the first column. all of the columns should be placed directly inside a treecols element. in this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. you may have to re
size the window to see anything since there isn't any data to display. since the tree has been marked as flexible, the body will stretch to fit the available space. making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. however, you may specify a specific number of r...
...row at a time. add a tree to our find files example let's add a tree to the find files window where the results of the search would be displayed. the tree will use a content tree view. the following code should be added in place of the iframe. <tree flex="1"> <treecols> <treecol id="name" label="filename" flex="1"/> <treecol id="location" label="location" flex="2"/> <treecol id="
size" label="
size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="2520 bytes"/> </treerow> </treeitem> </treechildren> </tree> <splitter collapse="before" re
sizeafter="grow"/> we've added a tree with three columns for the filename, the location and the file
size. the s...
XUL accessibility guidelines - Archive of obsolete content
invoke display preferences that may be necessary for accessibility. presentation should also be flexible to window and font resizing. cooperative applications adapt well to the user's environment. system defaults maintain system defaults. many users set their computers to use larger than normal fonts and/or specific color themes. by default, xul menus, labels, and other widgets get their font,
size, and color settings from the user settings specified in the operating system. respect these defaults unless you have a specific and unavoidable reason to change them. if you must change them, use css to
size elements relative to the default
sizes (for example, use % or em rather than specific point or pixel
sizes). color color is an important tool. different colors can give different meanings t...
...ate for conveying meaning or information to the user. some users may override the default color scheme of your application. color should only be used to enhance the meaning of an object or text after that meaning is also communicated another way. flexible sizing one of the great things about xul is that visual layout is easy to control. on the web, visual design is often contained to a specific
size. with xul you can allow elements to flex with the resizing of the application window. use the flex attribute to provide this functionality. testing display verify that your application is functional and pleasant looking using user-defined font and color settings. do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-al...
...ng of the application window. use the flex attribute to provide this functionality. testing display verify that your application is functional and pleasant looking using user-defined font and color settings. do this by changing system display settings to an accessible theme (such as the high-contrast theme on windows, available via left-alt + left-shift + printscreen). confirm that text is empha
sized correctly and that color is not used as a sole means to convey meaning. ensure that when windows are re
sized, the application adjusts gracefully. human computer interaction as you use an application you expect a certain amount of control and feedback. provide users with clear instruction and feedback, and allow users to correct errors. some users with disabilities have difficulties with quick ...
...ass fail system defaults system settings are maintained. system settings are not maintained. color color alone is not used to convey meaning and sufficient contrast exists between font color and background color. color alone is used to convey meaning, or font and background color do not provide sufficient contrast. flex visual elements and containers re
size gracefully. visual elements and containers do not re
size gracefully. human computer interaction checkpoint pass fail instruction help documentation is provided including a description of keyboard shortcuts. help documentation is not provided or is incomplete. alerts alerts are displayed using the alert scripting function or the notificationbox ...
textbox - Archive of obsolete content
one line of text is displayed by default. the multiline attribute can be specified to display a field with multiple rows. more information is available in the xul tutorial. ...
... ...
... to the other rows. to get the actual number of rows in the element, use the getrowcount method. searchbutton type: boolean if true, the search field will only fire a command event when the user presses the search button or presses the enter key. otherwise, the command event is fired whenever the user modifies the value. this attribute only applies to textboxes with the type search.
size type: integer the number of characters that can be displayed in the textbox. spellcheck type: boolean if true, spell checking is enabled by default for the text box; if false, spell checking is disabled by default. if not specified, this defaults to false the html the spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given eleme...
...election. if this value is equal to the value of the selectionstart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox. selectionstart type: integer get or set the beginning of the selected portion of the field's text. use in conjuction with the selectionend property. the value specifies the index of the first selected character.
size type: integer gets and sets the value of the
size attribute. spinbuttons type: element the read-only property returns a reference to the spinbuttons element used by the number box. tabindex type: integer gets and sets the value of the tabindex attribute. textlength type: integer holds the length of the text entered in the textbox. this propert...
tooltip - Archive of obsolete content
; instead you may just add a tooltiptext attribute to an element. more information is available in the xul tutorial. ...
...t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text...
... related tbd ...
...boxobject.screeny properties of the element, and use those as the x and y arguments offset by the desired values. the popuptype should be one of the strings popup, context, or tooltip. each type of popup is intended to be displayed only temporarily; they are not expected to be displayed permanently.
sizeto( width, height ) return type: no return value changes the current
size of the popup to the new width and height. related tbd ...
calICalendarView - Archive of obsolete content
as implemented here, it corresponds to the calendar containing all of the cali...
...as implemented here, it corresponds to the calendar containing all of the calievents and calitodos that shoud be shown in the view. in the vast majority of cases, this is c...
...ate, in calidatetime aenddate); ensures that the entire range of dates from astartdate to aenddate is visible. the view is free to show other dates as well, although this should be kept to a minimum. ...
... history calicalendarview was introduced as part of the 'backend rewrite' that occurred prior to lightning 0.1 and between sunbird 0.2 and sunbird 0.3. it remains unfrozen today. ...
GLSL Shaders - Game development
ern browser with good webgl support, such as the latest firefox or chrome. create a directory to store your experiments in. save a copy of the latest minimized three.js library inside your directory. html structure here's the html structure we will use. ...
...the <script> element in the <head> includes the three.js library in the page; we will write our code into three script tags in the <body> tag: the first one will contain the vertex shader. the second one will contain the fragment shader. the third one will contain the actual javascript code generating the scene. before reading on, copy this code to a new text file and save...
...x * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } </script> javascript var width = window.innerwidth; var height = window.innerheight; var renderer = new three.webglrenderer({antialias:true}); renderer.set
size(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); var scene = new three.scene(); var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); var boxgeometry = new three.boxgeometry(10, 10, 10); var shadermaterial = new three.shadermaterial( { vertexshader: docu...
...our example doesn't do much but there are many more cool things you can do with shaders — check out some really cool ones on shadertoy for inspiration and to learn from their sources. ...
Scaling - Game development
« previousnext » this is the 2nd step out of 16 of the gamedev phaser tutorial. you can find the source code as it should look after completing this lesson at gamedev-phaser-content-kit/demos/lesson02.html. scaling refers to how the game canvas will scale on different screen
sizes. we can make the 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 ha...
...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 won't be skewed like in the previous mode. there might be black stripes visible on the edges of the screen, but we can live with that. ...
...ed. 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 won't be skewed like in the previous mode. there might be black stripes visible on the edges of the screen, but we can live with that. ...
... images won't be skewed like in the previous mode. there might be black stripes visible on the edges of the screen, but we can live with that. re
size — 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 ...
HTML: A good basis for accessibility - Learn web development
semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in file
size than non-semantic spaghetti code, and easier to make responsive. good for seo — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local co...
...ng you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. ...
...e them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font
size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <br><br> <font
size="5">my subheading</font> <br><br> this is the first subsection of my document. i'd love people to be able to find this content! <br><br> <font
size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content. i think is more interesting than the last one. if you try our longer version out with a screen reader (see bad-semantics.html), you'll not have a very good experience ...
...side content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout. it is also much leaner and smaller in terms of code
size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap you...
HTML: A good basis for accessibility - Learn web development
semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has other benefits beyond accessibility: easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand. better on mobile — semantic html is arguably lighter in file
size than non-semantic spaghetti code, and easier to make responsive. good for seo — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers. let's get on and look at accessible html in more detail. note: it is a good idea to have a screen reader set up on your local co...
...ng you go at whatever pace is comfortable for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. ...
...e them as a handy table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font
size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> 1. here is <br><br> 2. a list for <br><br> 3. you to read <br><br> <font
size="5">my subheading</font> <br><br> this is the first subsection of my document. i'd love people to be able to find this content! <br><br> <font
size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content. i think is more interesting than the last one. if you try our longer version out with a screen reader (see bad-semantics.html), you'll not have a very good experience ...
...side content in here --> </aside> </main> <!-- and here is our main footer that is used across all the pages of our website --> <footer> <!-- footer content in here --> </footer> if you try our more modern structure example with a screen reader, you'll see that the layout markup no longer gets in the way and confuses the content readout. it is also much leaner and smaller in terms of code
size, which means easier to maintain code, and less bandwidth for the user to download (particularly prevalent for those on slow connections). another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <div> elements, but it is better to use appropriate sectioning elements to wrap you...
Fundamental CSS comprehension - Learn web development
stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height. set the <article>'s height to 120px, but expressed in ems. also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too. ...
...recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height. ...
...rlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height. as a last little touch, give the paragraph inside the <article> an appropriate padding value so that its left edge lines up with the <h2> and footer paragraph, and set its color to be fairly light so it is easy to read. note: bear in mind that the second ruleset sets font-
size: 10px; on the <html> element — this means that for any descendants of <html>, an em will be equal to 10px rather than 16px as it is by default. (this is of course, provided the descendants in question don't have any ancestors sitting in between them and <html> in the hierarchy that have a different font-
size set on them. this could affect the values you need, although in this simple example thi...
...elector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content. hints and tips you don't need to edit the html in any way, except to apply the css to your html. when trying to work out the em value you need to represent a certain pixel length, think about what base font
size the root (<html>) element has, and what it needs to be multiplied by to get the desired value. that'll give you your em value, at least in a simple case like this. example the following screenshot shows an example of what the finished design should look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an onl...
Organizing your CSS - Learn web development
oocss most of the approaches that you will encounter owe something to the concept of object oriented css (oocss), an approach made popular by the work of nicole sullivan. the basic idea of oocss is to separate your css into reusable objects, which can be used anywhere you need on your site. the standard example of oocss is the pattern described as the media object. this is a pattern with a fixed
size image, video or other element on one side, and flexible content on the other. it's a pattern we see all over websites for comments, listings, and so on. if you are not taking an oocss approach you might create custom css for the different places this pattern is used, for example creating a class called comment with a bunch of rules for the component parts, then a class called list-item with almo...
...class called list-item with almost the same rules as the comment class except for some tiny differences. the differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not. .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-
size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid grey; } .list-item .content { font-
size: .8rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the shape of the media object. then we'd add an additional class to deal with those tiny...
...rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the shape of the media object. then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways. ...
...an enable sass for your css in the settings for a pen, and codepen will then run the sass parser for you, in order that you can see the resulting webpage with regular css applied. sometimes you will find that css tutorials have used sass rather than plain css in their codepen demos, so it is handy to know a little bit about it. post-processing for optimization if you are concerned about adding
size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the css by stripping out anything unnecessary in the production version. an example of a post-processor solution for doing this would be cssnano. wrapping up this is the final part of our learning css guide, and as you can see there are many ways in which your ...
Overflowing content - Learn web development
rn what overflow is and how to manage it. prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand overflow and how to manage it. what is overflow? everything in css is a box. you can constrain the
size of these boxes by assigning values of width and height (or inline-
size and block-
size). overflow happens when there is too much content to fit in a box. css provides various tools to manage overflow. as you go further with css layout and writing css, you will encounter more overflow situations. css tries to avoid "data loss" let's consider two examples that demonstrate the default behavior of c...
...hen we add content that exceeds the allocated space. the content overflows the box and falls into the paragraph below. the second example is a word in a box. the box has been made too small for the word and so it breaks out of the box. you might wonder why css works in such a messy way, displaying content outside of its intended container. why not hide overflowing content? why not scale the
size of the container to fit all the content? wherever possible, css does not hide content. this would cause data loss. the problem with data loss is that you might not notice. website visitors may not notice. if the submit button on a form disappears and no one can complete the form, this could be a big problem! instead, css overflows in visible ways. you are more likely to see there is a problem. a...
...s overlapping. if you restrict a box with a width or a height, css trusts you to know what you are doing. css assumes that you are managing the potential for overflow. in general, restricting the block dimension is problematic when the box contains text. there may be more text than you expected when designing the site, or the text may be larger. (for example, if the user has increased their font
size) the next two lessons explain different approaches to control sizing in ways that are less prone to overflow. however, if you need a fixed
size, you can also control how the overflow behaves. let's read on! the overflow property the overflow property is how you take control of an element's overflow. it is the way you instruct the browser how it should behave. the default value of overflow is ...
...ip to each other. this was fragile. in a legacy application, you may encounter a box where content is overlaying other content on the page. now you can recognize that this happens with overflow. ideally, you will refactor the layout to not rely on fixed-height containers. when developing a site, always keep overflow in mind. test designs with large and small amounts of content. increase the font
sizes of text. generally ensure that your css works in a robust way. changing the value of overflow to hide content, or to add scrollbars, is likely to be reserved for a few select use cases. (for example, where you intend to have a scrolling box) test your skills! there is a lot to absorb from this lesson! can you remember the most important information? to check your understanding, see test your s...
Grids - Learn web development
this unit represents one fraction of the available space in the grid container. change your track listing to the following definition, creating three 1fr tracks. .container { display: grid; grid-template-columns: 1fr 1fr 1fr; } you should now see that you have flexible tracks. the fr unit distributes space in proportion, therefore you can give different positive ...
...t. this is an example of the explicit versus the implicit grid. the explicit grid is the one that you create using grid-template-columns or grid-template-rows. the implicit grid is created when content is placed outside of that grid — such as into our rows. the explicit and implicit grids are analogous to the main and cross flexbox axes. by default, tracks created in the implicit grid are auto
sized, which in general means that they are large enough to fit their content. if you wish to give implicit grid tracks a
size you can use the grid-auto-rows and grid-auto-columns properties. if you add grid-auto-rows with a value of 100px to your css, you will see that those created rows are now 100 pixels tall. simple grid example with fr units body { width: 90%; max-width: 900px; margin: ...
... tall tracks won’t be very useful if we add content into those tracks that is taller than 100 pixels, in which case it would cause an overflow. it might be better to have tracks that are at least 100 pixels tall and can still expand if more content gets into them. a fairly basic fact about the web is that you never really know how tall something is going to be; additional content or larger font
sizes can cause problems with designs that attempt to be pixel perfect in every dimension. the minmax() function lets us set a minimum and maximum
size for a track, for example minmax(100px, auto). the minimum
size is 100 pixels, but the maximum is auto, which will expand to fit the content. try changing grid-auto-rows to use a minmax value: .container { display: grid; grid-template-columns:...
...nd minmax() to create a useful pattern. sometimes it is helpful to be able to ask grid to create as many columns as will fit into the container. we do this by setting the value of grid-template-columns using repeat() notation, but instead of passing in a number, pass in the keyword auto-fill. for the second parameter of the function we use minmax(), with a minimum value equal to the minimum track
size that we would like to have, and a maximum of 1fr. try this in your file now, using the below css: as many columns as will fit body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <div...
What is CSS? - Learn web development
y means a computer program that represents a person inside a computer system. browsers are the main type of user agent we think of when talking about css, however, it is not the only one. there are other user agents available — such as those which convert html and css documents into pdfs to be printed. css can be used for very basic document text styling — for example changing the color and
size of headings and links. it can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. it can even be used for effects such as animation. have a look at the links in this paragraph for specific examples. css syntax css is a rule-based language — you define rules specifying groups of styles that shoul...
...ific examples. css syntax css is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. for example "i want the main heading on my page to be shown as large red text." the following code shows a very simple css rule that would achieve the styling described above: h1 { color: red; font-
size: 5em; } the rule opens with a selector . this selects the html element that we are going to style. in this case we are styling level one headings (<h1>). we then have a set of curly braces { }. inside those will be one or more declarations, which take the form of property and value pairs. each pair specifies a property of the element(s) we are selecting, then a value that we'd like to give the ...
...lue pairs. each pair specifies a property of the element(s) we are selecting, then a value that we'd like to give the property. before the colon, we have the property, and after the colon, the value. css properties have different allowable values, depending on which property is being specified. in our example, we have the color property, which can take various color values. we also have the font-
size property. this property can take various
size units as a value. a css stylesheet will contain many such rules, written one after the other. h1 { color: red; font-
size: 5em; } p { color: black; } you will find that you quickly learn some values, whereas others you will need to look up. the individual property pages on mdn give you a quick way to look up properties and their values ...
...ant to know what else you can use as a value. note: you can find links to all the css property pages (along with other css features) listed on the mdn css reference. alternatively, you should get used to searching for "mdn css-feature-name" in your favourite search engine whenever you need to find out more information about a css feature. for example, try searching for "mdn color" and "mdn font-
size"! css modules as there are so many things that you could style using css, the language is broken down into modules. you'll see reference to these modules as you explore mdn and many of the documentation pages are organized around a particular module. for example, you could take a look at the mdn reference to the backgrounds and borders module to find out what its purpose is, and what different...
Advanced text formatting - Learn web development
00px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...ou go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the need to eliminate negative self talk (as mentioned in affirmations for positive thinking.)</p> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="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 = texta...
...c to move focus away from the code area (tab inserts 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 = texta...
Getting started with HTML - Learn web development
away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>a link to my favorite website.</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; } 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; ...
...way from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>this is my page</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; } 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 u...
Image gallery - Learn web development
it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the lef...
... it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line. yo...
... it sets the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line. your javascript needs t...
...l the images, and for each one insert an <img> element inside the thumb-bar <div> that embeds that image in the page. attach an onclick handler to each <img> inside the thumb-bar <div> so that when they are clicked, the corresponding image is displayed in the displayed-img <img> element. attach an onclick handler to the <button> so that when it is clicked, a darken effect is applied to the full-
size image. when it is clicked again, the darken effect is removed again. to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. looping through the images we've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbbar, create a ...
Adding features to our bouncing balls demo - Learn web development
source code!) steps to complete the following sections describe what you need to do. ...
... remember to set the ball() constructor's prototype and constructor appropriately. the ball draw(), update(), and collisiondetect() method definitions should be able to stay exactly the same as they were before. you also need to add a new parameter to the new ball() ( ... ...
...cles. you're probably not going to take over the world with a single evil circle, but it will do for this assessment. the evilcircle() constructor should inherit x, y, velx, vely, and exists from shape(), but velx and vely should always equal 20. you should do this something like shape.call(this, x, y, 20, 20, exists); it should also define its own properties, as follows: color — 'white'
size — 10 again, remember to define your inherited properties as parameters in the constructor, and set the prototype and constructor properties correctly. defining evilcircle()'s methods evilcircle() should have four methods, as described below. draw() this method has the same purpose as ball()'s draw() method: it draws the object instance on the canvas. it will work in a very similar way, so...
...we don't want to automatically update the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's
size property would make sense. setcontrols() this method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around. the following code block should be put inside the method definition: let _this = this; window.onkeydown = function(e) { if (e.key === 'a') { _this.x -= _this.velx; } else if (e.key === '...
Beginning our React todo list - Learn web development
ng: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-
size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-
size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* globa...
...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"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-
size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4re...
...y: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-
size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; ...
...position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-
size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashe...
Starting our Svelte Todo list app - Learn web development
ng: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-
size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-
size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* glob...
...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"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-
size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4re...
...y: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-
size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; ...
...position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -webkit-font-smoothing: antialiased; cursor: pointer; position: absolute; z-index: 1; margin: 0; opacity: 0; } .c-cb > label { font-
size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .c-cb > label::before { content: ""; position: absolute; border: 2px solid currentcolor; background: transparent; } .c-cb > input[type="checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashe...
Getting started with Svelte - Learn web development
elte can be used to develop small pieces of an interface or whole applications. you can either start from scratch letting svelte drive your ui or you can incrementally integrate it into an existing application. nevertheless, svelte is particularly appropriate to tackle the following situations: web applications intended for low power devices: applications built with svelte have smaller bundle
sizes, which is ideal for devices with slow network connections and limited processing power. less code means less kb to download, parse, execute, and keep hanging around in memory. highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the performance gains that come from a framework with no runtime overhead wi...
...variables declared (or imported) at the top level are 'visible' from the component's markup. top-level variables is the way svelte handles the component state, and they are ...
...nditionally 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 component's <style> block will be scoped only to that component. this works by adding a class to selected elements, which is based on a hash of the co...
...kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component. as you can see, bundle.js is the only javascript file referenced by index.html. there are no other libraries loaded into the web page. this is a much smaller footprint than compiled bundles from other frameworks. take into account that, in the case of code bundles, it's not just the
size of the files you have to download that matter. this is executable code that needs to be parsed, executed, and kept in memory. so this really makes a difference, especially in low-powered devices or cpu-intensive applications. following this tutorial in this tutorial series you will be building a complete web application. we'll learn all the basics about svelte and also quite a few advanced topi...
Debugging Table Reflow
reflow the most efficient tool to claim that html-table code is the victim and not the source of layout bugs is a frame reflow debug log. look there especially how the maxelement
size (mes) and desired
size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
... html-table code is the victim and not the source of layout bugs is a frame reflow debug log. look there especially how the maxelement
size (mes) and desired
size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
...re especially how the maxelement
size (mes) and desired
size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
...nymous=0 constraint=0 widths=360 540 -1 -1 -1 -1 -1 -1 -1 360 **end col dump** ***end table dump*** the first column has already the minimum content width, the table column can't shrink below that, the desired content width of 540 twips, that's the space to layout cell 1 without wrapping the text and the 1230 which correspond to the style="width:80px" at the first cell. at this step the final
size is 360 twips. min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final 360 540 1230 -1 -1 -1 -1 -1 -1 360 there was no change till the entrance of balancecolumnwidths balancecolumnwidths en count=1 ***start table dump*** mcolwidths=360 360 360 360 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 **start col dump** colindex=0 isanonymous=0 c...
source-editor.jsm
itor engine to use; this is "orion" by default. the source editor code module loads a module by the name "source-editor-<component>.jsm" and exposes its api as part of the sourceeditor object. sourceeditor.prefs.expand_tab "devtools.editor.expandtab" a boolean value that indicates whether or not to automatically expand tabs out to a series of spaces. sourceeditor.prefs.tab_
size "devtools.editor.tab
size" an integer value that specifies the number of spaces per tab. editor mode constants these constants are used to set the syntax highlighting mode for the editor by calling its setmode() method, or in the configuration object when first initializing the editor using its init() method. constant value description sourceeditor.modes.css ...
... constant value description sourceeditor.events.blur "blur" fired when the editor loses focus. sourceeditor.events.breakpoint_ch...
...aracters in the editor's text. getindentationstring returns a string containing the character or characters that are inserted when the user presses the tab key. string getindentationstring(); parameters none. return value if tabs are configured to be expanded into spaces (that is, the expandtab property is true), the returned string is comprised of the number of spaces specified by the tab
size property when the editor was initialized by calling init(). otherwise, the returned string is simply "\t". getlinecount() returns the number of lines of text in the editor. number getlinecount(); parameters none. return value the number of lines of text in the document being edited. getlinedelimiter() returns a string containing the character or characters that are used as the end of ea...
...nnotations gutter/ruler. see xxxxx for details. showlinenumbers boolean a boolean value indicating whether or not the line numbers gutter should be displayed. showoverviewruler boolean a boolean value indicating whether or not to show the overview gutter/ruler. this presents an overview of the current annotations in the editor, such as the breakpoints. tab
size number a number indicating how many spaces each tab character should occupy. this default can be overridden by the user preference named by sourceeditor.prefs.tab_
size. theme string a string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in theme constants, or you may provide your own css file reference. undol...
MathML Torture Test
<msup> <mo>∂</mo> <mn>2</mn> </msup> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> </mfrac> <mo>)</mo> </mrow> <msup> <mrow> <mo min
size="150%">|</mo> <mi>φ <!-- \varphi --></mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo>+</mo> <mi mathvariant="normal">i</mi> <mi>y</mi> <mo stretchy="false">)</mo> <mo min
size="150%">|</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> ...
... <msup> <mo>∂</mo> <mn>٢</mn> </msup> <mrow> <mo>∂</mo> <msup> <mi>𞸑</mi> <mn>٢</mn> </msup> </mrow> </mfrac> <mo>)</mo> </mrow> <msup> <mrow> <mo min
size="150%">|</mo> <mi>φ <!-- \varphi --></mi> <mo stretchy="false">(</mo> <mi>𞸎</mi> <mo>+</mo> <mi mathvariant="normal">i</mi> <mi>𞸑</mi> <mo stretchy="false">)</mo> <mo min
size="150%">|</mo> </mrow> <mn>٢</mn> </msup> <mo>...
... <msup> <mo>∂</mo> <mn>٢</mn> </msup> <mrow> <mo>∂</mo> <msup> <mi>𞸑</mi> <mn>٢</mn> </msup> </mrow> </mfrac> <mo>)</mo> </mrow> <msup> <mrow> <mo min
size="150%">|</mo> <mi>φ <!-- \varphi --></mi> <mo stretchy="false">(</mo> <mi>𞸎</mi> <mo>+</mo> <mi mathvariant="normal">i</mi> <mi>𞸑</mi> <mo stretchy="false">)</mo> <mo min
size="150%">|</mo> </mrow> <mn>٢</mn> </msup> <mo>...
... <msup> <mo>∂</mo> <mn>۲</mn> </msup> <mrow> <mo>∂</mo> <msup> <mi>y</mi> <mn>۲</mn> </msup> </mrow> </mfrac> <mo>)</mo> </mrow> <msup> <mrow> <mo min
size="150%">|</mo> <mi>φ <!-- \varphi --></mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo>+</mo> <mi mathvariant="normal">i</mi> <mi>y</mi> <mo stretchy="false">)</mo> <mo min
size="150%">|</mo> </mrow> <mn>۲</mn> </msup> <mo>=</mo> ...
BloatView
hild | 416 416| 1 1| the first line tells you the pid of the leaking process, along with the type of process. here's how you interpret the columns. the first, numerical column is the index of the leaking class. class - the name of the class in question (truncated to 20 characters). bytes per-inst - the number of bytes returned if you were to write
sizeof(class). note that this number does not reflect any memory held onto by the class, such as internal buffers, etc. (e.g. for nsstring you'll see the
size of the header struct, not the
size of the string contents!) bytes leaked - the number of bytes per instance times the number of objects leaked: (bytes per-inst) x (objects rem). use this number to look for the worst offenders. (should be zero!)...
...:40 2000 mozilla mozilla.txt tue aug 29 14:18:42 2000 yahoo yahoo.txt tue aug 29 14:19:32 2000 netscape netscape.txt tue aug 29 14:20:14 2000 the numbers do not include malloc 'd data such as string contents. click on a column heading to sort by that column. click on a class name to see details for that class. ...
...e (blank.txt), the difference between the first log file and the second (mozilla.txt), the difference between the second log file and the third (yahoo.txt), the difference between the third log file and the fourth (netscape.txt), and the total amount of memory allocated in the fourth log file. these columns provide an idea of how hard the memory allocator has to work, but they do not indicate the
size of the working set. the second set of columns, bytes allocated but not freed, shows the net memory gain or loss by subtracting the amount of memory freed from the amount allocated. the show objects and show references buttons show the same statistics but counting objects or addref'd references rather than bytes. comparing bloat logs you can also compare any two bloat logs (either those produc...
...clarationimpl 42984 0.67% 43488 0.67% this "delta report" shows the leak offenders, sorted from most leaks to fewest. the delta numbers show the percentage change between runs for the amount of leaks and amount of bloat (negative numbers are better!). the bloat number is a metric determined by multiplying the total number of objects allocated of a given class by the class
size. note that although this isn't necessarily the amount of memory consumed at any given time, it does give an indication of how much memory we're consuming. the more memory in general, the worse the performance and footprint. the percentage 99999.99% will show up indicating an "infinite" amount of leakage. this happens when something that didn't leak before is now leaking. bloatview and continuous...
PR_NetAddrToString
returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. you can retrieve the reason for the failure by calling pr_geterror. ...
... returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. you can retrieve the reason for the failure by calling pr_geterror. ...
... returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. you can retrieve the reason for the failure by calling pr_geterror. ...
... returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. you can retrieve the reason for the failure by calling pr_geterror. description the network address to be converted (addr) may be either an ipv4 or ipv6 address structure, assuming that the nspr library and the host system are both configured to utilize ipv6 addressing. if addr is an ipv4 address,
size needs to be at least 16. if addr is an ipv6 address,
size needs to be at least 46. ...
NSS Sample Code sample6
ech = ckm_aes_cbc_pad; slot = pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(ciphermech, null); didn't work. * error code: token is read-only. ...
... pk11_getinternalkeyslot(); /* slot = pk11_getbestslot(ciphermech, null); didn't work. * error code: token is read-only. ...
... { fprintf(stderr, "unable to find security device (err %d)\n", pr_geterror()); return; } keyid[0] = id; keyiditem.type = sibuffer; keyiditem.data = (void *)keyid; keyiditem.len =
sizeof(keyid[0]); /* note: key
size must be 0 for fixed key-length algorithms like des. ...
... pr_geterror()); return; } keyid[0] = id; keyiditem.type = sibuffer; keyiditem.data = (void *)keyid; keyiditem.len =
sizeof(keyid[0]); /* note: key
size must be 0 for fixed key-length algorithms like des. ...
nss tech note1
identical prototype : secstatus sec_asn1decodeitem(prarenapool *pool, void *dest, const sec_asn1template *t, secitem *item); secstatus sec_quickderdecodeitem(prarenapool* arena, void* dest, const sec_asn1template* templateentry, secitem* src); here is a description of the arguments : secitem* src† is a structure containing a pointer to the binary data to be decoded, as well as its
size. const sec_asn1template* templateentry is a pointer to one or more decoder templates. the number of required templates is determined by the type of the first template.when multiple templates are required, the pointer must point to a null-terminated array of templates. the syntax of these templates is identical for both decoders, except where noted. a "null template" is a template that is all z...
...hin the target component, typically the decoded sequence. sub† . this field does not apply to all template types. if kind contains the sec_asn1_inline or sec_asn1_pointer modifiers, then it must point to the required subtemplate. if kind contains the sec_asn1_xtrn or sec_asn1_dynamic modifiers, this is a pointer to a callback function that will dynamically return the required subtemplate.
size† . this field does not apply to all template types. it is only required for dynamically allocating memory for the structure if the template is being included from an asn.1 sequence or sequence of, or if dynamic allocation was requested from the parent template using the sec_asn1_pointer modifier here is a description of the various tags and modifiers that apply to the <tt style="color: rgb(0,...
...or sec_asn1_sequence or sec_asn1_choice definitions, which always need to be the first template in a template array of their own. sec_asn1_pointer: similar to sec_asn1_inline, except that the memory in the target will be allocated dynamically and a pointer to the dynamically allocated memory will be stored in the dest struct at the offset. this requires that the subtemplate contains a non-zero
size field. sec_asn1_group: can only be used in conjunction with a sec_asn1_set or sec_asn1_sequence. it tells the decoder that the component is an asn.1 set of or sequence of respectively. you can also use the macros sec_asn1_set_of and sec_asn1_sequence_of which define both the tag number and this modifier (but still need the method type, this may be a bug). sec_asn1_dynamic or sec_asn1_xtrn :...
...er in the top-level template. sec_quickderdecodeitem allows it at any nested sublevel. sec_asn1_choice: allows decoding of components that are of variable type. this must be the first template in a null-terminated array. the offset parameter specifies where to store the type identifier in the target data . subsequent templates specify a custom identifier for each possible component type in the
size parameter . sec_asn1_debug_break: makes the decoder assert when processing the template. this option is only supported with sec_quickderdecodeitem . it is useful to debug your templates or when writing new templates if they don't work. differences between sec_asn1decodeitem and sec_quickderdecodeitem the arena argument is required to be non-null for sec_quickderdecodeitem . with sec_asn...
nss tech note7
ned in "keythi.h". pk11symkey: a symmetric key (often called a session key), defined in "secmodt.h". these data types should be used as if they were opaque structures, that is, they should only be created by some nss functions and you always pass pointers to these data types to nss functions and never examine the members of these structures. the strength of an rsa key pair is measured by the
size of its modulus because given the modulus and public exponent, the best known algorithm for computing the private exponent is to factor the modulus. at present 1024 bit and 2048 bit rsa keys are the most common and recommended. to prevent denial-of-service attacks with huge public keys, nss disallows modulus
size greater than 8192 bits. how are these keys created in nss? there are a few possibi...
...ent integer -- e } the following sample code (error handling omitted for brevity) encodes a rsapublickey from a modulus and a public exponent and imports the public key into nss. struct myrsapublickey { secitem m_modulus; secitem m_exponent; } inpubkey; secitem derpubkey; seckeypublickey *pubkey; const sec_asn1template myrsapublickeytemplate[] = { { sec_asn1_sequence, 0, null,
sizeof(myrsapublickey) }, { sec_asn1_integer, offsetof(myrsapublickey,m_modulus), }, { sec_asn1_integer, offsetof(myrsapublickey,m_exponent), }, { 0, } }; prarenapool *arena; /* * point inpubkey.m_modulus and m_exponent at the data, and * then set their types to unsigned integers. */ inpubkey.m_modulus.type = siunsignedinteger; inpubkey.m_exponent.type = siunsignedinteger; arena = po...
...ec_asn1_integer, offsetof(myrsapublickey,m_modulus), }, { sec_asn1_integer, offsetof(myrsapublickey,m_exponent), }, { 0, } }; prarenapool *arena; /* * point inpubkey.m_modulus and m_exponent at the data, and * then set their types to unsigned integers. */ inpubkey.m_modulus.type = siunsignedinteger; inpubkey.m_exponent.type = siunsignedinteger; arena = port_newarena(der_default_chunk
size); sec_asn1encodeitem(arena, &derpubkey, &inpubkey, myrsapublickeytemplate); pubkey = seckey_importderpublickey(&derpubkey, ckk_rsa); port_freearena(arena, pr_false); public keys may be extracted from certificates. given a certficate (certcertificate *), use cert_extractpublickey() to extract its public key. the returned public key may be used after the certificate is destro...
... you are really trying to send a key, you should use pk11_pubwrapsymkey(). for a low level signature, use pk11_sign(). both of these functions do the pkcs #1 wrapping of the data. pk11_sign does not do the ber encoding of the hash (as is done in sgn_ functions). if you are trying to just send data, use pk11_pubencryptpkcs1. pk11_pubencryptraw is the lowest level function. it takes a modulus
size data and does a raw rsa operation on the data. it's used to support ssl2, which modifies the key encoding to include the ssl version number. pkcs #1 v1.5 block formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.
sslfnc.html
to.h. the number of values in the table is contained in an external 16-bit integer named ssl_numimplementedciphers. the macro ssl_is_ssl2_cipher can be used to determine whether a particular value is an ssl2 or an ssl3 cipher. warning: using the external array ssl_implementedciphers[] directly is deprecated. it causes dynamic linking issues at run-time after an update of nss because the actual
size of the array changes between releases. the recommended way of accessing the array is through the ssl_getimplementedciphers() and ssl_getnumimplementedciphers() accessors. by default, all ssl2 and 12 ssl3/tls cipher suites are enabled. however, this does not necessarily mean that they are all permitted. the ssl_cipherprefsetdefault function cannot override cipher suite policy settings that are ...
...licy settings that are not permitted; see ssl export policy functions for details. your application must call one of the export policy functions before it can perform any cryptographic operations. the tls_rsa_export1024_with_des_cbc_sha and tls_rsa_export1024_with_rc4_56_sha cipher suites are defined in rfc 2246. they work with both ssl3 and tls. they use symmetric ciphers with an effective key
size of 56 bits. the so-called 56-bit export browsers and servers use these cipher suites. the cipher suite numbers for the ssl_rsa_fips_with_3des_ede_cbc_sha and ssl_rsa_fips_with_des_cbc_sha cipher suites have been changed so that they are no longer "experimental" values. if an application attempts to set or set the policy or preference for one of the old fips cipher suite numbers, the library rec...
...t data that has been received but has not yet been decrypted. hence, if this function returns zero, that does not necessarily mean that a subsequent call to pr_read would block. ssl_securitystatus gets information about the security parameters of the current connection. syntax #include "ssl.h" secstatus ssl_securitystatus( prfiledesc *fd, int *on, char **cipher, int *key
size, int *secretkey
size, char **issuer, char **subject); parameters this function has the following parameters: fd the file descriptor for the ssl socket. on a pointer to an integer. on output, the integer will be one of these values: ssl_security_status_ off (= 0) ssl_security_status_ on_high (= 1...
...d string specifying the name of the cipher. for ssl v2, the string is one of the following: rc4 rc4-export rc2-cbc rc2-cbc-export des-cbc des-ede3-cbc for ssl v3, the string is one of the following: rc4 rc4-40 rc2-cbc rc2-cbc-40 des-cbc 3des-ede-cbc des-cbc-40 fortezza key
size a pointer to an integer. on output, the integer is the session key
size used, in bits. secretkey
size a pointer to an integer. on output, the integer indicates the
size, in bits, of the secret portion of the session key used (also known as the "effective key
size"). the secret key
size is never greater than the session key
size. issue...
NSS_3.12.3_release_notes.html
to enable) tells nss to allow shell-style wildcard patterns in certificates to match ssl server host names. this behavior was the default before nss 3.12.3. the new behavior conforms to rfc 2818. ...
... nss_use_alg_in_cms_signature nss_use_alg_reserved support for the watcom c compiler is removed the file watcomfx.h is removed. bugs fixed the following bugs have been fixed in nss 3.12.3. bug 159483: cert name matching: rfc 2818 vs. backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro b
size on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 380784: pk11mode in non fips mode failed. bug 394077: libpkix need to return revocation status of a cert bug 412468: modify certutil bug 417092: modify p...
... bug 472319: vfychain validates chain even if revoked certificate. bug 472749: softoken permits aes keys of any length to be created bug 473147: pk11mode tests fails on aix when using share...
...o coreconf. bug 478724: nss build fails on windows since 20090213.1 nightly build. bug 478931: object leak in pkix_list_mergelists function bug 478994: allow softoken's fork check to be disabled bug 479029: ocsp response signature cert found invalid if issuer is trusted only for ssl bug 479601: wrong type (utf8 string) for email addresses in subject by cert_asciitoname bug 480142: use
sizeof on the correct type of ckc_x509 in lib/ckfw bug 480257: ocsp fails when response > 1k byte bug 480280: the cka_ec_point pkcs#11 attribute is encoded in the wrong way: missing encapsulating octet string bug 480442: remove (empty) watcomfx.h from nss bug 481216: fix specific spelling errors in nss bug 482702: ocsp test with revoked ca cert validated as good. bug 483113: add environmen...
JS_CompileScriptForPrincipals
obsolete since jsapi 28this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. compile a security-enabled script for execution. ...
...y time. try to avoid using it. compile a security-enabled script for execution. ...
...cipals, const char *src,
size_t length, const char *filename, unsigned int lineno); jsscript * js_compileucscriptforprincipals(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src,
size_t length, const char *filename, unsigned int lineno); jsobject * js_compilescriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *src,
size_t length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 jsobject * js_compileucscriptforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const jschar *src,
size_t length, const char *filename, unsigned int lineno, jsversion version); // obsoleted since jsapi 19 name type description cx ...
...ipt. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object with which the script is associated. principals jsprincipals * pointer to the structure holding the security information for this script. src const char * or const jschar * string containing the script to compile. length
size_t the length of src, in characters. filename const char * name of file or url containing the function. used to report filename or url in error messages. lineno unsigned int line number. used to report the offending line in the file or url if an error occurs. version jsversion javascript version for the script. description js_compilescriptfor...
JS_GetGCParameter
r_idle_collection_percent, jsgc_min_nursery_bytes, jsgc_min_last_ditch_gc_period, } jsgcparamkey; value (c++/js shell) description jsgc_max_bytes / "maxbytes" maximum nominal heap before last ditch gc. jsgc_max_malloc_bytes / "maxmallocbytes" number of js_malloc bytes before last ditch gc. jsgc_max_nursery_bytes / "maxnurserybytes" maximum
size the nursery may grow to, or 0 to disable generational gc. jsgc_min_nursery_bytes / "minnurserybytes" minimum
size the nursery may shrink to. jsgc_bytes / "gcbytes" amount of bytes allocated by the gc. jsgc_number / "gcnumber" number of times gc has been invoked. includes both major and minor gc. jsgc_mode / "mode" select gc mode: jsg...
... generational gc, see jsgc_max_nursery_bytes jsgc_unused_chunks / "unusedchunks" number of cached empty gc chunks. jsgc_total_chunks / "totalchunks" total number of allocated gc chunks. jsgc_slice_time_budget / "slicetimebudget" max milliseconds to spend in an incremental gc slice. 0 for infinite. jsgc_mark_stack_limit / "markstacklimit" maximum
size the gc mark stack can grow to (units: entries). jsgc_high_frequency_time_limit / "highfrequencytimelimit" gcs less than this far apart in time will be considered 'high-frequency gcs'. jsgc_high_frequency_low_limit / "highfrequencylowlimit" controls for dynamic heap growth. when the gc is in "high frequency" mode (see above) then, the heap will be allowed to grow betwe...
...elimit" gcs less than this far apart in time will be considered 'high-frequency gcs'. jsgc_high_frequency_low_limit / "highfrequencylowlimit" controls for dynamic heap growth. when the gc is in "high frequency" mode (see above) then, the heap will be allowed to grow between collections according to these four parameters. see zoneheapthreshold::computezoneheapgrowthfactorforheap
size in gc.cpp for the details. the first two parameters are in mb and the remaining two are in percentage of heap
size. jsgc_high_frequency_high_limit / "highfrequencyhighlimit" jsgc_high_frequency_heap_growth_max / "highfrequencyheapgrowthmax" jsgc_high_frequency_heap_growth_min / "highfrequencyheapgrowthmin" jsgc_low_frequency_heap_growth / "lowfrequency...
...tage is fixed at 300%. if true, it is determined based on whether gcs are high- or low- frequency. jsgc_dynamic_mark_slice / "dynamicmarkslice" if true, high-frequency gcs will use a longer mark slice. jsgc_allocation_threshold / "allocationthreshold" lower limit after which we limit the heap growth. the heap will be collected if it is greater than: max(allocthreshold, last
size) * thresholdfactor, this establishes allocthreshold as a baseline or default heap
size. jsgc_allocation_threshold_factor / "allocationthresholdfactor" these thresholds (as percentages) are compared with the zone threshold (above) to decide when to begin an incremental collection. jsgc_allocation_threshold_factor_avoid_interrupt is used when a gc is already in progress for other z...
Shell global objects
ys, meant only for testing; one shell principal subsumes another if its set bits are a superset of the other's. thus, a principal of 0 subsumes nothing, while a principals of ~0 subsumes all other principals. the absence of a principal is treated as if its bits were 0xffff, for subsumption purposes. if this property is omitted, supply no principal. createmappedarraybuffer(filename, [offset, [
size]]) create an array buffer that mmaps the given file. addpromisereactions(promise, onresolve, onreject) calls the js::addpromisereactions jsapi function with the given arguments. getmaxargs() return the maximum number of supported args for a call. objectemulatingundefined() return a new object obj for which typeof obj === "undefined", obj == null and obj == undefined (and vice versa for !=)...
...wassertions() enables sps instrumentation and corresponding assertions, with slow assertions enabled. disablespsprofiling() disables sps instrumentation islatin1(s) return true iff the string's characters are stored as latin1. stackpointerinfo() return an int32 value which corresponds to the offset of the latest stack pointer, such that one can take the differences of 2 to estimate a frame-
size. entrypoints(params) carry out some jsapi operation as directed by params, and return an array of objects describing which javascript entry points were invoked as a result. params is an object whose properties indicate what operation to perform. here are the recognized groups of properties: { function } call the object params.function with no arguments. { object, property } fetch the ...
...partment, and run it there. backtrace() dump out a brief backtrace. getbacktrace([options]) return the current stack as a string. takes an optional options object, which may contain any or all of the boolean properties options.args - show arguments to each function options.locals - show local variables in each frame options.thisprops - show the properties of the this object of each frame byte
size(value) return the
size in bytes occupied by value, or undefined if value is not allocated in memory. byte
sizeofscript(f) return the
size in bytes occupied by the function f's jsscript. setimmutableprototype(obj) try to make obj's [[prototype]] immutable, such that subsequent attempts to change it will fail. return true if obj's [[prototype]] was successfully made immutable (or if it already ...
...if obj is given, schedule a gc of...
XPCOM array guide
e? do not use nsisupportsarray; it is deprecated. does your array need to be scriptable? if so, use nsiarray. example: an array attribute in an idl file would be nsiarray. will your array store non-refcounted objects and need automatic resizing? if so, use nstarray<t>. example: an array of integers or an array of strings. will your array store non-refcounted objects and be a fixed
size? if so, just use a native c++ array unless you need the enumeration options on nstarray<t>. example: an array of error message static const char* pointers. are all the things you are storing interface pointers to instances of the same interface? if so, use nscomarray. example: a content node's list of nsicontent children. otherwise use nsiarray and make liberal use of queryelementat()...
...aarray, i); element->observe(); } } passing as a parameter since nsiarray is an xpcom object, it should be passed as a pointer. to distinguish between read-only arrays and writable arrays, you should make sure to pass a nsiarray or nsimutablearray as appropriate. ...
...ement> void getfirstobject(nsielement** aresult) { *aresult = melements[0]; ns_addref(*aresult); } passing as a parameter when passing nscomarray<t> among functions, the convention is to pass by reference. also be sure to use const if you want to enforce that the array is read-only. ...
...default value. it returns the underlying pointer type or the null pointer if the index is out of bounds. passing as a parameter when passing nstarray<t> among functions, the convention is to pass by reference. also be sure to use const if you want to enforce that the array is read-only. here is an example with a read-only and a writable array: // array is read-only because of const void print
size(const nstarray<nselement>& elements) { printf("there are %d elements.\n", elements.length()); } // no const, so we can modify the array void tweakarray(nstarray<nselement>& elements, const nselement& newelement) { elements.removeelementat(0); elements.appendelement(newelement); } in-place enumeration there are no enumerator objects that work on an nstarray<t>. enumerator...
XPCOM Stream Guide
xinputstream @mozilla.org/io/multiplex-input-stream;1 nsimultiplexinputstream .appendstream(stream) .insertstream(stream, index) buffered read ahead in the underlying stream into a buffer, so that calls to the underlying stream are minimized. nsbufferedinputstream @mozilla.org/network/buffered-input-stream;1 nsibufferedinputstream .init(stream, buffer
size) binary read binary data from the underlying stream, in "big-endian" order. nsbinaryinputstream @mozilla.org/binaryinputstream;1 nsibinaryinputstream .setinputstream(stream) object read a nsisupports object from the underlying stream. nsbinaryinputstream @mozilla.org/binaryinputstream;1 nsiobjectinputstream (inherits from nsibinaryinputstream) ...
... object read a nsisupports object from the underlying stream. nsbinaryinputstream @mozilla.org/binaryinputstream;1 nsiobjectinputstream (inherits from nsibinaryinputstream) converter convert unicode characters from an underlying stream. nsconverterinputstream @mozilla.org/intl/converter-input-stream;1 nsiconverterinputstream .init(stream, charset, buffer
size, replacechar) mime separate headers from data. nsmimeinputstream @mozilla.org/network/mime-input-stream;1 nsimimeinputstream .setdata(stream) similarly, there are complex output streams which build from primitive output streams: complex output stream types type purpose native class contract id interface how to bind to a primitive output str...
...utput stream types type purpose native class contract id interface how to bind to a primitive output stream buffered store data in a buffer until the buffer is full or the stream closes. then, write that data to the underlying stream. nsbufferedoutputstream @mozilla.org/network/buffered-output-stream;1 nsibufferedoutputstream .init(stream, buffer
size) binary write binary data to the underlying stream, in "big-endian" order. nsbinaryoutputstream @mozilla.org/binaryoutputstream;1 nsibinaryoutputstream .setoutputstream(stream) object write an nsisupports object to the underlying stream. nsbinaryoutputstream @mozilla.org/binaryoutputstream;1 nsiobjectoutputstream (inherits from nsibinaryoutputstream...
...orts object to the underlying stream. nsbinaryoutputstream @mozilla.org/binaryoutputstream;1 nsiobjectoutputstream (inherits from nsibinaryoutputstream) converter write to an underlying stream with automatic conversion of unicode characters. nsconverteroutputstream @mozilla.org/intl/converter-output-stream;1 nsiconverteroutputstream .init(stream, charset, buffer
size, replacechar) additional stream interfaces the nsilineinputstream interface supports a .readline() method for reading a single line from an input stream. the nsfileinputstream and nspartialfileinputstream classes implement this interface. (xxx nsiunicharinputstream interface) (xxx nsiunicharlineinputstream interface) (xxx nsisearchableinputstream interface) stream converters (tbd:...
IAccessibleTable2
lumncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr description ); hresult selectcolumn([in] long column ); [propget] hresult selectedcells([out,
size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); [propget] hresult selectedcolumns([out,
size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [propget] hresult selectedrows([out,
size_is(, nrows)] long selectedrows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] lon...
...lumn is selected. if any of the cells in the selected column span additional columns, the cells in those columns are also selected. hresult selectcolumn( [in] long column ); parameters column 0 based index of the column to be selected. return value e_invalidarg if bad [in] passed. s_ok. selectedcells() returns a list of accessibles currently selected. [propget] hresult selectedcells( [out,
size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); parameters cells pointer to an array of references to selected accessibles. the array is allocated by the server. free it with cotaskmemfree. nselectedcells the number of accessibles returned; the
size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectedcolum...
...f references to selected accessibles. the array is allocated by the server. free it with cotaskmemfree. nselectedcells the number of accessibles returned; the
size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectedcolumns() returns a list of column indexes currently selected (0 based). [propget] hresult selectedcolumns( [out,
size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); parameters selectedcolumns a pointer to an array of column indexes of selected columns (each index is 0 based). the array is allocated by the server. free it with cotaskmemfree. ncolumns the number of column indexes returned; the
size of the returned array. return value s_false if there are none, [out] values are null and 0 respect...
...exes of selected columns (each index is 0 based). the array is allocated by the server. free it with cotaskmemfree. ncolumns the number of column indexes returned; the
size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectedrows() returns a list of row indexes currently selected (0 based). [propget] hresult selectedrows( [out,
size_is(, nrows)] long selectedrows, [out] long nrows ); parameters selectedrows an array of row indexes of selected rows (each index is 0 based), allocated by the server. free it with cotaskmemfree. nrows the number of row indexes returned; the
size of the returned array. return value s_false if there are none, [out] values are null and 0 respectively. s_ok. selectrow() selects a row and unselec...
IAccessibleTableCell
her-licenses/ia2/accessibletablecell.idlnot scriptable this interface gives access to the cells of a two-dimensional table. ...
...the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumn...
...pied by this cell accessible. the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell. return value s_ok. columnheadercells() returns the column headers as an array of cell accessibles. [propget] hresult columnheadercells( [out,
size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); parameters cellaccessibles pointer to an array of references to cell accessibles. the array is allocated by the server. free it with cotaskmemfree. ncolumnheadercells the number of accessibles returned; the
size of the returned array. return value s_false if there is no header, [out] values are null and 0 r...
...cates if the specified cell is selected. return value s_ok. rowextent() returns the number of rows occupied by this cell accessible. [propget] hresult rowextent( [out] long nrowsspanned ); parameters nrowsspanned returns the row extent of the specified cell. return value s_ok. rowheadercells() returns the row headers as an array of cell accessibles. [propget] hresult rowheadercells( [out,
size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); parameters cellaccessibles pointer to an array of references to cell accessibles. the array is allocated by the server. free it with cotaskmemfree. nrowheadercells the number of accessibles returned; the
size of the returned array. return value s_false if there is no header, [out] values are null and 0 respective...
amIWebInstaller
sions/amiwebinstaller.idlscriptable this interface is used to allow web pages to start installing add-ons. ...
...ce is used to allow web pages to start installing add-ons. ...
...d-ons. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean installaddonsfromwebpage(in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array,
size_is(ainstallcount)] in wstring auris, [array,
size_is(ainstallcount)] in wstring ahashes, [array,
size_is(ainstallcount)] in wstring anames, [array,
size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods installaddonsfromwebpage() install...
...nt); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow. methods installaddonsfromwebpage() installs an array of add-ons at the request of a webpage. boolean installaddonsfromwebpage( in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array,
size_is(ainstallcount)] in wstring auris, [array,
size_is(ainstallcount)] in wstring ahashes, [array,
size_is(ainstallcount)] in wstring anames, [array,
size_is(ainstallcount)] in wstring aicons, in amiinstallcallback acallback, optional in pruint32 ainstallcount optional ); parameters amimetype the mimetype for the add-ons. awindow the window installing the add-ons. ar...
imgIEncoder
modules/libpr0n/public/imgiencoder.idlscriptable please add a summary to this article. ...
...x 3) method overview void addimageframe( [array,
size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array,
size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions); void startimageencode(in pruint32 width, in pruint32 height, in pruint32 inputformat, in astring outputoptions); constants possible values for input format (note that not all image formats support saving alpha channels):...
...-- default: "source" how to render the new frame on the canvas. see apng spec. xoffset=# -- default: "0" yoffset=# -- default: "0" where to draw the frame, relative to the canvas. jpeg: ----- quality=# -- default: "92" quality of compression, 0-100 (worst-best). quality >= 90 prevents down-sampling of the color channels. methods addimageframe() void addimageframe( [array,
size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions ); parameters data list of bytes in the format specified by inputformat. length missing description width width in pixels. height height in pixels. stride the number of bytes per row in the image. normally (width*3) ...
...n frameoptions missing description encodeclipboardimage() obsolete since gecko 1.9 (firefox 3) void encodeclipboardimage( in nsiclipboardimage aclipboardimage, out nsifile aimagefile ); parameters aclipboardimage missing description aimagefile missing description endimageencode() void endimageencode(); parameters none. initfromdata() void initfromdata( [array,
size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 inputformat, in astring outputoptions ); parameters data list of bytes in the format specified by inputformat. length missing description width width in pixels. height height in pixels. stride the number of bytes per row in the image. normally (width*3)...
mozIStorageStatement
read only. parameterco...
...read only. parametercount unsigne...
...read only. parametercount unsigned long number of parameters. read only. ...
... void bindnullparameter( in unsigned long aparamindex ); parameters aparamindex the zero-based numerical index for the parameter to be bound. this will be one less than the number used in the sql (<code>?1</code> maps to <code>0</code>, and so on). bindblobparameter() binds a blob parameter to the specified index. void bindblobparameter( in unsigned long aparamindex, [array,const,
size_is(avalue
size)] in octet avalue, in unsigned long avalue
size ); parameters aparamindex the zero-based numerical index for the parameter to be bound. this will be one less than the number used in the sql (<code>?1</code> maps to <code>0</code>, and so on). avalue to be bound to the specified index. avalue
size size of avalue. execution functions these functions are discussed in more ...
mozIStorageValueArray
constants constant value description value_type_null 0 null data type. value_type_integer 1 integer data type.
... constants constant value description value_type_null 0 null data type. value_type_integer 1 integer data type. val...
... constants constant value description value_type_null 0 null data type. value_type_integer 1 integer data type. value_type_float...
...g value for a null column has isvoid set to distinguish it from an empty string. astring getstring( in unsigned long aindex ); parameters aindex the zero-based numerical index for the column to get the data from. return value the string for the specified entry. getblob() obtains a blob from the specified index. void getblob( in unsigned long aindex, out unsigned long adata
size, [array,
size_is(adata
size)] out octet adata ); parameters aindex the zero-based numerical index for the column to get the data from. adata
size the
size of the returned array. return value the blob for the specified entry. getisnull() checks if given column index is null. boolean getisnull( in unsigned long aindex ); parameters aindex the zero-based numerical index for...
nsICacheEntryDescriptor
see nsicache for the definitions of the access modes and a thorough description of ...
...see nsicache for the definitions of the access modes and a thorough description of their corresponding me...
...des and a thorough description of their corresponding meanings. read only. cacheelement nsisupports get or set the cache data element. this will fail if the cache entry is stream based. the cache entry holds a strong reference to this object. the object will be released when the cache entry is destroyed. file nsifile get the disk file associated with the cache entry. read only. predicteddata
size print64 stores the content-length specified in the http header for this entry. checked before we write to the cache entry, to prevent ever taking up space in the cache for an entry that we know up front is going to have to be evicted anyway. see bug 588507. securityinfo nsisupports get or set security info on the cache entry for this descriptor. this fails if the storage policy is not store_in...
...lement nsiseekablestream. if opening an output stream to existing cached data, the data will be truncated to the specified offset. nsioutputstream openoutputstream( in unsigned long offset ); parameters offset write starting from this offset into the cached data. an offset beyond the end of the stream has undefined consequences. return value returns blocking, unbuffered output stream. setdata
size() this method sets the cache entry data
size. this will fail if the cache entry is stream based. void setdata
size( in unsigned long
size ); parameters
size the cache entry data
size. setexpirationtime() this method sets the time at which the cache entry should be considered invalid (in seconds since the epoch). void setexpirationtime( in pruint32 expirationtime ); parameters expirationti...
nsIConsoleService
o obtain the logged messages. ...
... obsolete sin...
... void unregisterlistener(in nsiconsolelistener listener); methods getmessagearray() to obtain an array of all logged messages. obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmessagearray( [array,
size_is(count)] out nsiconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages. count the number of messages in the array. if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script. void getmessagearray( [optional] out pruint32 count, ...
...siconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages. count the number of messages in the array. if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script. void getmessagearray( [optional] out pruint32 count, [retval, array,
size_is(count)] out nsiconsolemessage messages ); parameters count the number of messages in the array. if no messages are logged, this function will return a count of 0, but allocating a placeholder word for messages, showing as a 0-length array when called from the script. note: see the code samples below for how to call getmessagearray. logmessage() void logmessage( in nsiconsolemessage...
nsIEventListenerService
instance, use: var eventlistenerservice = components.classes["@mozilla.org/eventlistenerservice;1"] .getservice(components.interfaces.nsieventlistenerservice); universalxpconnect privileges are required to use this service. ...
...ervice); universalxpconnect privileges are required to use this service. ...
...ecified target. aeventtarget will be at index 0. the objects are the ones that would be used as event.currenttarget while dispatching an event to aeventtarget. note: some events, especially 'load', may actually have a shorter event target chain than what this methods returns. void geteventtargetchainfor( in nsidomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array,
size_is(acount)] out nsidomeventtarget aoutarray ); parameters aeventtarget the nsidomeventtarget for which to return the event target chain. acount on return, contains the number of elements in the returned array. aoutarray the array into which to store the event targets. getlistenerinfofor() returns an array of nsieventlistenerinfo objects describing ever...
...urned array. aoutarray the array into which to store the event targets. getlistenerinfofor() returns an array of nsieventlistenerinfo objects describing everyone listening to the specified event target. if aeventtarget doesn't have any listeners, this returns null. void getlistenerinfofor( in nsidomeventtarget aeventtarget, [optional] out unsigned long acount, [retval, array,
size_is(acount)] out nsieventlistenerinfo aoutarray ); parameters aeventtarget the nsieventtarget for which to obtain a list of listeners. acount on return, the number of returned listener descriptors. aoutarray an array of nsieventlistenerinfo objects describing the listeners. haslistenersfor() returns true if a event target has any listener for the given...
nsIFileView
/components/filepicker/public/nsifileview.idlscriptable this interface displays a list of files in a treebox. inherits from: nsisupports last changed in gecko 1.7 note: nsifileview is linux-only interface. it's not included in windows or mac builds. note: a quirk of the nsifileview is that it requires an appropriate treecols section in the tree tag, by default fileview will return the file
size in the column. if the treecol id is "filenamecolumn" fileview will return the file name, if the id is "lastmodifiedcolumn" it will return the date of last modification. currently no other file stats are implemented. the nsifileview provides a configuration interface to @mozilla.org/filepicker/fileview;1 , which also implements nsitreeview so that it can be passed as a tree view. implemented by: @...
...er. read only. selectedfiles nsiarray an nsiarray of selected files, which contains nsiarray instances. read only. showhiddenfiles boolean if true hidden files will be shown. showonlydirectories boolean if true only directory entries will be returned. sorttype short the current sort type in effect. read only. constants constant value description sortname 0 sort by file name. sort
size 1 sort by file
size. sortdate 2 sort by the date of the last modification. methods setdirectory() set the directory to be browsed. void setdirectory( in nsifile directory ); parameters directory the directory to be browsed. setfilter() set the filter to be applied to the file list, for example "*.jpg" would only return jpg files. void setfilter( in astring filterstring ); parameters ...
...* constants. reversesort true, results will be sorted in ascending order. ...
...aster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is
size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="true"/> <treecol id="lastmodifiedcolumn" label="date" flex="1"/> <treecol id="
size" label="
size" flex="1"/> </treecols> <treechildren/> </tree> <script> var dir="/home/"; //the directory to be opened var ftree = document.getelementbyid("ftree"); //the xul tree element var lfile = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); lfile.initwithpath(dir); // open the directory var fview = componen...
nsIHTMLEditor
sible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); 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 decreasefont
size(); 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 g...
...boolean adt, out boolean add); void getliststate(out boolean amixed, out boolean aol, out boolean aul, out boolean adl); astring getparagraphstate(out boolean amixed); nsidomelement getselectedelement(in astring atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefont
size(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ainputstring); void inserthtmlwithcontext(in astring ainputstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc...
...logs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63. nsidomelement createelementwithdefaults( in astring atagname ); parameters atagname the html tagname. special input value for links: use "href" to get a link node (an "a" tag with the "href" attribute set) return value the new element created. decreasefont
size() decrease font
size for text in selection by 1 html unit all existing text is scanned for existing <font
size> attributes so they will be decreased instead of inserting new <font> tag. void decreasefont
size(); parameters none. dodrag() transfers the relevant data (as appropriate) to a transferable so it can later be dropped. void dodrag( in nsidomevent aevent ); parameters aevent ...
...iner of the selection. nsidomelement getselectioncontainer(); parameters none. return value a dom element. ignorespuriousdragevent() used to suppress spurious drag/drop events to workaround bug 50703. do not use this method! it will go away after first release! void ignorespuriousdragevent( in boolean aignorespuriousdragevent ); parameters aignorespuriousdragevent increasefont
size() increase font
size for text in selection by 1 html unit all existing text is scanned for existing <font
size> attributes so they will be incremented instead of inserting new <font> tag. void increasefont
size(); parameters none. indent() document me! void indent( in astring aindent ); parameters aindent insertelementatselection() insert an element, which may have child nodes...
nsIInputStream
an exception when this method is called. that enables the caller to know the condition of the stream before attempting to read from it. if a stream is at end-of-file, but not closed, then this method returns 0 bytes available. note: some nsiinputstream implementations automatically close() when end-of-file is reached; others do not. ...
...his method returns 0 bytes available. note: some nsiinputstream implementations automatically close() when end-of-file is reached; others do not. note: this method should not be used to determine the total
size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire
size of the underlying data source. unsigned long available(); parameters none. return value number of bytes currently available in the stream, or pr_uint32_max if the
size of the stream exceeds pr_uint32_max. exceptions thrown <other-error> if the stream is closed due to some error condition. ns_base_stream_closed if the stream is closed normally. close() close the stream. this method...
... are ignored. void close(); parameters none. isnonblocking() boolean isnonblocking(); parameters none. return value true if stream is non-blocking. native code only!read this method copies data from the stream into a buffer. unsigned long read( in charptr abuf, in unsigned long acount ); parameters abuf the buffer into which the data from the stream is copied. acount the
size of the buffer, or the maximum number of bytes to copy from the stream. return value this method returns the number of bytes copied from the stream (may be less than acount). it returns 0 to indicate end-of-file. exceptions thrown <other-error> on failure. ns_base_stream_would_block indicates that reading from the input stream would block the calling thread for indeterminate amount of ti...
...ould_block indicates that reading from the input stream would block the calling thread for indeterminate amount of time. this exception may only be thrown if isnonblocking() returns true. example consume all data from an input stream using read(). nsresult consumestream(nsiinputstream* astream) { nsresult rv; uint32_t numread; char buf[512]; while (1) { rv = astream->read(buf,
sizeof(buf), &numread); if (ns_failed(rv)) { printf("### error reading stream: %x\n", rv); break; } if (numread == 0) break; // buf now contains numread bytes of data } return rv; } consume all data from an input stream using readsegments(). static ns_method appendsegment(nsiinputstream* astream, void* aclosure, ...
nsIMemory
xpcom/base/nsimemory.idlscriptable this interface represents a generic memory allocator. inherits from: nsisupports last changed in gecko 0.9.6 nsimemory is used to allocate and deallocate memory segments from a heap. the implementation is free to define the heap. ns_getmemorymanager returns the global nsimemory instance. method overview voidptr alloc(in
size_t
size); violates the xpcom interface guidelines void free(in voidptr ptr); violates the xpcom interface guidelines void heapminimize(in boolean immediate); boolean islowmemory(); deprecated since gecko 2.0 voidptr realloc(in voidptr ptr, in
size_t new
size); violates the xpcom interface guidelines methods alloc allocates a block of memory of a particular
size. voidp...
...nterface guidelines void free(in voidptr ptr); violates the xpcom interface guidelines void heapminimize(in boolean immediate); boolean islowmemory(); deprecated since gecko 2.0 voidptr realloc(in voidptr ptr, in
size_t new
size); violates the xpcom interface guidelines methods alloc allocates a block of memory of a particular
size. voidptr alloc( in
size_t
size ); parameters
size the
size of the block to allocate. return value if the memory cannot be allocated (because of an out-of-memory condition), null is returned. otherwise, it returns a pointer to the newly allocated memory segment. the result must be freed with a call to free() when it is no longer needed. free frees a previously allocated block of memory. void free( in voidpt...
...ll is returned. otherwise, it returns a pointer to the newly allocated memory segment. the result must be freed with a call to free() when it is no longer needed. free frees a previously allocated block of memory. void free( in voidptr ptr ); parameters ptr the address of the memory block to free. this may be null, in which case nothing happens. heapminimize() attempts to shrink the
size of the heap. a particular nsimemory instance may choose not to implement this method. void heapminimize( in boolean immediate ); parameters immediate if true, heap minimization will occur immediately if the call was made on the main thread. if false, the flush will be scheduled to happen when the app is idle. islowmemory determine if we are in a low-memory situation (what constitutes ...
...od was deprecated in gecko 2.0. if you need to monitor low memory conditions, you should watch for the low memory notifications "memory-pressure" notifications instead. boolean islowmemory(); parameters none. return value true if we are in a low-memory situation. otherwise false. note: from gecko 2.0 always returns false. see bug 592308. realloc() reallocates a block of memory to a new
size. voidptr realloc( in voidptr ptr, in
size_t new
size ); parameters ptr the address of the memory block to reallocate. this may be null, in which case realloc behaves like alloc(). new
size specifies the new
size in bytes of the block of memory to allocate. this may be 0, in which case realloc behaves like alloc(). return value null if the memory allocation fails. otherwise, it retur...
nsIMsgDBView
sgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex index); nsimsgdbview clonedbview(in nsimessenger amessengerinstance, in nsimsgwindow amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); void geturisforselection([array,
size_is(count)] out string uris, out unsigned long count); void getindicesforselection([array,
size_is(count)] out nsmsgviewindex indices, out unsigned long count); void loadmessagebymsgkey(in nsmsgkey amsgkey); void loadmessagebyviewindex(in nsmsgviewindex aindex); void loadmessagebyurl(in string aurl); void reloadmessage(); void reloadmessagewith...
...ating. used during folder loading. db nsimsgdatabase readonly: the current database of messages. supportsthreading boolean readonly: does the current database support threading? searchsession nsimsgsearchsession the current search session. removerowonmoveordelete boolean readonly: usinglines boolean readonly: use lines for
size. if false kb are used. methods open() opens a folder in the database. void open(in nsimsgfolder folder, in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder, in nsmsgviewflagstypevalue viewflags, out long count); parameters folder the nsimsgfolder to open. sorttype a nsmsgviewsorttypevalue designating the sort type...
... amsgwindow, in nsimsgdbviewcommandupdater acommandupdater); parameters amessengerinstance the nsimessenger to use in the clone. amsgwindow the nsimsgwindow to use in the clone. acommandupdater the nsimsgdbviewcommandupdater to use in the clone. geturisforselection() gets an arry of urls for all currently selected messages. ...
...each element of the array is an nsmsgviewindex which is defined as a unsigned long in mailnewstypes2.idl. count the number of indicies returned. ...
nsINavHistoryService
time atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(in nsinavhistoryquery aquery, in nsinavhistoryqueryoptions options); nsinavhistoryresult executequeries([array,
size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void querystringtoqueries(in autf8string aquerystring, [array,
size_is(aresultcount)] out nsinavhistoryquery aqueries, out unsigned long aresultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array,
size_is(aquerycount)] in nsinav...
...ptions options ); parameters aquery the query object. options the options object. return value returns a new result object. executequeries() this method is similar to executequery method. it executes an array of queries. all of the query objects are ored together. within a query, all the terms are anded together as in executequery method. nsinavhistoryresult executequeries( [array,
size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options ); parameters aqueries the queries object. aquerycount the count of queries. options the options object. return value returns a new result object. querystringtoqueries() this method converts a query uri-like string to an array of actual query objects for use to ex...
...ct. querystringtoqueries() this method converts a query uri-like string to an array of actual query objects for use to executequeries method. the output query array may be empty if there is no information. however, there will always be an options structure returned (if nothing is defined, it will just have the default values). void querystringtoqueries( in autf8string aquerystring, [array,
size_is(aresultcount)] out nsinavhistoryquery aqueries, out unsigned long aresultcount, out nsinavhistoryqueryoptions options ); parameters aquerystring the query uri-like string. aqueries the queries object. aresultcount the count of converted queries. options the options object. queriestoquerystring() this method converts a query into an equivalent string that can be persisted. in...
...t, out nsinavhistoryqueryoptions options ); parameters aquerystring the query uri-like string. aqueries the queries object. aresultcount the count of converted queries. options the options object. queriestoquerystring() this method converts a query into an equivalent string that can be persisted. inverse of querystringtoqueries method. autf8string queriestoquerystring( [array,
size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options ); parameters aqueries the queries object. aquerycount the count queries. options the options object. return value returns the converted query into an equivalent string query. addobserver() this method adds a history observer. if ownsweak is false, the history ser...
nsIPipe
xpcom/io/nsipipe.idlscriptable this interface represents an in-process buffer that can be read using nsiinputstream and written using nsioutputstream. inherits from: nsisupports last changed in gecko 1.6 method overview void init(in boolean nonblockinginput, in boolean nonblockingoutput, in unsigned long segment
size, in unsigned long segmentcount, in nsimemory segmentallocator); attributes attribute type description inputstream nsiasyncinputstream the pipe's input end, which also implements nsisearchableinputstream. read only. outputstream nsiasyncoutputstream the pipe's output end. read only. methods init() initialize this pipe. void init( in boolean nonblockingin...
... description inputstream nsiasyncinputstream the pipe's input end, which also implements nsisearchableinputstream. read only. outputstream nsiasyncoutputstream the pipe's output end. read only. methods init() initialize this pipe. ...
...passing pr_uint32_max here causes the pipe to have "infinite" space. ...
...passing pr_uint32_max here causes the pipe to have "infinite" space. this mode can be useful in some cases, but should always be used with caution. ...
nsIStringBundle
its from: nsisupports last changed in gecko 1.7 this interface is used by xul:stringbundle to retrieve strings. it is recommended that you use the methods of xul:stringbundle to access these functions unless necessary. alternatively, a string bundle can be created within a javascript context with nsistringbundleservice. ...
...mended that you use the methods of xul:stringbundle to access these functions unless necessary. alternatively, a string bundle can be created within a javascript context with nsistringbundleservice. ...
...rray. you may also use other formatting codes. you can only pass unicode strings in. the id should refer to a string in the bundle that uses %s, and the number of strings you pass must be the same here and in the properties file (that is you can't omit %1 and use only %2). do not try to use any other types. this uses nstextformatter::smprintf. wstring formatstringfromid( in long aid, [array,
size_is(length)] in wstring params, in unsigned long length ); parameters aid the id of the string to retrieve. params parameters to pass in to the string. length the length of the parameter list. return value returns the formatted string. formatstringfromname() returns a formatted string with the given key name from the string bundle, where each occurrence of %s (uppercase) is replac...
...ormatting codes, but can only pass unicode strings in. the name should refer to a string in the bundle that uses %s, and the number of strings you pass must be the same here and in the properties file (that is you can't omit %1 and use only %2). do not try to use any other types. this uses nstextformatter::smprintf to do the dirty work. wstring formatstringfromname( in wstring aname, [array,
size_is(length)] in wstring params, in unsigned long length ); parameters aname the name of the string to retrieve. params parameters to pass in to the string. length the length of the parameter list. return value returns the formatted string. getsimpleenumeration() nsisimpleenumerator getsimpleenumeration(); parameters none. return value returns a nsisimpleenumerator of all nsip...
nsIWebBrowserChrome
nds to the top-level, outermost window containing an embedded gecko web browser. inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void
sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome. the implementation should reflect the value of this attribute by hiding or showing its chrome appropriately. webbrowser nsiwebbrowser the currently loaded webbrowser. the browser chrome may be told to set t...
... status_script 1 flag for setstatus() status_script_default 2 flag for setstatus() status_link 3 flag for setstatus() chrome_default 1 value for the chromeflags attribute. chrome_window_borders 2 value for the chromeflags attribute. chrome_window_close 4 value for the chromeflags attribute. chrome_window_re
size 8 value for the chromeflags attribute. chrome_menubar 16 value for the chromeflags attribute. chrome_toolbar 32 value for the chromeflags attribute. chrome_locationbar 64 value for the chromeflags attribute. chrome_statusbar 128 value for the chromeflags attribute. chrome_personal_toolbar 256 value for the chromeflag...
...tribute. chrome_statusbar 128 value for the chromeflags attribute. chrome_personal_toolbar 256 value for the chromeflags attribute. chrome_scrollbars 512 value for the chromeflags attribute. chrome_titlebar 1024 value for the chromeflags attribute. chrome_extra 2048 value for the chromeflags attribute. chrome_with_
size 4096 specifically for use with nsiwindowcreator. chrome_with_position 8192 specifically for use with nsiwindowcreator. chrome_window_min 16384 represent special cases. chrome_window_popup 32768 represent special cases. chrome_window_raised 33554432 represent special cases. chrome_window_lowered 67108864 represent spe...
... long statustype, in wstring status ); parameters statustype indicates what is setting the text. status status string. null is an acceptable value meaning no status. showasmodal() shows the window as a modal window. void showasmodal(); parameters none. return value note: the function error code returned by this corresponds to the status value specified in exitmodaleventloop.
sizebrowserto() tells the chrome to
size itself such that the browser will be the specified
size. void
sizebrowserto( in long acx, in long acy ); parameters acx new width of the browser. acy new height of the browser. ...
Type conversion
ystruct.v.tostring()); // 'true' mystruct.v = 0; console.log(mystruct.v.tostring()); // 'false' mystruct.v = 10; // throws error mystruct.v = "a"; // throws error integer types target type source converted value ctypes.char16_t js string (only if its length == 1) src.charcodeat(0) any integer types js number (only if fits to the
size) src js boolean if src == true: 1 if src == false: 0 var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.char16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // "a" mystruct.v = true; console.log(mystruct.v.tostring()); // "\x01" mystruct.v = "x"; console.log(mystruct.v.tostring()); // "x" mystruct.v = "xx"; // throws ...
... ctypes.uint16_t ctypes.unsigned_short var mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = ctypes.int8_t(10); console.log(mystruct.v.tostring()); // 10 mystruct.v = ctypes.int32_t(10); // throws error float types target type source converted value any float types js number (only if fits to the
size) src pointer types target type source converted value any pointer types null nullptr ctypes.voidptr_t any pointer types src any array types src.addressofelement(0) ctypes.pointertype(t) ctypes.arraytype(t) src.addressofelement(0) ctypes.arraytype(t, n) src.addressofelement(0) var mystruct = ctype...
...ypes.bool("").tostring()); // 'ctypes.bool(false)' integer types target type source converted value any integer types js number except -infinity, infinity, nan c-style cast -infinity 0 infinity nan ctypes.int64 c-style cast ctypes.uint64 js string with base-10 or base-16 string (only if fits to the
size) parse src as base-10 or base-16 string console.log(ctypes.int32_t(infinity).tostring()); // 'ctypes.int32_t(0)' console.log(ctypes.int32_t("0xff").tostring())); // 'ctypes.int32_t(255)' console.log(ctypes.int32_t(ctypes.int64(10)).tostring()); // 'ctypes.int32_t(10)' pointer types target type source converted value any pointer types js num...
...string console.log(ctypes.int32_t(infinity).tostring()); // 'ctypes.int32_t(0)' console.log(ctypes.int32_t("0xff").tostring())); // 'ctypes.int32_t(255)' console.log(ctypes.int32_t(ctypes.int64(10)).tostring()); // 'ctypes.int32_t(10)' pointer types target type source converted value any pointer types js number (only if fits to the pointer
size) c-style cast ctypes.int64 (only if fits to the pointer
size) c-style cast console.log(ctypes.int32_t.ptr(0xfffffffff).tostring()); // 'ctypes.int32_t.ptr(ctypes.uint64("0xfffffffff"))' see also working with arraybuffers ...
Drawing and Event Handling - Plugins
rted on the x window system platform prior to gecko 1.9 alpha 7 (bug 137189). the npwindow structure when a plug-in is loaded, it is drawn into a target area. this target is either the windowed plug-in's native window, or the drawable of a windowless plug-in. the npwindow structure represents either the native window or a drawable. this structure contains information about coordinate position,
size, the state of the plug-in (windowed or windowless), and some platform-specific information. note: when a plug-in is drawn to a window, the plug-in is responsible for preserving state information and ensuring that the original state is restored. for windowless plug-ins, the browser calls the npp_setwindow method with an npwindow structure that represents a drawable. for windowed plug-ins, the ...
...indow method with an npwindow structure that represents a window. ...
...sing the windows api call dptolp when you output text. setting the window the browser calls the npp_setwindow function to set the window in which a plug-in draws or returns an error code. this window is valid for the life of the instance, or until npp_setwindow is called again with a different value. subsequent calls to npp_setwindow for a given instance usually mean that the window has been re
sized. if either window or window->window is null, the plug-in must not perform any additional graphics operations on the window and should free any associated resources. nperror npp_setwindow(npp instance, npwindow *window); the instance parameter represents the current plug-in. the window parameter is a pointer to the drawing target for the plug-in. for windowless plug-ins, the platform-specific...
...tely. however, the browser can create invisible instances for which npp_setwindow is never called and a window is never created. this happens when plug-ins are invoked with an html object element that has been hidden with css rules (see plug-in display modes in the introduction) or with an embed element whose hidden attribute has been set. the browser should call npp_setwindow again whenever the
size or position of the instance changes, passing it the same npwindow object each time, but with different values. the browser can also call npp_setwindow multiple times with different values for the window, including null. for example, if a user removes an instance from the page, the browser should call npp_setwindow with a window value of null. this value prevents the instance from drawing further...
Edit fonts - Firefox Developer Tools
other elements which have text content with fonts applied. they are system fallback fonts used when nothing from the font-family css declaration has been applied. fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics. ...
... which have text content with fonts applied. they are system fallback fonts used when nothing from the font-family css declaration has been applied. fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics. ...
...l controls for editing the fonts’ characteristics. for standard (static) fonts, you will be able to change the settings listed below
size the font-
size for the inspected element. this can be set using em, rem, %, px, vh, or vw units. you can select values using the slider or enter a numeric value directly into the text box. note: if you want to use a different unit such as pt for font-
size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu. changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained. example: if 1rem is equ...
...ained. example: if 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px. line height the line-height of the inspected element. this can be set using unitless, em, %, or px units. you can select values using the slider or enter a numeric value directly into the text box. changing the unit of measure changes the value relative to the font-
size setting. example: if the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px. weight the font-weight for the inspected element. you can select values using the slider or enter a numeric value directly into the text box. for non-variable fonts the slider ranges from 100 to 900 in increments of 100. note: for var...
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
also toggle the overlay on and off. flex item properties the flex items within the flex container are displayed as a numbered list in the flex items section. each entry displays the item's selector. hover over an element to highlight it on the page. ...
...ntainer are displayed as a numbered list in the flex items section. each entry displays the item's selector. hover over an element to highlight it on the page. ...
... displayed as a numbered list in the flex items section. each entry displays the item's selector. hover over an element to highlight it on the page. ...
...ws information about the calculations for the
size of the selected flex item: a diagram visualizing the sizing of the flex item content
size - the
size of the component without any restraints imposed on it by its parent flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink value when there is not enough space minimum
size (only appears when an item is clamped to its minimum
size) - the minimum content
size of a flex item when there is no more free space in the flex container final
size - the
size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis) at the top of the section is a drop-down list of all the items in the selecte...
AnalyserNode.getByteTimeDomainData() - Web APIs
the getbytetimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a uint8array (unsigned byte array) passed into it. if the array has fewer elements than the analysernode.fft
size, excess elements are dropped. if it has more elements than needed, excess elements are ignored. ...
...copies the current waveform, or time-domain, data into a uint8array (unsigned byte array) passed into it. if the array has fewer elements than the analysernode.fft
size, excess elements are dropped. if it has more elements than needed, excess elements are ignored. syntax const audioctx = new audiocontext(); const analyser = audioctx.createanalyser(); const dataarray = new uint8array(analyser.fft
size); // uint8array should be the same length as the fft
size analyser.getbytetimedomaindata(dataarray); // fill the uint8array with data returned from getbytetimedomaindata() parameters array the uint8array that the time domain data will be copied to. if the array has fewer elements than the analysernode.fft
size, excess elements are dropped. if it has more elements than needed, excess elements...
...ame and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). const audioctx = new (window.audiocontext || window.webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ... ...
...epeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). const audioctx = new (window.audiocontext || window.webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ... ...
AudioBufferSourceNode - Web APIs
width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke=...
..." fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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=...
...3" 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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" heigh...
...if there's no b...
AudioNode - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stro...
... description the audio routing graph each audionode has inputs and outputs, and mu...
...ile stereo audio has two channels. the web audio api will up-mix or down-mix the number of channels as required; check the web audio spec for details. for a list of all audio nodes, see the web audio api homepage. creating an audionode there are two ways to create an audionode: via the constuctor and via the factory method. ...
... audio nodes, see the web audio api homepage. creating an audionode there are two ways to create an audionode: via the constuctor and via the factory method. // constructor const analysernode = new analysernode(audioctx, { fft
size: 2048, maxdecibels: -25, mindecibels: -60, smoothingtimeconstant: 0.5, }); // factory method const analysernode = audioctx.createanalyser(); analysernode.fft
size = 2048; analysernode.maxdecibels = -25; analysernode.mindecibels = -60; analysernode.smoothingtimeconstant = 0.5; you are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors: all parameters can be set during construction time and don't need to be set individually. you can sub-class an audio node. while the actual processing ...
ByteLengthQueuingStrategy - Web APIs
the bytelengthqueuingstrategy interface of the the streams api provides a built-in byte length queuing strategy that can be used when constructing streams. constructor bytelengthqueuingstrategy() creates a new bytelengthqueuingstrategy object instance. properties none. methods bytelengthqueuingstrategy.
size() returns the given chunk’s bytelength property. ...
... living standard initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
... living standard initial definition. browser compatibility the compatibility table on this page is generated from structured data. ...
...is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). ...
CSS Painting API - Web APIs
ow this is used, consult using the css painting api. interfaces paintworklet programmatically generates an image where a css property expects a file. access this interface through css.paintworklet. paintworkletglobalscope the global execution context of the paintworklet. paintrenderingcontext2d implements a subset of the canvasrenderingcontext2d api. it has an output bitmap that is the
size of the object it is rendering to. paint
size returns the read-only values of the output bitmap's width and height. dictionaries paintrenderingcontext2dsettings a dictionary providing a subset of canvasrenderingcontext2d settings. examples to draw directly into an element's background using javascript in our css, we define a paint worklet using the registerpaint() function, tell the do...
...) method, then include the image we created using the css paint() function. ...
...g the css paint() function. ...
...our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx,
size, props, args) { const x = 0; const y =
size.height * 0.3; const blockwidth =
size.width * 0.33; const blockheight =
size.height * 0.85; const thecolor = props.get( '--boxcolor' ); const stroketype = args[0].tostring(); const strokewidth = parseint(args[1]); console.log(thecolor); if ( strokewidth ) { ctx.linewidth = strokewidth; } else { ctx.linewidth = 1.0; } if ( stroketype === 'stroke' ) { ctx.fillstyle = 'transparent'; ctx.strokestyle = ...
Using the CSS Typed Object Model - Web APIs
we iterate through the style map, creating a <dt> and <dd> for each property and value respectively. in browsers that support computedstylemap(), you'll see a list of all the css properties and values. in other browsers, you'll just see a link. did you realize how many default css properties a link had? update the javascript on l...
... // get the element we're inspecting const myelement = document.queryselector('p'); // get the table we'll be populating const stylestable = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-
size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextn...
... we didn't d...
... <button>styled button</button> // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // cssmathsum example let btnwi...
CharacterData - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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...
... characterdata.data is a domstring representing th...
...iddle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface. characterdata.data is a domstring representing the textual data contained in this object. characterdata.length read only returns an unsigned long representing the
size of the string contained in characterdata.data. nondocumenttypechildnode.nextelementsibling read only returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list. nondocumenttypechildnode.previouselementsibling read only returns the element immediately prior to the specified one in its parent's childr...
Comment - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#...
...ce" 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,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stro...
... constructor comment() returns a comment obje...
Element - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#d4dd...
...it implements the properties of parentnode, childnode, nondocum...
...tattribute() retrieves the value of the named attribute from the current node and returns it as an object. element.getattributenames() returns an array of attribute names from the current element. element.getattributens() retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an object. element.getboundingclientrect() returns the
size of an element and its position relative to the viewport. element.getclientrects() returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client. element.getelementsbyclassname() returns a live htmlcollection that contains all descendants of the current element that possess the list of classes given in the parameter. element.getelementsbytagname() ...
HTMLDocument - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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...
...onospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" str...
...you can find documentation for the member...
HTMLElement - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...nospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" strok...
...fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeigneleme...
HTMLImageElement.height - Web APIs
ght is defined depends on whether the image is being rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. ...
...ual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. example in this example, two different
sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the
sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. ...
...
sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the
sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <p>image height: <span class="
size">?</span>px (re
size to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w"
sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockima...
...x.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w"
sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = document.queryselector("img"); let output = document.queryselector(".
size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("re
size", updateheight); result this example may be easier to try out in its own window. specifications specification status comment html living standardthe definition of 'htmlimageelement.height' in that specificat...
HTMLImageElement.width - Web APIs
e width is defined depends on whether the image is being rendered to a visual medium or not. if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. ...
... visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. example in this example, two different
sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the
sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. ...
...t
sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px wide. further, the
sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <p>image width: <span class="
size">?</span>px (re
size to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. ...
...s="
size">?</span>px (re
size to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w"
sizes="(max-width: 400px) 200px, 400px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the window's load and re
size event handlers, in order to always provide this information. var clockimage = document.queryselector("img"); let output = document.queryselector(".
size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("re
size", updatewidth); result this example may be easier to try out in its own window. specif...
Timing element visibility with the Intersection Observer API - Web APIs
rgin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color. then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads). the wrapper establishes a css grid with two columns and two rows. ...
...fonts, and to use "aliceblue" as the background color. then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads). the wrapper establishes a css grid with two columns and two rows. the first column (
sized automatically based on its content) is used for the sidebar and the second column (which will be used for body content) is
sized to be at least the width of the contents of the column and at most all remaining available space. the first row will be used specially for the site header. the rows are
sized the same way as the columns: the first one is automatically
sized and the one uses the remaining space, but at least enough space to provide room for all elements within it. the wrapper's width is fixed at 700px so that i...
...lthough some other elements will need some adjustments made to their margins to get the spacing just right). the grid-row is set to 2, to place it alongside the site body. the content body speaking of the site's body: the main content of the site is kept in a <main> element. the following style is applied to that: main { grid-column: 2; grid-row: 2; margin: 0; margin-left: 16px; font-
size: 16px; } the primary feature here is that the grid position is set to place the body content in column 2, row 2. articles each article is contained in an <article> element, styled like this: article { background-color: white; padding: 6px; } article:not(:last-child) { margin-bottom: 8px; } article h2 { margin-top: 0; } this creates article boxes with a white background which float ...
... ads have the following initial styling. individual ads may customize the style somewhat, as we'll see later. .ad { height: 96px; padding: 6px; border-color: #555; border-style: solid; border-width: 1px; } .ad:not(:last-child) { margin-bottom: 8px; } .ad h2 { margin-top: 0; } .ad div { position: relative; float: right; padding: 0 4px; height: 20px; width: 120px; font-
size: 14px; bottom: 30px; border: 1px solid black; background-color: rgba(255, 255, 255, 0.5); } there's nothing magic in here. it's fairly basic css. tying it together with javascript that brings us to the javascript code which makes everything work. let's start with the global variables: let contentbox; let nextarticleid = 1; let visibleads = new set(); let previouslyvisibleads = null; l...
KeyboardEvent.code - Web APIs
svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables we'll be using. ship
size contains the
size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. moverate and turnrate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship,...
...and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls. let ship
size = { width: 30, height: 30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate = 5; let angle = 0; let spaceship = document.getelementbyid("spaceship"); next comes the function updateposition(). this function takes as input the distance the ship is to be moved, where positive is a forward movement and negative is a backward movement. this function computes the new po...
...); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform. ...
...; if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform. function refresh() { let x = position.x - (ship
size.width/2); let y = position.y - (ship
size.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("transform", transform); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle. window.addeventlistener("...
MediaTrackSupportedConstraints - Web APIs
s supported in the current environment. aspectratio a boolean value whose value is true if the aspectratio constraint is supported in the current environment. framerate a boolean value whose value is true if the framerate constraint is supported in the current environment. facingmode a boolean value whose value is true if the facingmode constraint is supported in the current environment. ...
... boolean value whose value is true if the aspectratio constraint is supported in the current environment. framerate a boolean value whose value is true if the framerate constraint is supported in the current environment. facingmode a boolean value whose value is true if the facingmode constraint is supported in the current environment. re
sizemode a boolean value whose value is true if the re
sizemode constraint is supported in the current environment. ...
... echocancellation a boolean value whose value is true if the echocancellation constraint is supported in the current environment. latency a boolean value whose value is true if the latency constraint is supported in the current environment. ...
... echocancellation a boolean value whose value is true if the echocancellation constraint is supported in the current environment. latency a boolean value whose value is true if the latency constraint is supported in the current environment. ...
Capabilities, constraints, and settings - Web APIs
pecific value for a setting most simply, each constraint may be a specific value indicating a desired value for the setting. for example: let constraints = { width: 1920, height: 1080, aspectratio: 1.777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video
size is desired, with the standard 16:9 aspect ratio. there's no guarantee that the resulting track will match any of these, but the user agent should do its best to match as many as possible. the prioritization of the properties is simple: if two properties' requested values are mutually exclusive, then the one listed first in the constraint set will be used. as an example, if the browser running th...
...f you can't, decide what to do at that point. see firefox bug 1179084, for example. applying constraints the first and most common way to use constraints is to specify them when you call getusermedia(): navigator.mediadevices.getusermedia({ video: { width: { min: 640, ideal: 1920 }, height: { min: 400, ideal: 1080 }, aspectratio: { ideal: 1.7777777778 } }, audio: { sample
size: 16, channelcount: 2 } }).then(stream => { videoelement.srcobject = stream; }).catch(handleerror); in this example, constraints are applied at getusermedia() time, asking for an ideal set of options with fallbacks for the video. you can specify one or more media input device ids to establish restrictions on which input sources are allowed. to collect a list of the available devices, y...
...div class="button" id="applybutton"> apply constraints </div> </div> <video id="video" autoplay></video> <div class="button" id="stopbutton"> stop video </div> <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: 150px; border: 1px solid black; font-
size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10px; width: 600px; } .trackrow { height: 200px; } .leftside { float: left; width: calc(calc(100%/2) - 10px); } .rightside { float: right; width: calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; }...
...t's take a look at the javascript code that makes everything work. defaults and variables first we have the default constraint sets, as strings. these strings are presented in editable <textarea>s, but this is the initial configuration of the stream. let videodefaultconstraintstring = '{\n "width": 320,\n "height": 240,\n "framerate": 30\n}'; let audiodefaultconstraintstring = '{\n "sample
size": 16,\n "channelcount": 2,\n "echocancellation": false\n}'; these defaults ask for a pretty common camera configuration, but don't insist on any property being of special importance. the browser should do its best to match these settings but will settle for anything it considers a close match. then we initialize the variables which will hold the mediatrackconstraints objects for the video an...
OfflineAudioContext - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" str...
...ll="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#...
... properties also inherits properties from its parent interface, bas...
...r="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance. properties also inherits properties from its parent interface, baseaudiocontext. offlineaudiocontext.length read only an integer representing the
size of the buffer in sample-frames. event handlers offlineaudiocontext.oncomplete is an eventhandler called when processing is terminated, that is when the complete event (of type offlineaudiocompletionevent) is raised, after the event-based version of offlineaudiocontext.startrendering() is used. methods also inherits methods from its parent interface, baseaudiocontext. offlineaudioconte...
ProcessingInstruction - Web APIs
ition: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#...
...ce" 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,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill...
...ext-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status ...
RTCSctpTransport - Web APIs
to access the underlying datagram transport layer security (dtls) transport over which sctp packets for all of an rtcpeerconnection's data channels are sent and received. you don't create rtcsctptransport objects yourself; instead, you get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property. ...
...ansport over which sctp packets for all of an rtcpeerconnection's data channels are sent and received. you don't create rtcsctptransport objects yourself; instead, you get access to the rtcsctptransport for a given rtcpeerconnection through its sctp property. possibly the most useful property on this interface is its maxmessage
size property, which you can use to determine the upper limit on the
size of messages you can send over a data channel on the peer connection. ...
... rtcsctptransport.stateread only a domstring enumerated value indicating the state of the sctp transport. ...
... rtcsctptransport.stateread only a domstring enumerated value indicating the state of the sctp transport. rtcsctptransport.transportread only an rtcdtlstransport object representing the dtls transport used for the transmission and receipt of data packets. ...
ScriptProcessorNode - Web APIs
criptprocessornode interface is an audionode audio-processing module that is linked to two buffers, one containing the input audio data, one containing the processed output audio data. an event, implementing the audioprocessingevent interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data. the
size of the input and output buffer are defined at the creation time, when the audiocontext.createscriptprocessor() method is called (both are defined by audiocontext.createscriptprocessor()'s buffer
size parameter). the buffer
size must be a power of 2 between 256 and 16384, that is 256, 512, 1024, 2048, 4096, 8192 or 16384. small numbers lower the latency, but large number may be necessary to avoid a...
...d at the creation time, when the audiocontext.createscriptprocessor() method is called (both are defined by audiocontext.createscriptprocessor()'s buffer
size parameter). the buffer
size must be a power of 2 between 256 and 16384, that is 256, 512, 1024, 2048, 4096, 8192 or 16384. small numbers lower the latency, but large number may be necessary to avoid audio breakup and glitches. if the buffer
size is not defined, which is recommended, the browser will pick one that its heuristic deems appropriate. number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" properties inherits properties from its parent, audionode. scriptprocessor...
...ined, which is recommended, the browser will pick one that its heuristic deems appropriate. number of inputs 1 number of outputs 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" properties inherits properties from its parent, audionode. scriptprocessornode.buffer
size read only returns an integer representing both the input and output buffer
size. its value can be a power of 2 value in the range 256–16384. methods no specific methods; inherits methods from its parent, audionode. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: audioprocess fired when an input bu...
...ull working example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffer
size of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffer
size); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.res...
Text - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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="#...
...ce" 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,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke=...
... properties inherits properties from its parent, characterdata. text.iselementcontentwhitespa...
TouchEvent - Web APIs
vent which is sent when the state of contacts with a touch-sensitive surface changes. this surface can be a touch screen or trackpad, for example. the event can describe one or more points of contact with the screen and includes support for detecting movement, 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. <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="x...
...tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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...
... properties this interface inherits properties from its parent, uievent and event. touchevent.altkey read only a bo...
Visual Viewport API - Web APIs
h zoom level of the device? current browsers vary in how they handle this. the visual viewport lets web developers solve this by positioning elements relative to what's shown on screen. to access a window's visual viewport, you can obtain a visualviewport object from the window.visualviewport property. the object includes a set of properties describing the viewport. it also adds two events, onre
size and onscroll, that fire whenever the visual viewport changes. these events allow you to position elements relative to the visual viewport that would normally be anchored to the layout viewport. accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport ...
...hat would normally be anchored to the layout viewport. accessing the api window.visualviewport read only a read-only reference to the window's visualviewport object. if this property doesn't exist, the api is unsupported. interfaces visualviewport represents the visual viewport for a given window. a window's visualviewport object provides information about the viewport's position and
size, and receives the re
size and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport. example the code below is based on the sample the specification, though it adds a few things that make it function better. it shows a function called viewporthandler(). when called it queries the offsetleft and height properties for values it uses in a css transla...
.... when called it queries the offsetleft and height properties for values it uses in a css translate() method. you invoke this function by passing it to both event calls. one thing that may not be clear in this example is the use of the pendingupdate flag and the call to requestanimationframe(). the pendingupdate flag serves to prevent multiple invocations of the transfrom that can occur when onre
size and onscroll fire at the same time. using requestanimationframe() ensures that the transform ocurrs before the next render. let pendingupdate = false; function viewporthandler(event) { if (pendingupdate) return; pendingupdate = true; requestanimationframe(() => { pendingupdate = false; var layoutviewport = document.getelementbyid('layoutviewport'); // since the bar is positi...
...yle.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('re
size', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
at. compressed image formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used. syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview? pixels); // additionally available in webgl 2: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, image
size, offset); void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active compressed texture. possible values: gl.texture_2d: a two-dimensional texture. gl.texture_cube_map_positive_x: positive x face for a cu...
...ture. gl.texture_cube_map_negative_z: negative z face for a cube-mapped texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the horizontal offset within the compressed texture image. yoffset a glint specifying the vertical offset within the compressed texture image. width a gl
sizei specifying the width of the compressed texture. height a gl
sizei specifying the height of the compressed texture. format a glenum specifying the compressed image format. compressed image formats must be enabled by webgl extensions before using this method. possible values: when using the webgl_compressed_texture_s3tc extension: ext.compressed_rgb_s3tc_dxt1_ext ext.compressed_...
... offset a glintptr specifying the offset in bytes from which to read from the buffer bound to gl.pixel_unpack_buffer. pixels an arraybufferview that be used as a data store for the compressed image data in memory. return value none. examples var ext = ( gl.getextension('webgl_compressed_te...
... offset a glintptr specifying the offset in bytes from which to read from the buffer bound to gl.pixel_unpack_buffer. pixels an arraybufferview that be used as a data store for the compressed image data in memory. return value none. examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc...
Scissor animation - Web APIs
var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrendering...
... position[1] -= velocity; // when the sqaure hits the bottom of the drawing buffer, // we override ...
...etinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").innerhtml = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold the
size and velocity of the square. var
size = [60, 60], velocity = 3.0; function drawanimation () { gl.scissor(position[0], position[1],
size[0] ,
size[1]); gl.clear(gl.color_buffer_bit); // every frame the vertical position of the square is // decreased, to create the illusion of movement. position[1] -= velocity; // when the sqaure hits the bottom of the drawing buffer, // we override it with new square of different color...
...creased, to create the illusion of movement. position[1] -= velocity; // when the sqaure hits the bottom of the drawing buffer, // we override it with new square of different color and // velocity. if (position[1] < 0) { // horizontal position chosen randomly, and vertical // position at the top of the drawing buffer. ...
WebGL model view projection - Web APIs
up the model in order to move it into the correct space, and to perform any other needed transforms on each point in the model. this applies not just to each vertex, but to every single point on every surface of the model as well. in this case, for every frame of the animation a series of scale, rotation, and translation matrices move the data into the desired spot in clip space. the cube is the
size of clip space (-1,-1,-1) to (1,1,1) so it will need to be shrunk down in order to not fill the entirety of clip space. this matrix is sent directly to the shader, having been multiplied in javascript beforehand. the following code sample defines a method on the cubedemo object that will create the model matrix. it uses custom functions to create and multiply matrices as defined in the mdn webgl ...
... operator. the results view on jsfiddle at this point the w value of the transformed point is still 1.0. the cube still doesn't have any perspective. the next section will take this setup and modify the w values to provide some perspective. exercises shrink down the box using the scale matrix and position it in different places within clip space. try moving it outside of clip space. re
size the window and watch as the box skews out of shape. add a rotatez matrix. divide by w an easy way to start getting some perspective on our model of the cube is to take the z coordinate and copy it over to the w coordinate. normally when converting a cartesian point to homogeneous it becomes (x,y,z,1), but we're going to set it to something like (x,y,z,z). in reality we want to make sure that ...
...e is facing the camera) and occlusion culling using hidden-surface determination (removing polygons which can't be seen because they're entirely blocked by polygons that are closer to the lens). perspective projection matrix up to this point, we've built up our own 3d rendering setup, step by step. however the current code as we've built it has some issues. for one, it gets skewed whenever we re
size our window. another is that our simple projection doesn't handle a wide range of values for the scene data. most scenes don't work in clip space. it would be helpful to define what distance is relevant to the scene so that precision isn't lost in converting the numbers. finally it's very helpful to have a fine-tuned control over what points get placed inside and outside of clip space. in the prev...
... and less in the scene. the objects are distorted much less by perspective and objects seem much closer to the camera aspectratio the scene's aspect ratio, which is equivalent to its width divided by its height. in these examples, that's the window's width divided by the window height. the introduction of this parameter finally solves the problem wherein the model gets warped as the canvas is re
sized and reshaped. nearclippingplanedistance a positive number indicating the distance into the screen to a plane which is perpendicular to the floor, nearer than which everything gets clipped away. this is mapped to -1 in clip space, and should not be set to 0. farclippingplanedistance a positive number indicating the distance to the plane beyond which geometry is clipped away. this is mapped to...
WheelEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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="#...
...ce" 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,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" str...
... properties this interface inherits properties from its ancestors, mouseevent, uievent, and event. wheelevent.deltaxr...
XMLDocument - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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...
...onospace" 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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stro...
... methods also inherits methods from...
::first-letter (:first-letter) - CSS: Cascading Style Sheets
the ::first-letter css pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). /* selects the first letter of a <p> */ p::first-letter { font-
size: 130%; } the first letter of an element is not always trivial to identify: punctuation that precedes or immediately follows the first letter is included in the match. punctuation includes any unicode character defined in the open (ps), close (pe), initial quote (pi), final quote (pf), and other punctuation (po) classes. some languages have digraphs that are always capitalized together, like the ij in dutch. in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (this is poorly supp...
...ties only a small subset of css properties can be used with the ::first-letter pseudo-element: all font properties : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-
size, font-
size-adjust, line-height and font-family all background properties : background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-
size, background-attachment, and background-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, p...
...m voluptua. at vero eos et accusam et justo duo dolores et ea rebum. stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-
size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters. html <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> <p>-the beginning of a special punctuation mark.</p> <p>_the ...
... working draft generalizes allowed properties to typesetting, text decoration, inline layout properties, opacity, and box-shadow. css text decoration module level 3the definition of 'text-shadow with ::first...
@media - CSS: Cascading Style Sheets
the not or only logical operators, the media type is optional and the all type will be implied. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthe
sizers. deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used. the aural type has been replaced by speech, which is similar. media features media features describe specific characteristics of the user agent, output device, or environme...
...e scripting detects whether scripting (i.e. javascript) is available added in media queries level 5. update how frequently the output device can modify the appearance of content added in media queries level 4. width width of the viewport including width of scrollbar accessibility concerns to best accommodate people who adjust a site's text
size, use ems when you need a <length> for your media queries. both em and px are valid units, but em works better if the user changes the browser text
size. also consider using level 4 media queries to improve the user's experience. for example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses. security because media que...
... : <mf-value><mf-boolean> = <mf-name><mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? ...
... = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? ...
Using CSS animations - CSS: Cascading Style Sheets
ch other for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> note: reload page to see the animation, or click the codepen button to see the animation in the codepen environment. adding another keyframe let’s add another keyframe to the previous example’s animation. ...
...dressed her in a languid, sleepy voice.</p> note: reload page to see the animation, or click the codepen button to see the animation in the codepen environment. adding another keyframe let’s add another keyframe to the previous example’s animation. let’s say we want the header’s font
size to increase as it moves from right to left for a while, then to decrease back to its original
size. ...
... to see the animation, or click the codepen button to see the animation in the codepen environment. adding another keyframe let’s add another keyframe to the previous example’s animation. let’s say we want the header’s font
size to increase as it moves from right to left for a while, then to decrease back to its original
size. ...
...ze to increase as it moves from right to left for a while, then to decrease back to its original
size. ...
Introduction to the CSS basic box model - CSS: Cascading Style Sheets
every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge. the content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. ...
...rea, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. its dimensions are the content width (or content-box width) and the content height (or content-box height). it often has a background color or background image. if the box-sizing property is set to content-box (default) and if the element is a block element, the content area's
size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. the padding area, bounded by the padding edge, extends the content area to include the element's padding. its dimensions are the padding-box width and the padding-box height. the thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and...
...adding-bottom, padding-left, and shorthand padding properties. the border area, bounded by the border edge, extends the padding area to include the element's borders. its dimensions are the border-box width and the border-box height. the thickness of the borders are determined by the border-width and shorthand border properties. if the box-sizing property is set to border-box, the border area's
size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. when there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). this default behavior can be altered with the background-clip css property. the margin area, bounded by the marg...
...et on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). this default behavior can be altered with the background-clip css property. the margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. its dimensions are the margin-box width and the margin-box height. the
size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties. when margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes. finally, note that for non-replaced inline elements, the amount of space taken up (the contribution to the height of the line) is determined by the line-height p...
CSS Fonts - CSS: Cascading Style Sheets
css fonts is a module of css that defines font-related properties and how font resources are loaded. it lets you define the style of a font, such as its family,
size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
...
size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
... bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. ...
...an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. ...
Layout using named grid lines - CSS: Cascading Style Sheets
in previous guides we’ve looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. in this guide we are going to look at how these two things work together when we use named lines. line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track
sizes. once you work through some examples it should become clearer and easier to work with. naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. to demonstrate i’ll use the simple layout created in the guide on line-based placement. this time i’ll create the grid using named...
... main main" "ft ft ft ft ft ft ft ft ft"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper > div.overlay { z-index: 10; grid-column: main-start / main-end; grid-row: hd-start / ft-end; border: 4px solid rgb(92,148,13); background-color: rgba(92,148,13,.4); color: rgb(92,148,13); font-
size: 150%; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> <div class="overlay">overlay</div> </div> given that we have this ability to position create lines from named areas and areas from named lines it is worth taking a little bit of time to plan your naming strategy whe...
... you will need to write out the track definition long-hand rather than using the repeat syntax, as you need to add the name in square brackets while defining the tracks. if you do use the repeat syntax you will end up with multiple lines that have the same name, however this can be very useful too. in this next example i am creating a grid with twelve equal width columns. before defining the 1fr
size of the column track i am also defining a line name of [col-start]. this means that we will end up with a grid that has 12 column lines all named col-start before a 1fr width column. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ff...
...1">i am placed from col-start line 1 to col-start 5</div> <div class="item2">i am placed from col-start line 7 spanning 3 lines</div> </div> if you take a look at this layout in the firefox grid highlighter you can see how the column lines are shown, and how our items are placed against these lines. the repeat syntax can also take a track list, it doesn’t just need to be a single track
size that is being repeated. the code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start. .wrapper { grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); } if your repeating syntax puts two lines next to each other then they will be merged, and create the same result as giving a line multiple na...
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the logical properties and values specification introduces flow-relative mappings for many of the properties and values in css. this article introduces the specification, and explains flow relative properties and values. why do we need logical properties? css traditionally has
sized things according to the physical dimensions of the screen. therefore we describe boxes as having a width and height, position items from the top and left, float things left, assign borders, margin, and padding to 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 follo...
..., the alignment continues to work in the same way. the inline dimension is now running vertically and the block dimension horizontally. the grid doesn't look the same however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow relative running of the text. if instead of the width property we use the logical property inline-
size, the component now works the same way no matter which writing mode it is displayed using. you can try this out in the live example below. change writing-mode from vertical-rl to horizontal-tb on .grid to see how the different properties change the layout. when working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, ...
...these run horizontally. the below diagram shows the inline and block directions in a horizontal writing mode: this diagram shows block and inline in a vertical writing mode: browser support logical properties and values can be thought of as a couple of groups in terms of current browser support. some of the properties are essentially mappings from the physical versions, for example inline-
size for width or margin-inline-start rather than margin-left. these mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on mdn you will see that edge is the only modern browser currently missing these. there are then a group of properties which do not have a direct mapping in terms of existing physical propertie...
...t once, like margins with the margin property. we would need some kind of modifier if we were to reuse margin for flow-relative properties. if you would like to read the suggestions or comment on them the relevant github issue is #1282. testing for browser support you can test for support of logical properties and values using feature queries. for example you could set a width, test for inline-
size and, if it is supported, set the width to auto and the inline-
size to the original width value. ...
CSS values and units - CSS: Cascading Style Sheets
le> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length, is allowed as a value for a property, this is described as the <length> type. there are two types of lengths in css: relative and absolute. relative length units specify a length in relation to something else. for example, em is relative to the font
size on the element and vh is relative to the viewport height. relative length units unit relative to em font
size of the element. ex x-height of the element's font. cap cap height (the nominal height of capital letters) of the element's font. ch average character advance of a narrow glyph in the element’s font, as represented by ...
... cap cap height (the nominal height of capital letters) of the element's font. ch average character advance of a narrow glyph in the element’s font, as represented by the “0” (zero, u+0030) glyph. ic average character advance of a full width glyph in the element’s font, as represented by the “水” (cjk water ideograph, u+6c34) glyph. rem font
size of the root element. lh line height of the element. rlh line height of the root element. vw 1% of viewport's width. vh 1% of viewport's height. vi 1% of viewport's
size in the root element's inline axis. vb 1% of viewport's
size in the root element's block axis. vmin 1% of viewport's smaller dimension. vm...
...for example, mm is a physical millimeter, 1/10th of a centimeter. ...
...the type <frequency>. it accepts the following values. unit name description hz hertz represents the number of occurrences per second. khz kilohertz a kilohertz is 1000 hertz. 1hz, which can also be written as 1hz or 1hz, is one cycle per second. resolution unit resolution units are represented by the type <resolution>. they represent the
size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dppx, x dots per px unit. percentages a <percentage> is a type that represents a fraction of some ot...
Animatable CSS properties - CSS: Cascading Style Sheets
erties are: -moz-outline-radius -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright -webkit-line-clamp -webkit-text-fill-color -webkit-text-stroke -webkit-text-stroke-color all backdrop-filter background background-color background-position background-
size block-
size border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius ...
...lor border-top-left-radius border-top-right-radius border-top-width border-width bottom box-shadow caret-color clip clip-path color column-count column-gap column-rule column-rule-color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font font-
size font-
size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-
size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing ...
... inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-border mask-position mask-
size max-block-
size max-height max-inline-
size max-lines max-width min-block-
size min-height min-inline-
size min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order outline outline-color outline-offset outline-width padding ...
...croll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-
size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top transform transform-origin translate vertical-align visibility width word-spacing z-index zoom ...
Cubic Bezier Generator - CSS: Cascading Style Sheets
th: 40px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_
size = 5; //
size of 0.1 tick on the rulers var scaling; //limitation: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when can...
...text('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.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.close...
... // 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)) { ctx.moveto(lx(i), 2 * basic_scale_
size + cy(0)); ctx.fillte...
...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)) { 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.str...
align-content - CSS: Cascading Style Sheets
ine; align-content: first baseline; align-content: last baseline; /* distributed alignment */ align-content: space-between; /* distribute items evenly the first item is flush with the start, the last is flush with the end */ align-content: space-around; /* distribute items evenly items have a half-
size space on either end */ align-content: space-evenly; /* distribute items evenly items have equal space around them */ align-content: stretch; /* distribute items evenly stretch 'auto'-
sized items to fit the container */ /* overflow alignment */ align-content: ...
...e same. the empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container along the cross axis. the spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same. stretch if the combined
size of the items along the cross axis is less than the
size of the alignment container, any auto-
sized items have their
size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size exactly fills the alignment container along the cross axis. safe used alongside an alignment keyword. if the...
...width (or equivalent functionality), so that the combined
size exactly fills the alignment container along the cross axis. safe used alongside an alignment keyword. if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment keyword. regardless of the relative
sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. formal definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>where <baseline-pos...
... justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-
size: 30px; } select { font-
size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> ...
background-position - CSS: Cascading Style Sheets
on, and then a percentage of the resulting value is used as the direct offset from the left (or top) edge. ...
... area is centered in the container) -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coincident with the right container edge) -250px (left image edge 250px to the left of the container, in this example that puts the right edge of the 300px-wide image in the center of the container) it's worth mentioning that if your background-
size is equal to the container
size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero. you will need to offset using absolute values. formal definition initial value0% 0%applies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the
size of the background positioning a...
...to the container
size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero. you will need to offset using absolute values. formal definition initial value0% 0%applies toall elements. ...
...a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero. you will need to offset using absolute values. formal definition initial value0% 0%applies toall elements. ...
box-sizing - CSS: Cascading Style Sheets
a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default in the css box model, the width and height you assign to an element is applied only to the element's content box. if the element has any border or padding, this is then added to the width and height to arrive at the
size of the box that's rendered on the screen. this means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added. for example, if you have four boxes with width: 25%;, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container. the box-sizing...
...o the final rendered width, making the element wider than 100px. border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. if you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. this typically makes it much easier to
size elements. note: it is often useful to set box-sizing to border-box to layout elements. this makes dealing with the
sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. on the other hand, when using position: relative or position: absolute, use of box-sizing: content-box allows the positioning values to be relative to th...
... syntax the box-sizing property is specified as a single keyword chosen from the list of values below. values content-box this is the initial and default value as specified by the css standard. the width and height properties include the content, but does not include the padding, border, or margin. ...
...o make the element disappear. here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content. formal definition initial valuecontent-boxapplies toall elements that accept width or heightinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box examples box
sizes with content-box and border-box this example shows how different box-sizing values alter the rendered
size of two otherwise identical elements. html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /*...
clamp() - CSS: Cascading Style Sheets
frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. clamp(min, val, max) is resolved as max(min, min(val, max)) the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note that using clamp() for font
sizes, as in these examples, allows you to set a font-
size that grows with the
size of the viewport, but doesn't go below a minimum font-
size or above a maximum font-
size. it has the same effect as the code in fluid typography but in one line, and without the use of media queries. syntax the clamp() function takes three comma separated expressions as its parameter, in the order of minimum value, pre...
...yntax clamp( <calc-sum>#{3} )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples min, max, and clamp comparison in this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of the
sizes. the <body> element's width is set as min(1000px, calc(70% + 100px)). this means that the width will be set at 1000px, unless the result of calc(70% + 100px) is less than 1000px, in which case it will be set to that value instead. min() allows you set a maximum value. the <p> element's font-
size is set as max(1.2rem, 1.2vw). this means that the font-
size will be set at 1.2rem, unless the compu...
...ead. min() allows you set a maximum value. the <p> element's font-
size is set as max(1.2rem, 1.2vw). this means that the font-
size will be set at 1.2rem, unless the computed value of 1.2vw is greater than that of 1.2rem, in which case it will be set to that value instead. max() allows you set a minimum value, which in cases like this is useful for accessibility purposes. the <h1> element's font-
size is set as clamp(1.8rem, 2.5vw, 2.8rem). this means that the font-
size will be set at 1.8rem, until the computed value of 2.5vw becomes greater than that of 1.8rem. at this point, font-
size will be set at 2.5vw, until 2.5vw's computed value becomes greater than that of 2.8rem. at this point, the font-
size will be set at 2.8rem. clamp() allows you to set a minimum and maximum value. you find this ...
...llus at, pharetra quam. cras feugiat vulputate tortor at rhoncus. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. nam non felis quis sem lobortis sodales vel id libero. phasellus sit amet placerat lorem. </p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(70% + 100px)); } h1 { letter-spacing: 2px; font-
size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-
size: max(1.2rem, 1.2vw); } specifications specification status comment css values and units module level 4the definition of 'clamp()' in that specification. editor's draft initial definition. ...
contain - CSS: Cascading Style Sheets
this property is useful on pages that contain a lot of widgets that are all independent, as it can be used to prevent each widget's internals from having side effects outside of the widget's bounding-box. ...
...s internals from having side effects outside of the widget's bounding-box. note: if applied (with value: paint, strict or content), this property creates: a new containing block (for the descendants whose position property is absolute or fixed). a new stacking context. a new block formatting context. syntax /* keyword values */ contain: none; contain: strict; contain: content; contain:
size; contain: layout; contain: style; contain: paint; /* multiple keywords */ contain:
size paint; contain:
size layout paint; /* global values */ contain: inherit; contain: initial; contain: unset; the contain property is specified as either one of the following: using a single none, strict, or content keyword. using one or more of the
size, layout, style, and paint keywords in any order. v...
...contain property is specified as either one of the following: using a single none, strict, or content keyword. using one or more of the
size, layout, style, and paint keywords in any order. values none indicates the element renders as normal, with no containment applied. strict indicates that all containment rules except style are applied to the element. this is equivalent to contain:
size layout paint. content indicates that all containment rules except
size and style are applied to the element. this is equivalent to contain: layout paint.
size indicates that the element can be
sized without the need to examine its descendants'
sizes. layout indicates that nothing outside the element may affect its internal layout and vice versa. style indicates that, for properties that c...
...ntained elements — these must also be offscreen as they are contained completely by that box. and if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box. ...
font-optical-sizing - CSS: Cascading Style Sheets
the font-optical-sizing css property sets whether text rendering is optimized for viewing at different
sizes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. ...
...: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the browser will not modify the shape of glyphs for optimal viewing. auto the browser will modify the shape of glyphs for optimal viewing. description optical sizing is enabled by default for fonts that have an optical
size variation axis. the optical
size variation axis is represented by opsz in font-variation-settings. when optical sizing is used, small text
sizes are often rendered with thicker strokes and larger serifs, whereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes. formal definition initial valueautoapplies toall elements. it also applies to ::fi...
...ereas larger text is often rendered more delicately with more contrast between thicker and thinner strokes. formal definition initial valueautoapplies toall elements. ...
...rmal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically
sized. this is the default across browsers.</p> <p class="no-optical-sizing">this paragraph is not optically
sized. you should see a difference in supporting browsers.</p> @font-face { src: url('amstelvaralpha-vf.ttf'); font-family:'amstelvar'; font-style: normal; } p { font-
size: 36px; font-family: amstelvar; } .no-optical-sizing { font-optical-sizing: none; } note: the font referenced above — which includes optical sizing and is freely-licensed — is good for testing. you can dow...
justify-items - CSS: Cascading Style Sheets
art on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. start the item is packed flush to each other toward the start edge of the alignment container in the appropriate axis. end the item is packed flush to each other toward the end edge of the alignment container in the appropriate axis. flex-start for items that are not children of a flex container, this value is treated like start. flex-end for items that a...
... first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. ...
...cifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. ...
...eline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if the combined
size of the items is less than the
size of the alignment container, any auto-
sized items have their
size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size exactly fills the alignment container. safe if the
size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the relative si...
justify-self - CSS: Cascading Style Sheets
art on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. start the item is packed flush to each other toward the start edge of the alignment container in the appropriate axis. end the item is packed flush to each other toward the end edge of the alignment container in the appropriate axis. flex-start for items that are not children of a flex container, this value is treated like start. flex-end for items that a...
... first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. ...
...cifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. ...
...eline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if the combined
size of the items is less than the
size of the alignment container, any auto-
sized items have their
size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size exactly fills the alignment container. safe if the
size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start. unsafe regardless of the relative si...
mask-border-slice - CSS: Cascading Style Sheets
sured from the bottom. when four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise). the optional fill value, if used, can be placed anywhere in the declaration. values <number> represents an edge offset in pixels for raster images and coordinates for vector images. for vector images, the number is relative to the element's
size, not the
size of the source image, so percentages are generally preferable in these cases. <percentage> represents an edge offset as a percentage of the source image's
size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region. its width and height are
sized to match the top and left image regions, respectively. description ...
... the above diagram illustrates the location of each region. zones 1-4 are corner regions. each one is used a single time to form the corners of the final border image. zones 5-8 are edge regions. ...
...fault, but is used like a background image if the keyword fill is set. the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to form the final mask border. ...
... defs element and all graphics elementsinheritednopercentagesrefer to
size of the mask border imagecomputed valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet. when it eventually starts to be supported, it will serve to define the
size of the slices taken from the source image, and used to create the border mask. mask-border-slice: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-slice — with a prefix: -webkit-mask-box-image-slice: 30 fill; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so...
offset-path - CSS: Cascading Style Sheets
url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defi...
... url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a path string defined with svg coordinate syntax. none specifies...
...e initial position. early versions of the spec called this property motion-path. it was changed to offset-path because the property describes static positions, not motion. ...
...was changed to offset-path because the property describes static positions, not motion. ...
repeating-conic-gradient() - CSS: Cascading Style Sheets
d keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). the last color stop minus the first color-stop angle defines the
size of the repeating gradient. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color sto...
...ng-conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. if neither the first nor the last color stops include include a a color stop angle greater than 0deg or less than 360 degrees respectively, the conic-gradient will not repeat. as with any gradient, a repeating-conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to, or the
size the <image> is set to if it's set to something other than the element's
size. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-conic-gradient() won't work on background-color and other properties that use the <col...
...nt that doe not repeat, make the gradient a full 360 degree rotation, or use the conic-gradient() function instead. understanding repeating conic gradients the repeating-conic-gradient syntax is similar to the conic-gradient() and repeating-radial-gradient() syntax. like the non-repeating conic-gradient, the color-stops are placed around a gradient arc. like the repeating radial gradient, the
size of the repeating section is the first color stop subtracted from the angle of the last color stop. the above gradients are defined as being one third blue, one third red, and one third yellow. repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); conic-gradient(red 120deg, yellow 120deg 24...
... arc is 360 degrees, and therefore doesn't repeat. like the non-repeating conic gradient, the color-stops are placed around a gradient arc -- the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. the colors transition as as if spun around the center of a circle, starting at the top if no from <angle> is declared, and going clockwise for the the
size of the angle that is the different between the largest and smallest color angle, then repeating. a repeating conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. like non-repeating conic gradients, the color-stops of a repeating conic gradient are specified with an <angle>. units include deg for degrees, grad for gradi...
Block formatting context - Developer guides
border:1px solid black; padding: 10px; } exclude external floats in the following example, we are using display:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element itself. ...
...isplay:flow-root and floats to implement double columns layout, beacuse an element in the normal flow that establishes a new bfc must not overlap the margin box of any floats in the same block formatting context as the element itself. ...
... note that flexbox is a more efficient way to implement muti columns layout in morden ...
... note that flexbox is a more efficient way to implement muti columns layout in morden css. margin colla...
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
rs define the layout for the html above. css we'll look at the css to create the above results a piece at a time, so we can review the interesting parts one by one. .wrapper { width: 620px; height: 110px; margin: 0; padding: 10px; border: 6px solid mediumturquoise; } the .wrapper class is used to assign styles to the <div> that encloses all of our other content. this establishes the
size of the container using width and height as well as its margin and padding. of more interest to our discussion here is the use of the border property to establish a border around the outside 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 t...
...els 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 the two. .boxleft { float: left; background-colo...
...ml the html here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we'll output some text from our javascript code. <div id="box"> <label for="colorpicker">border color:</label> <input type="color" value="#8888ff" id="colorpicker"> <p id="output"></p> </div> css the css simply establishes a
size for the box and some basic styling for appearances. the border is also established with a 2-pixel width and a border color that won't last, courtesy of the javascript below... #box { width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); padding: 4px 6px; font: 16px "lucida grande", "helvetica", "arial", "sans-serif" } javascript the script here handles the task of updati...
... a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. some of these are even specifically designed to help with this sort of work. for example, the website colorzilla offers an extension (chrome / firefox) that offers an eyedropper tool for picking colors from the web. it can also take averages of the colors of pixels in various
sized areas or even a selected area of the page. the advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. picking just one of these pixels can result in getting a color that on its own looks very out of place. fleshing out the palette once you have decided ...
HTML attribute: pattern - HTML: Hypertext Markup Language
vascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...ust any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code"
size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix"
size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number"
size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too l...
...ue must match in order to be considered valid (see validating against a regular expression for a simple crash course on using regular expressions to validate inputs). the example below restricts the value to 4-8 characters and requires that it contain only lower-case letters. ...
... relyin...
<input type="button"> - HTML: Hypertext Markup Language
ross page loads. use the autocomplete attribute to control this feature. validation buttons don't participate in constraint validation; they have no real value to be constrained. examples the below example shows a very simple drawing app created using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). ...
...created using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and
size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. ...
...ut[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var
sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update
sizepicker output value
sizepicker.oninput = function() { output.textcontent =
sizepicker.value; } // store mouse pointer ...
... living standard html5the definition of '<input type="button">' in that specification. recommendation ...
<input type="image"> - HTML: Hypertext Markup Language
rs can get a better idea of what the button is used for. it will also display if the image can't be shown for any reason (for example if the path is misspelled). if possible, use text which matches the label you'd use if you were using a standard submit button. the width and height attributes are used to specify the width and height the image should be shown at, in pixels. the button is the same
size as the image; if you need the button's hit area to be bigger than the image, you will need to use css (e.g. padding). also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio. overriding default form behaviors <input type="image"> elements — like regular submit buttons — can accept a number of attributes that overrid...
...ve example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for. adjusting the image's position and scaling algorithm you can use the object-position property to adjust the positioning of the image within the <input> element's frame, and the object-fit property to control how the image's
size is adjusted to fit within the frame. this allows you to specify a frame for the image using the width and height attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space. examples a login form the following example shows the same button as before, but included in the context of a typical login form. ...
... html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </div> <div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </div> <div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e...
...note the visible grey background of the element still visible in the area not covered by the image. specifications specification status comments html living standardthe definition of '<input type="image">' in that specification. living standard html5the definition of '<input typ...
<input type="range"> - HTML: Hypertext Markup Language
ion of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required,
size, src, and width. any of these attributes, if included, will be ignored. examples while the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. the range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific...
...ue in cases where the user may not even care—or know—what the specific numeric value selected is. a few examples of situations in which range inputs are commonly used: audio controls such as volume and balance, or filter controls. color configuration controls such as color channels, transparency, brightness, etc. game configuration controls such as difficulty, visibility distance, world
size, and so forth. password length for a password manager's generated passwords. as a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. for example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "s...
... html the html needs to be updated to wrap the <input> in a <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page): <div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div> css now we need some css. first is the css for the wrapper itself; this specifies the display mode and
size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things. .slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-wrapper input { ...
...hat the rotated slider fits into the reserved space without making a mess of things. .slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); } the
size of the control is set to be 150 pixels long by 20 pixels tall. the margins are set to 0 and the transform-origin is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. offsetting the origin by 75px on each axis means we will rotate around the center of that space. finally, w...
HTTP Index - HTTP
to be accessible to everyone, regardless of which browser or device they're using. there are ways to develop your website to progressively enhance itself based on the availability of features rather than by targeting specific browsers. 13 compression in http guide, http, compression compression is an important way to increase the performance of a web site. for some documents,
size reduction of up to 70% lowers the bandwidth capacity needs. over the years, algorithms also got more efficient, and new ones are supported by clients and servers. 14 configuring servers for ogg media audio, http, media, ogg, video this guide covers a few server configuration changes that may be necessary for your web server to correctly serve ogg media files. 15 co...
...renced by the content-type header. 72 content-language http, headers, reference the content-language entity header is used to describe the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. 73 content-length http, headers, reference the content-length entity header indicates the
size of the entity-body, in bytes, sent to the recipient. 74 content-location http, reference, header the content-location header indicates an alternate location for the returned data. the principal use is to indicate the url of a resource transmitted as the result of content negotiation. 75 content-range http, http header, reference, response header, header t...
... notallowederror. 138 feature-policy: midi directive, feature policy, feature-policy, http, midi, reference the http feature-policy header midi directive controls whether the current document is allowed to use the web midi api. when this policy is enabled, the promise returned by navigator.requestmidiaccess() will reject with a domexception. 139 feature-policy: over
sized-images directive, feature-policy, http, reference the http feature-policy header over
sized-images directive controls whether the current document is allowed to download and display large images. 140 feature-policy: payment directive, feature policy, feature-policy, http, payment request api, payments api, reference the http feature-policy header field's payment dir...
...directive controls whether the current document is allowed to make synchronous xmlhttprequest requests. 145 feature-policy: unoptimized-images directive, feature-policy, http, image, reference the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images. 146 feature-policy: un
sized-media directive, feature-policy, http, reference the http feature-policy header un
sized-media directive controls whether the current document is allowed to change the
size of media elements after the initial layout is complete. 147 feature-policy: usb directive, feature-policy, http, reference, vibration api, web usb the http feature-policy header usb directive con...
Atomics.isLockFree() - JavaScript
return value a boolean indicating whether the operation is lock free. ...
... return value a boolean indicating whether the operation is lock free. ...
... return value a boolean indicating whether the operation is lock free. ...
... return value a boolean indicating whether the operation is lock free. ...
Map - JavaScript
when iterating over it, a map object returns keys in order of insertion. the keys of an object are not ordered. note: since ecmascript 2015, objects do preserve creation order for string and symbol keys. in javascript engines that comply with the ecmascript 2015 spec, iterating over an object with only string keys will yield the keys in order of insertion.
size the number of items in a map is easily retrieved from its
size property. the number of items in an object must be determined manually. iteration a map is an iterable, so it can be directly iterated. iterating over an object requires obtaining its keys in some fashion and iterating over them. performance performs better in scenarios involving frequent addition...
... instance methods map.prototype.clear() removes all key-value pairs from the map object. map.prototype.delete(key) returns tr...
... instance methods map.prototype.clear() removes all key-value pairs from the map object. ...
... is provided to foreach, it will be used as the this value for each callback. ...
Set - JavaScript
for -0 and 0" in the browser compatibility table for details. nan and undefined can also be stored in a set. all nan values are equated (i.e. nan is considered the same as nan, even though nan !== nan). constructor set() creates a new set object. static properties get set[@@species] the constructor function that is used to create derived objects. instance properties set.prototype.
size returns the number of values in the set object. instance methods set.prototype.add(value) appends value to the set object. returns the set object. set.prototype.clear() removes all elements from the set object. set.prototype.delete(value) removes the element associated to the value and returns the value that set.prototype.has(value) would have previously returned. set.prototype.has(val...
... set [ 1, 5, 'some text' ] let o = {a: 1, b: 2} myset.add(o) myset.add({a: 1, b: 2}) // o is referencing a different object, so this is okay myset.has(1) // true myset.has(3) // false, since 3 has not been added to the set myset.has(5) // true myset.has(math.sqrt(25)) // true myset.has('some text'.tolowercase()) // true myset.has(o) // true myset.
size // 5 myset.delete(5) // removes 5 from the set myset.has(5) // false, 5 has been removed myset.
size // 4, since we just removed one value console.log(myset) // logs set(4) [ 1, "some text", {…}, {…} ] in firefox // logs set(4) { 1, "some text", {…}, {…} } in chrome iterating sets // iterate over items in set // logs the items in the order: 1, "some text", {"...
... value] of myset.entries()) console.log(key) // convert set object to an array object, with array.from let myarr = array.from(myset) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}] // the following will also work if run in an html document myset.add(document.body) myset.has(document.queryselector('body')) // true // converting between set and array myset2 = new set([1, 2, 3, 4]) myset2.
size // 4 [...myset2] // [1, 2, 3, 4] // intersect can be simulated via let intersection = new set([...set1].filter(x => set2.has(x))) // difference can be simulated via let difference = new set([...set1].filter(x => !set2.has(x))) // iterate set entries with foreach() myset.foreach(function(value) { console.log(value) }) // 1 // 2 // 3 // 4 implementing ba...
... ...
for await...of - JavaScript
enerator() { let i = 0; while (i < 3) { yield i++; } } (async function() { for await (let num of asyncgenerator()) { console.log(num); } })(); // 0 // 1 // 2 for a more concrete example of iterating over an async generator using for await...of, consider iterating over data from an api. this example first creates an async iterable for a stream of data, then uses it to find the
size of the response from the api. async function* streamasynciterable(stream) { const reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fetches data from url and calculates response
size using the async generator. async functio...
...nse from the api. async function* streamasynciterable(stream) { const reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fetches data from url and calculates response
size using the async generator. ...
...onst reader = stream.getreader(); try { while (true) { const { done, value } = await reader.read(); if (done) { return; } yield value; } } finally { reader.releaselock(); } } // fetches data from url and calculates response
size using the async generator. async function getresponse
size(url) { const response = await fetch(url); // will hold the
size of the response, in bytes. let response
size = 0; // the for-await-of loop. ...
...lates response
size using the async generator. async function getresponse
size(url) { const response = await fetch(url); // will hold the
size of the response, in bytes. let response
size = 0; // the for-await-of loop. async iterates over each portion of the response. for await (const chunk of streamasynciterable(response.body)) { // incrementing the total response length. response
size += chunk.length; } console.log(`response
size: ${response
size} bytes`); // expected output: "response
size: 1071472" return response
size; } getresponse
size('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators. in that case it internally awaits emitted values before assign them to the...
<mo> - MathML
er than normal when displaystyle="true" is set. allowed values are either true or false. lspace the amount of space before the operator (see length for values and units). the constant thickmathspace (5/18em) is the default value. 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. math
size the
size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this attribute specifies the logical class of the operator which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression...
...allowed values are: infinity an arbitrary length movablelimits specifies whether attached under- and overscripts move to sub- and superscript positions when ...
...example bold-fraktur ; example script ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال max
size if stretchy is true, this attribute specifies the maximum
size of the operator. allowed values are: infinity an arbitrary length min
size if stretchy is true, this attribute specifies the minimum
size of the operator. allowed values are: infinity an arbitrary length movablelimits specifies whether attached under- and overscripts move to sub- and superscript positions when displaystyle is false. allowed values are either true or false.
...d values are either true or false. rspace the amount of space after the operator (see length for values and units). the constant thickmathspace (5/18em) is the default value. separator there is no visual effect for this attribute, but it specifies whether the operator is a separator (such as commas). allowed values are true or false. stretchy specifies whether the operator stretches to the
size of the adjacent element. allowed values are true or false. symmetric if stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (centered fraction line). the default value is true if stretchy is set to true and otherwise false. allowed values are true or false. examples <math> <mrow> <mn>5</mn> <mo>+</mo> <mn>5</m...
<mstyle> - MathML
ons 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 movablelimits on <mo>. infixlinebreakstyle specifies the default linebreakstyle to use for infix operators. the values before, after and duplicate are allowed. scriptlevel controls mostly the font-
size. the higher the scriptlevel, the smaller the font
size. this attribute accepts a non-negative integer, as well as a "+" or a "-" sign, which increments or decrements the current value. in addition, the scriptlevel attribute can never reduce the font
size below scriptmin
size in order to avoid unreadable small font
sizes and depends on the multiplier specified in script
sizemultiplier. scriptminsiz...
...the default value is 0.71. ...
...the default value is 0.71. ...
...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>. ...
Performance budgets - Web Performance
g. time to hero element), or a threshold over a period of time. why do i need a performance budget? a budget exists to reflect your reachable goals. it's a tradeoff between user experience, against other performance indicators (e.g. conversion rate). these goals can be: timing based (e.g. time to interactive, first contentful paint). quantity-based (e.g. amount of js files/total image
size). rule-based (e.g. pagespeed index, lighthouse score). their primary goal is to prevent regressions, but they can provide insights to forecast trends (i.e. on september, 50% of the budget was spent in a week). additionally, it can uncover development needs (i.e. a large library with smaller alternatives is often picked to solve a common problem). how do i define a performance budget? a budg...
...plan any tech debt, while not blocking development or deploys. the error level is an upper bound limit, where changes will have a negative and noticeable impact. in order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g. a ~$200 android device over a 3g connection), using multiple tools. these time-based metrics will translate into file-
size budgets. a default baseline to reduce bounce rate is to achieve time to interactive under 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user behavior. (i.e.
...nder 5 seconds in 3g/4g, and under 2 seconds for subsequent loads. however, based on the specific goals and content of your site, you might choose to focus on other metrics. for a text-heavy site such as a blog or a news site, the first contentful paint metric could reflect more closely the user behavior. (i.e. how fast can users start reading), which will inform file specific budgets (e.g. font
size), and their optimizations. (e.g. using font-display to improve perceived performance). the ultimate value of a performance budget is to correlate the impact of performance on business or product goals. when defining metrics, you should focus on user experience, which will dictate not only the bounce or conversion rate but how likely is that user to return. how do i implement a performance budge...
...metrics, you should focus on user experience, which will dictate not only the bounce or conversion rate but how likely is that user to return. how do i implement a performance budget? during development, there are a few tools to run checks against new or modified assets: a module bundler (e.g. webpack), has performance features that will notify you when assets exceed specified limits. bundle
size, allows you to define and run file
size checks in your ci pipeline. file
size checks are the first line of defense against regressions but translating
size back into time metrics can be difficult since development environments could be missing 3rd party scripts, and optimizations commonly provided by a cdn. the first step is to define a development baseline for each branch to compare to and th...
Getting started - SVG: Scalable Vector Graphics
« previousnext » a simple example let us dive straight in with a simple example. take a look at the following code. <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-
size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg. then open the file in firefox. it will render as shown in the following screenshot. (firefox users: click here) the rendering process involves the following: we start with the <svg> root element: a doctype declaration as known from (x)html should be left off because dtd based svg validation lead...
...he center of the red rectangle (center of circle offset 150px to the right, and 100px downward from the top left corner). the text "svg" is drawn. the interior of each letter is filled in with white. the text is positioned by setting an anchor where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle. fine adjustments can be made to the font
size and vertical position to ensure the final result is aesthetically pleasing. basic properties of svg files the first important thing to notice is the order of rendering elements. the globally valid rule for svg files is, that later elements are rendered atop previous elements. the further down an element is the more it will be visible. svg files on the web can be displayed directly in the br...
... an img element can theoretically be used too. however, this technique doesn't work in firefox before 4.0. finally, svg can be created dynamically with javascript and injected into the html dom. with this method, replacement technologies can be implemented for browsers which normally can't process svg. see this dedicated article which deals with the topic in-depth. ...
...the recommended filename extension for these files is ".svgz" (all lowercase). ...
Understanding WebAssembly text format - WebAssembly
ory() interface, and access an existing memory instance (currently you can only have one per module instance) using the associated instance methods. memory instances have a buffer getter, which returns an arraybuffer that points at the whole linear memory. memory instances can also grow, for example via the memory.grow() method in javascript. when growth occurs, since arraybuffers can’t change
size, the current arraybuffer is detached and a new arraybuffer is created to point to the newer, bigger memory. this means all we need to do to pass a string to javascript is to pass out the offset of the string in linear memory along with some way to indicate the length. while there are many different ways to encode a string’s length in the string itself (for example, c strings); for simplicity h...
... we place wasm functions in our table? just like data sections can be used to initialize regions of linear memory with bytes, elem sections can be used to initialize regions of tables with functions: (module (table 2 funcref) (elem (i32.const 0) $f1 $f2) (func $f1 (result i32) i32.const 42) (func $f2 (result i32) i32.const 13) ... ) in (table 2 funcref), the 2 is the initial
size of the table (meaning it will store two references) and funcref declares that the element type of these references are function reference. the functions (func) sections are just like any other declared wasm functions. these are the functions we are going to refer to in our table (for example’s sake, each one just returns a constant value). note that the order the sections are declared in doesn...
...ns in a module, in any order, allowing duplicates. this is a list of the functions that are to be referenced by the table, in the order they are to be referenced. the (i32.const 0) value inside the elem section is an offset — this needs to be declared at the start of the section, and specifies at what index in the table function references start to be populated. here we’ve specified 0, and a
size of 2 (see above), so we can fill in two references at indexes 0 and 1. if we wanted to start writing our references at offset 1, we’d have to write (i32.const 1), and the table
size would have to be 3. note: uninitialized elements are given a default throw-on-call value. in javascript, the equivalent calls to create such a table instance would look something like this: function() { // t...
... note: you can find a lot more details in the threading proposal for webassembly. atomic memory accesses a number of new wasm instructions have been added that can be used to implement higher level features like mutexes, condition variables, etc. you can find them listed here. these instructions are allowed on non-shared memories a...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
="toolbarbutton-1" command="helloworldcommand" /> </toolbarpalette> <menupopup id="menu_toolspopup"> <menuitem id="helloworldmenuitem" label="hello, world!" insertbefore="sanitizeseparator" command="helloworldcommand" /> </menupopup> </overlay> create the style sheet update the file overlay.css with the contents of listing 12. ...
...</menupopup> </overlay> create the style sheet update the file overlay.css with the contents of listing 12. lines 1–3 define the icon image to use with full-
sized icons, and lines 4–6 define the icon image to use when small toolbar icons have been selected. listing 12: content for overlay.css #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon.png); } toolbar[icon
size="small"] #helloworldbutton { list-style-image: url(chrome://helloworld/skin/icon-small.png); } operations check since we have edited the chrome manifest, as we did in phase 3, we need to relaunch firefox. check to make sure that, when you click on the “customize toolbar” button at the top-right of the window that the new toolbar icon appears in the resulting window. drag it onto the tool...
...firefox. check to make sure that, when you click on the “customize toolbar” button at the top-right of the window that the new toolbar icon appears in the resulting window. drag it onto the toolbar, and click it to make sure it works correctly. table 4: files used in phase 4 fixme: make the table cleaner name purpose icon.png the full-
size toolbar button icon file icon-small.png the small toolbar button icon file overlay.css style sheet that defines the toolbar buttons to use. overlays both the browser window and the “customize toolbar” window. phase 5: xpi packaging we actually completed our hello world extension in phase 4, but you can’t distribute the ...
Adding windows and dialogs - Archive of obsolete content
block their parent window until action is taken on them. an alert window is an example of this. modal windows should be avoided when possible because they interrupt the user's browsing and can become annoying very quickly. this feature should only be used when there's no way to continue without having the user do something. never open modal windows at startup. resizable. indicates the user can re
size the window or not. in general, windows should not be resizable unless they display dynamically generated content from a datasource, such as lists or trees that may need resizing to have a better view of the content. to open a new dialog, use the function window.opendialog, an extension of the open function. it allows you to send a set of optional parameters that can be used to communicate with ...
...sking yourself what's the big deal about defining a simple xul window with an ok and maybe a cancel button. the dialogs we have covered in this section are very simple and shouldn't be too hard to implement manually using xul. well, it's more complicated than that. different operating systems order and position their buttons differently in their dialogs. there are also subtle aspects about window
size, margins and paddings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog css styles. the dialog element handles all of this transparently. all you need to do is define which buttons you'll need and the actions associated with them. <dialog id="xulschoolhello-hello-dialog" title="&xulschoolhello.hellodialog.title;" button...
...r dialog looking odd in some operating systems. the only constant rule is that clicking on ok and cancel will close the dialog unless your associated function returns false. you should avoid returning false, though, specially with the cancel button. dialogs in general should be easy to dismiss. your dialogs shouldn't have fixed dimensions because of potential localization problems. dialogs are
sized to their contents and will generally work fine. however, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to re
size them appropriately. the window.
sizetocontent function is what you need in this case. input controls most additional xul windows and dialogs in extensions are some kind of input form. let's look into the most commonly ...
Developing New Mozilla Features - Archive of obsolete content
a developer is consistently not responding to contributors, but you’ll be able to deal with the occasional problems just by asking someone else. design in the open post your plans to the appropriate newsgroup. if there is no response, double-check to see if you have been successful with suggestion five. ...
...able
size patches if you can implement and submit core elements first and build on them in subsequent patches, so much the better. if you think your feature can only be implemented and reviewed in one enormous chunk, ask for design help in the appropriate newsgroup and/or from the developers with whom you have established relationships. if it is not possible to submit your feature in manageable
size patches and you submit a 500k patch, be prepared for several months of review and revision before the patch is ready to be checked in it may not take this long. but if your team has worked for months on a feature, it is going to take reviewers new to the code a long time to work their way through it. ...
...we expect our reviewers to understand the code they approve for check-in, not to simply glance at it and say ok. finding the focus to digest a massive patch in the midst of multiple other demands will take time, even if you’ve done a perfect job. ...
Introducing the Audio API extension - Archive of obsolete content
once the buffer is full, the event mozaudioavailable is triggered. this event therefore contains the raw samples of a period of time. those samples may or may not have been played yet at the time of the event and have not been adjusted for mute or volume settings on the media element. playing, pausing, and seeking the audio also aff...
... 10) = 8820 samples, and a total of (currentsampleoffset + 2 * 44100 / 2). it's also possible to auto-detect the minimal duration of the pre-buffer, such that the sound is played without interruptions, and lag between writing and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. ...
...is played without interruptions, and lag between writing and playback is minimal. to do this start writing the data in small portions and wait for the value returned by mozcurrentsampleoffset() to be greater than 0. var prebuffer
size = samplerate * 0.020; // initial buffer is 20 ms var autolatency = true, started = new date().valueof(); ... ...
Mozilla Application Framework in Detail - Archive of obsolete content
d to translate information from web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface. the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, computing platforms and devices. this innovation in browser technology offers small
size, speed and industry leading standards support. gecko is the premier cross-platform, full-featured, mature and well-tested layout engine available, providing robust and high quality support for a massive array of standards. its ability to render web content correctly is exceptional. gecko consists roughly of an html parser and xml parser, a dom implementation, a css parser and style system, and th...
...ware component is responsible for interpreting and rendering the graphics, text and script on the web. with gecko, mozilla has cleanly separated the browser engine component from the rest of the client software so it can be embedded and used to interpret, display and run web content, applications and services on any computing platform or device. open source and freely available, gecko is small in
size and modular and achieves rendering speed superior to all other browser engines - which makes it perfect for embedding into both desktop applications such as browsers and new devices such as browsing appliances and set top boxes. supporting gecko technologies provide a complete set of resources for efficient development, including full support of web standards, a cross-platform/cross-device user i...
... once to w3c standards and their content and web applications will be accessible from across computing platforms and devices. gecko is based on contributions from mozilla.org, the organization chartered with managing netscape's open source initiative among thousands of internet developers and participating vendors such as netscape. the gecko browser engine offers several key benefits including:
size: gecko has been designed to be lean and modular, bringing full-functionality browsing to a variety of new consumer devices. because it is small, gecko can be embedded on devices with limited footprints and it minimizes download
size for desktop browsers. speed: gecko has been designed for speed and is several times faster than previous versions of internet browsing software. standards support:...
Nanojit - Archive of obsolete content
confdefs.h -i dist/include/ -i.. -i ../nanojit -o jittest ../jittest.cpp libjs_static.a note: remove the -ddebug if you have not compiled spidermonkey with --enable-debug, and use whatever you called the sample source file in place of jittest.cpp. #include <stdio.h> #include <stdint.h> #include "jsapi.h" #include "jstracer.h" #include "nanojit.h" using namespace nanojit; const uint32_t cache_
size_log2 = 20; static avmplus::gc gc = avmplus::gc(); static avmplus::avmcore core = avmplus::avmcore(); int main() { logcontrol lc; #ifdef debug lc.lcbits = lc_readlir | lc_assembly; #else lc.lcbits = 0; #endif // set up the basic nanojit objects. allocator *alloc = new vmallocator(); codealloc *codealloc = new codealloc(); assembler *assm = new (&gc) assembler(*codealloc, *alloc, &core, &...
...vmcore core = avmplus::avmcore(); int main() { logcontrol lc; #ifdef debug lc.lcbits = lc_readlir | lc_assembly; #else lc.lcbits = 0; #endif // set up the basic nanojit objects. allocator *alloc = new vmallocator(); codealloc *codealloc = new codealloc(); assembler *assm = new (&gc) assembler(*codealloc, *alloc, &core, &lc); fragmento *fragmento = new (&gc) fragmento(&core, &lc, cache_
size_log2, codealloc); lirbuffer *buf = new (*alloc) lirbuffer(*alloc); #ifdef debug fragmento->labels = new (*alloc) labelmap(*alloc, &lc); buf->names = new (*alloc) lirnamemap(*alloc, fragmento->labels); #endif // create a fragment to hold some native code. fragment *f = fragmento->getanchor((void *)0xdeadbeef); f->lirbuf = buf; f->root = f; // create a lir writer lirbufwriter out(buf)...
...rameter // to the constant 2. out.ins0(lir_start); lins *two = out.insimm(2); lins *firstparam = out.insparam(0, 0); lins *result = out.ins2(lir_add, firstparam, two); out.ins1(lir_ret, result); // emit a lir_loop instruction. it won't be reached, but there's // an assertion in nanojit that trips if a fragment doesn't end with // a guard (a bug in nanojit). lins *rec_ins = out.insskip(
sizeof(guardrecord) +
sizeof(sideexit)); guardrecord *guard = (guardrecord *) rec_ins->payload(); memset(guard, 0,
sizeof(*guard)); sideexit *exit = (sideexit *)(guard + 1); guard->exit = exit; guard->exit->target = f; f->lastins = out.insguard(lir_loop, out.insimm(1), rec_ins); // compile the fragment. compile(assm, f, *alloc verbose_only(, fragmento->labels)); if (assm->error() != none) { ...
Install script template - Archive of obsolete content
var plid = "@myplugin.com/myplugin,version=5.3"; var version = ...
... var plid = "@myplugin.com/myplugin,version=5.3"; var version = "5.3.0.0"; var mimetype = "application/x-my-plugin"; var suffix = "my"; var suffix_description = "my plugin ...
...hich are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_
size+component_
size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not add " + plugin_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } // start installing xp...
align - Archive of obsolete content
« xul reference home 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 is split equally along each side of the child elements, res...
...r 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 of the child elements, resulting 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 c...
...use the flex attribute to create elements that stretch in the opposite direction. ...
Getting File Information - Archive of obsolete content
pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscriptableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the nsifile object has a number of useful attributes which may be used to retrieve information about a file. two useful attributes file
size and lastmodifiedtime (nsifile.attributes) provide a means of retrieving the
size of a file and the time when the file was last changed. file
size the file
size (nsifile.attributes) attribute holds the
size of a file in bytes. if the file does not exist, a 'file not found' exception will occur. you can catch this exception with a try-catch block, but it is better to use nsifile.exists() to check ...
...le and the time when the file was last changed. file
size the file
size (nsifile.attributes) attribute holds the
size of a file in bytes. if the file does not exist, a 'file not found' exception will occur. you can catch this exception with a try-catch block, but it is better to use nsifile.exists() to check first. this example will check if a file on the desktop exists and set the variable 'file
size' to the
size of the file. if the file is not present, the 'file
size' variable will not be changed from the default value of 0. var file
size = 0; var file = io.getfile("desktop", "saved file"); if (file.exists()) file
size = file.file
size; it is also possible to modify the
size of a file by setting the file
size (nsifile.attributes) attribute to a value. this may be useful to truncate a file, h...
.... if the file is not present, the 'file
size' variable will not be changed from the default value of 0. var file
size = 0; var file = io.getfile("desktop", "saved file"); if (file.exists()) file
size = file.file
size; it is also possible to modify the
size of a file by setting the file
size (nsifile.attributes) attribute to a value. this may be useful to truncate a file, however, setting the file
size will also increase the
size of a file if the value is larger than the current
size of the file. in this case, the new part of the file will be filled with empty data. for instance, the following line will set the length of a file to 5000 bytes. file.file
size = 5000; modified time the time that a file was last changed may be retrieved using the lastmodifiedtime (nsifile.attributes) attribute. ...
Things I've tried to do with XUL - Archive of obsolete content
with bug numbers), things that don't work (hopefully with explanations), and workarounds for both of the above. feel free to add your own xul experiences here. how do i use percentage-based height/width with xul? short answer: you can't easily, at least not yet. this means that creating any sort of visual display (not necessarily "ui"; my use case is for creating a calendar time display) that
sizes sanely when the user re
sizes the window is unfortunately very difficult. (to add insult, xul layout code *explicitly* trims off '%' from width/height, thus treating it as pixels.) for reference, i'd like the following to give a vbox that re
sizes along with the window, with the green, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox. <vbox flex="...
....mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul. enn: most people would use the box object width and height properties, or do you want something else? vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the window borders, for example). this is assuming no scrolling is going on. ...
...properties, or do you want something else? vlad: the boxobject width/height are the actual width and height of the box, regardless of the actual visible portion of the box (clipped by the window borders, for example). this is assuming no scrolling is going on. re
size event problems going with the inability to obtain the clientwidth/clientheight of xul elements, it's impossible to handle the "re
size" event yourself to grow/shrink content as needed -- as you grow the content, when you shrink the window, the content will simply be clipped (because now it has a bigger
size than the window). you have no way of finding out what the clipped
size is, so you can never shrink the content. an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clien...
Adding Properties to XBL-defined Elements - Archive of obsolete content
return the value that should be treated as the value of that property. the onset handler is similar but is called whenever a script attempts to assign a new value to the property. this script should store the value somewhere, or validate the value. for example, some properties might only be able to store numbers. attempting to assign alphabetic text to such a property should fail. <property name="
size" onget="return 77;" onset="alert('changed to:'+val);"/> this property will always return 77 when retrieved. when set, an alert will be displayed which displays the value to assign to the property. the special variable val holds the value that the property should be assigned to. use this to validate it or store it. the following decribes what happens in a typical case: there a...
...s return 77 when retrieved. when set, an alert will be displayed which displays the value to assign to the property. the special variable val holds the value that the property should be assigned to. use this to validate it or store it. the following decribes what happens in a typical case: there are two elements, one called 'banana' and the other 'orange'. they each have a custom property called '
size'. when the following line of script is executed: banana.
size = orange.
size; the onget script is called for the
size property of the orange. the script calculates the value and returns it. the onset handler of the
size property of the banana is called. this script uses the value passed in the val variable and assigns it to the
size property of the banana in some manner. note that unlike a fie...
...note that unlike a field, a property does not hold a value. attempting to set a property that does not have an onset handler will generate an error. you will often use a separate field to hold the actual value of the property. it is also common to have the properties match an attribute on the xbl-defined element. the following example maps a property to an attribute on an element. <property name="
size" onget="return this.getattribute('
size');" onset="this.setattribute('
size', val);" /> whenever a script attempts to get the value of the property, it is grabbed instead from the attribute on the element with the same name. whenever a script attempts to set the value of a property, it is set as an attribute on the element. this is convenient because then you can modify the pro...
Localization - Archive of obsolete content
ptionstab;"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical" context="editpopup"> <description> &finddescription; </description> <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="&findcriteria;"/> <menulist id="searchtype"> <menupopup> <menuitem label="&type.name;"/> <menuitem label="&type.
size;"/> <menuitem label="&type.date;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" da...
...ionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="
size" label="&results.
size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell label="&bytes.before;2520&bytes.after;"/> </treerow> </treeitem> </treechildren> </tree> <splitter id="splitbar" re
sizeafter="grow" style="display: none;"/> <spacer class="titlespac...
... "x"> <!entity copycmd.commandkey "c"> <!entity pastecmd.commandkey "v"> <!entity opencmdtoolbar.label "open"> <!entity savecmdtoolbar.label "save"> <!entity searchtab "search"> <!entity optionstab "options"> <!entity finddescription "enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.
size "
size"> <!entity type.date "date modified"> <!entity mode.is "is"> <!entity mode.isnot "is not"> <!entity casesensitive "case sensitive search"> <!entity matchfilename "match entire filename"> <!entity results.filename "filename"> <!entity results.location "location"> <!entity results.
size "
size"> <!entity bytes.before ""> <!entity bytes.after "bytes"> <!entity button.find "find"> <!entity button...
Stack Positioning - Archive of obsolete content
« previousnext » this section will describe how to position items in a stack. placement of stack children normally, the child elements of a stack stretch to fit the
size of the stack. however, you may also place the children at specific coordinates. for example, if a stack has two buttons as children, one may be placed 20 pixels from the left edge and 50 pixels from the top edge. the second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge. the position of a child element may be specified by placing two attributes on the element. ...
...the top edge. the second button can be placed at 100 pixels from the left edge and 5 pixels from the top edge. the position of a child element may be specified by placing two attributes on the element. for the horizontal position, use the left attribute and for the vertical position, use the top attribute. if you don't put these attributes on a child of a stack, the child will stretch to fit the
size of the stack. example 1 : source view <stack> <button label="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes. here, all three children are buttons, but the elements do not have to be same type. th...
...abel="goblins" left="5" top="5"/> <button label="trolls" left="60" top="20"/> <button label="vampires" left="10" top="60"/> </stack> the stack here contains three elements, each positioned at the coordinates given by the left and top attributes. here, all three children are buttons, but the elements do not have to be same type. they may be any element, including boxes and other stacks. the
size of a stack is determined by the positions of the child elements. it is always
sized so that all of the child elements are visible (excluding any children with -moz-stack-sizing: ignore). so if you set a left attribute to 400, the stack will have a width around 400 pixels plus the width of the element. you can override this
size with the various style properties such as width and max-width. you c...
Stacks and Decks - Archive of obsolete content
ike any other box but has the special property that its children are laid out all on top of each other. the first child of the stack is drawn underneath, the second child is drawn next, followed by the third and so on. any number of elements may be stacked up in a stack. the orient property has little meaning on a stack as children are laid out above each other rather than from side to side. the
size of the stack is determined by its largest child, but you can use the css properties width, height, min-width and other related properties on both the stack and its children. the stack element might be used for cases where a status indicator needs to be added over an existing element. for example, a progress bar might be created using a bar and a label overlaid on top of it. shadowing with stack...
...created using a bar and a label overlaid on top of it. shadowing with stacks one convenient use of the stack element however is that you could emulate a number of css properties with it. for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed" style="padding-left: 1px; padding-top: 1px; font-
size: 15pt"/> <description value="shadowed" style="color: red; font-
size: 15pt;"/> </stack> both description elements create text with a
size of 15 points. the first, however is offset one pixel to the right and down by adding a padding to its left and top sides. this has the result of drawing the same text 'shadowed' again but slightly offset from the other. the second description element is dr...
...ght and down by adding a padding to its left and top sides. this has the result of drawing the same text 'shadowed' again but slightly offset from the other. the second description element is drawn in red so the effect is more visible. this method has advantages over using text-shadow because you could completely style the shadow apart from the main text. it could have its own font, underline or
size. (you could even make the shadow blink). it is also useful as mozilla doesn't currently support css text shadowing. a disadvantage is that the area taken up by the shadow makes the
size of the stack larger. shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: whit...
attribute.align - Archive of obsolete content
summary 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 is used to specify how its children are algined horizontally. 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. parameters 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 is split equally...
...ing 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 of the child elements, resulting 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 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 a...
...use the flex attribute to create elements that stretch in the opposite direction. ...
panel - Archive of obsolete content
itation was resolved as of firefox 4.0. attributes backdrag, close, consumeoutsideclicks, fade, flip, ignorekeys, 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. <panel id="thepanel"> <hbox align="start"> <image src="warning.png"/> <vbox> <description value="you have 6 new messages."/> <hbox> <button label="read mail"/> <button label="new message"/> </hbox> </vbox> </hbox> </panel> <description value="6 new messages" popup="...
...bute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested
size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., 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 anch...
... triggered the popup (such as a mouse click, 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.
sizeto( width, height ) return type: no return value changes the current
size of the popup to the new width and height. related interfaces nsiaccessibleprovider, nsidomxulpopupelement ...
treecol - Archive of obsolete content
you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } cycler type: boolean if true, then the column is a cycler column. in the case, clicking on a cell in the column will alternate its state between on and off. this is used, for example, in a mail window, for a c...
...e column to be changed, especially useful when type="checkbox". when the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell. the tree must also be marked as editable in order for this to work. individual treecell elements in the column may be marked editable="false" in order to disable editing. fixed type: boolean if true, the
size of the column in the tree cannot be adjusted by the user. any splitter to either side will re
size those columns while keeping the fixed column at a constant
size. if false or not specified, the user can adjust the
size of the column, typically by dragging the column header with the mouse. hidden type: boolean if set to true, the element is not displayed. this is similar to setting the css...
NPN_MemFlush - Archive of obsolete content
returns if successful, the function returns the amount of freed memory, in bytes. if no memory can be freed, the browser returns 0. ...
... returns if successful, the function returns the amount of freed memory, in bytes. if no memory can be freed, the browser returns 0. ...
... returns if successful, the function returns the amount of freed memory, in bytes. if no memory can be freed, the browser returns 0. ...
Create Your Own Firefox Background Theme - Archive of obsolete content
header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file
size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information—as a user increases the width of the browser window, the bro...
...alled, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. it will be anchored to the bottom-left corner of the browser window. footer images are optional. view a sample theme footer here. image requirements dimensions should be 3000px wide × 100px high png or jpg file format image must be no larger than 300 kb in file
size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window. the left-hand side of the image should have the most important information—as a user increases the width of the browser window,...
...in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide on a copyright license for your work. read more about the types of creative common licenses. important: please be sure you have the rights to use the image in your theme! upload your images — make sure they are under 300 kb in
size and jpg or png format! select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image. preview your theme — you're ready to preview your theme! simply mouse over the image above the submit theme button, and see how it looks instantly. submit your theme — if everything looks right, click the submit theme button, and...
Building up a basic demo with Three.js - Game development
nd dom. they differ in how everything is rendered, so the webgl implementation will implement differently than the css one. despite the variety of ways they achieve the goal, the experience will look the same for the user. thanks to this approach, a fallback can be used, if a desired technology is not supported by the browser. var renderer = new three.webglrenderer({antialias:true}); renderer.set
size(width, height); renderer.setclearcolor(0xdddddd, 1); document.body.appendchild(renderer.domelement); we are creating a new webgl renderer, setting its
size to fit the whole available space on the screen, and appending the dom structure to the page. you might have noticed the antialias parameter in the first line — this renders the edges of shapes more smoothly. the setclearcolor() method sets...
...ally adjusted. we could set a fixed ratio — for example 16 ⁄ 9, which is the aspect ratio of a widescreen tv. the default value is 1. the z position, with the value of 50 units, is the distance between the camera and the center of the scene on the z axis. here we're moving the camera back, so the objects in the scene can be viewed. 50 feels about right. it's not too near, or too far, and the
sizes of the objects allow them to stay on the scene, within the given field of view. the x and y values, if not specified, will default to 0. you should experiment with these values and see how they change what you see in the scene. note: the distance values (e.g. for the camera z position) are unitless, and can be anything you deem suitable for your scene: milimeters, meters, feet, or miles. it'...
...: var dodecahedrongeometry = new three.dodecahedrongeometry(7); var lambertmaterial = new three.meshlambertmaterial({color: 0xeaeff2}); var dodecahedron = new three.mesh(dodecahedrongeometry, lambertmaterial); dodecahedron.position.x = 25; scene.add(dodecahedron); this time, we are creating a dodecahedron, a shape containing twelve flat faces. the parameter, dodecahedrongeometry(), defines the
size of the object. we're using a lambert material, similar to phong, but should be less glossy. again it's black, for now. we're moving the object to the right, so it's not in the same position as the box, or torus. as mentioned above, the new objects currently just look black. to have both, the phong and lambert materials properly visible, we need to introduce a source of light. lights there are ...
Crisp pixel art look with image-rendering - Game development
onitors. the concept retro pixel art aesthetics are getting popular, especially in indie games or game jam entries. but since today's screens render content at high resolutions, there is a problem with making sure the pixel art does not look blurry. developers have been manually scaling up graphics so they are shown with blocks that represent pixels. ...
... especially in indie games or game jam entries. but since today's screens render content at high resolutions, there is a problem with making sure the pixel art does not look blurry. developers have been manually scaling up graphics so they are shown with blocks that represent pixels. two downsides to this method are larger file
sizes and compression artifacts. original
size 4x
size 4x
size (scaled with an image editor) none vendor's algorithm nearest-neighbor algorithm a css-based solution the good news is that you can use css to automatically do the up-scaling, which not only solves the blur problem, but also allows you to use the images in their original, smaller
size, thus saving download time. also, some game techniques require algor...
... crisp-edges or pixelated will work. check out the image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. ...
2D maze game with device orientation - Game development
mpleted, or finished the game if the final level is completed. ...
...the bounce property is used to set the bounciness of the ball when it hits the obstacles. ...
...n the game is to move the ball from the starting position to the ending position: a hole in the ground. implementation looks very similar to the part where we created the ball, and it's also added in the create() function of our game state: this.hole = this.add.sprite(ball._width*0.5, 90, 'hole'); this.physics.enable(this.hole, phaser.physics.arcade); this.hole.anchor.set(0.5); this.hole.body.set
size(2, 2); the difference is that our hole’s body will not move when we hit it with the ball and will have the collision detection calculated (which will be discussed later on in this article). building the block labyrinth to make the game harder and more interesting we will add some obstacles between the ball and the exit. we could use a level editor, but for the sake of this tutorial let's cre...
WAI-ARIA basics - Learn web development
u any idea of what the relationship is between the content. giving the user more clues as to the structure of the content is always good. to improve things, we've created a new version of the example called aria-tabbed-info-box.html (see it running live). we've updated the structure of the tabbed interface like so: <ul role="tablist"> <li class="active" role="tab" aria-selected="true" aria-set
size="3" aria-posinset="1" tabindex="0">tab 1</li> <li role="tab" aria-selected="false" aria-set
size="3" aria-posinset="2" tabindex="0">tab 2</li> <li role="tab" aria-selected="false" aria-set
size="3" aria-posinset="3" tabindex="0">tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> ... </article> <article role="tabpanel" aria-hidden="...
...article role="tabpanel" aria-hidden="true"> ... </article> </div> note: the most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the set
size/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. the new features are as follows: new roles — tablist, tab, tabpanel — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels. aria-selected —...
...ue of this attribute on the different tabs is updated via javascript. aria-hidden — hides an element from being read out by a screenreader. as different tabs are selected by the user, the value of this attribute on the different tabs is updated via javascript. tabindex="0" — as we've removed the links, we need to give the list items this attribute to provide it with keyboard focus. aria-set
size — this property allows you to specify to screenreaders that an element is part of a series, and how many items the series has. aria-posinset — this property allows you to specify what position in a series an element is in. along with aria-set
size, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. in many cases, browsers should be abl...
Multiple-column layout - Learn web development
vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> .container { column-count: 3; } change your css to use column-width as follows: .container { column-width: 200px; } the browser will now give you as many columns as it can of the
size that you specify; any remaining space is then shared between the existing columns. this means that you will not get exactly the width that you specify, unless your container is exactly divisible by that width. column-width example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <div class="container"> <h1>simple multicol example...
...nis dis parturient montes, nascetur ridiculus mus.</p> </div> .container { column-width: 200px; } styling the columns the columns created by multicol cannot be styled individually. there is no way to make one column bigger than other columns, or to change the background or text color of a single column. you have two opportunities to change the way that columns display: changing the
size of the gap between columns using the column-gap. adding a rule between columns with column-rule. using your example above, change the
size of the gap by adding a column-gap property: .container { column-width: 200px; column-gap: 20px; } you can play around with different values — the property accepts any length unit. now add a rule between the columns, with column-rule. in a similar wa...
...cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> something to take note of is that the rule does not take up any width of its own. it lies across the gap you created with column-gap. to make more space either side of the rule you will need to increase the column-gap
size. spanning columns you can cause an element to span across all of the columns. in this case the content breaks when the spanning element is introduced and continues below creating a new set of column boxes. to cause an element to span all of the columns use the column-span property set to all. note that it isn't possible to cause an element to span some columns. the property can only have the ...
Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html. while html is used to define the structure and semantics of your content, css is used to style it and lay it out. for example, you can use css to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites you should learn the basics of html before attempting any css. we recommend that you work through our introduction to html module first. in that module, you will learn about: css, starting with the introduction to css module mo...
...of what is covered in the css basics article is also covered in our css first steps module, albeit in a lot more detail. modules this topic contains the following modules, in a suggested order for working through them. you should definitely start with the first one. css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained...
...ls like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about. solving common css problems use css to solve common problems provides links to sections of content explaining how to use css to solve very common problems when creating a web page. from the beginning, you'll primarily apply colors to html elements and their backgrounds; change the
size, shape, and position of elements; and add and define borders on elements. but there's not much you can't do once you have a solid understanding of even the basics of css. one of the best things about learning css is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet! "css is weird" css works a...
Example 1 - Learn web development
tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; backgrou...
...tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3...
...tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */ background : #f0f0f0; backg...
Sending form data - Learn web development
we'll discuss these headers later on. note: you can find this example on github — see post-method.html (see it live also). viewing http requests http requests are never displayed to the user (if you want to see them, you need to use tools such as the firefox network monitor or the chrome developer t...
...e user will see the data in their url bar, but with a post request they won't. this can be very important for two reasons: if you need to send a password (or any other sensitive piece of data), never use the get method or you risk displaying it in the url bar, which would be very insecure. if you need to send a large amount of data, the post method is preferred because some browsers limit the
sizes of urls. in addition, many servers limit the length of urls they accept. on the server side: retrieving the data whichever http method you choose, the server receives a string that will be parsed in order to get the data as a list of key/value pairs. the way you access this list depends on the development platform you use and on any specific frameworks you may be using with it. example: raw ...
...<input type="file"> controls to allow your users to select the file(s) that will be uploaded. for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a
size limit for files and http requests in order to prevent abuse. security issues each time you send data to a server, you need to consider security. html forms are by far the most common server attack vectors (places where attacks can occur). the problems never come from the html forms themselves — they come from how the server handles data. the website security article of our server-side learn...
Your first form - Learn web development
r page, inside your html head. ...
...-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-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 t...
... note: you can find our version on github at first-form-styled.html (also see it live). sending form data to your web server the last part, a...
What’s in the head? Metadata in HTML - Learn web development
reference it: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well. ...
...these days as well. ...
...le-touch-icon-precomposed"
sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed"
sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed"
sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.
HTML table advanced features and accessibility - Learn web development
te to make the "sum" cell span across the first four columns, so the actual number appears at the bottom of the "cost" column. let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying css. inside the head of your html document, you'll see an empty <style> element. inside this element, add the following lines of css code: tbody { font-
size: 95%; font-style: italic; } tfoot { font-weight: bold; } save and refresh, and have a look at the result. if the <tbody> and <tfoot> elements weren't in place, you'd have to write much more complicated selectors/rules to apply the same styling. note: we don't expect you to fully understand the css right now. you'll learn more about this when you go through our css modules (introductio...
... your finished table should look something like the following: hidden example <!doctype html> <html> <head> <meta charset="utf-8"> <title>my spending record</title> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border: 4px solid rgb(200,200,200); letter-spacing: 1px; font-
size: 0.8rem; } td, th { border: 2px solid rgb(190,190,190); padding: 10px 20px; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb...
...x; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10px; } tbody { font-
size: 90%; font-style: italic; } tfoot { font-weight: bold; } </style> </head> <body> <table> <caption>how i chose to spend my money</caption> <thead> <tr> <th>purchase</th> <th>location</th> <th>date</th> <th>evaluation</th> <th>cost (€)</th> </t...
Arrays - Learn web development
in an animated scene for example, you might have an array of objects representing th...
...in an animated scene for example, you might have an array of objects representing the background graphics currently displayed, and you might only want 50 ...
...history.length >= 5) { // number 2 } // 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.va...
Useful string methods - Learn web development
line below, replacing what's currently there if (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.va...
...put = cities[i]; // write your code just below 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.va...
...t = stations[i]; // write your code just below 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.v...
Perceived performance - Learn web development
ing additional assets and resources after initial page load improves perceived performance. loading essential data in initial requests and progressively loading features and data only as needed helps mitigate low bandwidth and lower spec hardware. additionally, you should optimize the assets you do load. images and video should be served in the most optimal format, compressed, and in the correct
size. prevent jumping content and other reflows images or other assets causing content to be pushed down or jump to a different location, like the loading of third party advertisements, can make the page feel like it is still loading and is bad for perceived performance. content reflowing is especially bad for user experience when not initiated by user interaction. if some assets are going to be slo...
...e the page feel like it is still loading and is bad for perceived performance. content reflowing is especially bad for user experience when not initiated by user interaction. if some assets are going to be slower to load than others, with elements loading after other content has already been painted to the screen, plan ahead and leave space in the layout for them so that content doesn't jump or re
size, especially after the site has become interactive. avoid font file delays font use can both help and harm user experience. selecting the right fonts is an art form, and can greatly improve the user experience. fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding). flicker of unstyled text a...
...delays font use can both help and harm user experience. selecting the right fonts is an art form, and can greatly improve the user experience. fonts can also harm user experience, especially if the fonts used need to be imported, and if the importing is not optimal, or if comic sans is used (kidding). flicker of unstyled text and missing text both harm performance. make fallback fonts the same
size and weight so that when fonts load the page change is less noticeable. interactive elements are interactive make sure visible interactive elements are always interactive and responsive. if input elements are visible, the user should be able to interact with them without a lag. users feel that something is laggy when they take more than 50ms to react. they feel that a page is janky when content ...
Server-side web frameworks - Learn web development
ing database records). for example, the django web framework provides an orm, and refers to the object used to define the structure of a record as the model. the model specifies the field types to be stored, which may provide field-level validation on what information can be stored (e.g. an email field would only allow valid email addresses). the field definitions may also specify their maximum
size, default values, selection list options, help text for documentation, label text for forms etc. the model doesn't state any information about the underlying database as that is a configuration setting that may be changed separately of our code. the first code snippet below shows a very simple django model for a team object. this stores the team name and team level as character fields and specifi...
...tion). with so many choices, it can become difficult to work out what framework provides the best starting point for your new web application. some of the factors that may affect your decision are: effort to learn: the effort to learn a web framework depends on how familiar you are with the underlying programming language, the consistency of its api, the quality of its documentation, and the
size and activity of its community. if you're starting from absolutely no programming experience then consider django (it is one of the easiest to learn based on the above criteria). if you are part of a development team that already has significant experience with a particular web framework or programming language, then it makes sense to stick with that. productivity: productivity is a measure of ho...
...o logical functions will result in more maintainable code than one that has no expectations on developers. similarly, framework design can have a large impact on how easy it is to test and re-use code. performance of the framework/programming language: usually "speed" is not the biggest factor in selection because even relatively slow runtimes like python are more than "good enough" for mid-
sized sites running on moderate hardware. the perceived speed benefits of another language, e.g. c++ or javascript, may well be offset by the costs of learning and maintenance. caching support: as your website becomes more successful then you may find that it can no longer cope with the number of requests it is receiving as users access it. at this point you may consider adding support for caching. c...
Working with Svelte stores - Learn web development
at the beginning we import the alert store. next we import the ondestroy() lifecycle function, which le...
... at the beginning we import the alert store. next we import the ondestroy() lifecycle function, which lets us execute a callback after the component has been unmounted. we ...
...lse} transition:fly="{{delay: 250, duration: 300, x: 0, y: -100, opacity: 0.5}}" > note: the double curly braces are not special svelte syntax. it's just a literal javascript object being passed as a parameter to the fly transition. try your app out again — you'll see that the notifications now look a bit more appealing. note: being a compiler allows svelte to optimize the
size of our bundle by excluding features that are not used. in this case, if we compile our app for production with npm run build, our public/build/bundle.js file will weight a little less than 22kb. if we remove the transitions:fly directive svelte is smart enough to realize the fly function is not being used and the bundle.js file
size will drop down to just 18kb. this is just the tip of the icebe...
Accessibility information for UI designers and developers
re's an example of someone tabbing through a footer, the focus moves around: note: don't remove the focus indicator, as without it, users that can't or don't use a mouse cannot see where they are. it would be like removing the mouse indicator. ...
...here they are. it would be like removing the mouse indicator. see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their browser to make font
sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text
size up to 200 percent without breaking functionality. ...
... make font
sizes larger, or even provide custom css to meet their specific needs. ensure your design is flexible enough to allow for this. text sizing users should be able to enlarge their text
size up to 200 percent without breaking functionality. text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.5 times the font
size set spacing following paragraphs to at least 2 times the font
size set letter spacing (tracking) to at least 0.12 times the font
size set word spacing to at least 0.16 times the font
size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface. forms in forms, provid...
Embedding API for Accessibility
of accessibility. here is the w3c's definition of accessibility for a user agent like mozilla. in part, being accessible means supporting a built-in accessibility apis for a platform, such as microsoft active accessibility or atk for linux and unix desktops. there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font
sizes. mozilla already supports some of these options. this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content window. a zoom factor o...
... this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. text zoom on a per-window basis the nsidomwindow::gettextzoom(float *zoomfactor) and nsidomwindow::settextzoom(float zoomfactor) methods can be used to set a wide range of text zoom factors on a content window. a zoom factor of 1.0 represents 100%, or normal zoom. for double-
sized text, use nsidomwindow::settextzoom(2.0); using accessibility preferences there are a number of prefs related to accessibility. for the most part, an automatic reframe is performed when one of these prefs is changed. a reframe fixes the appearance of the page to match the new prefs, without reloading the document over the network. be aware that in debug builds, this can cause a great number ...
... setcharpref("font.name.serif.x-western", newfontname); setcharpref("font.name.sans-serif.x-western", newfontname); /* for other i18n charsets, change x-western to x-central-euro, x-cyrillic, x-unicode, x-user-def, x-baltic, el, tr, he, ar, th, ja, zh-cn or zh-tw */ setintpref("font.
size.fixed.x-western", newfont
size); setintpref("font.
size.variable.x-western", newfont
size); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("browser.use_docume...
Gecko info for Windows accessibility vendors
t_accname put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible. we do not currently support directional navigation via accnavigate() we do not currently support scroll bars as iaccessible objects, although we do support event_scrollingend and isimpledomnode::scrollto(), explained below. we do not currently support state_moveable, state_
sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different rows. there are currently two techniques for parsing tables: 1) use acclocation() to get the coordinates for ea...
...if it is pointing somewhere. sets state_traversed if link has been visited. sets state_selectable if it is an html named anchor accvalue() exposes the url that is pointed to role_helpballoon not supported. n/a role_character not supported. n/a role_list xul: <listbox> html: <select
size=""> where
size > 1 -- state_readonly is off html: <ol> or <ul> -- state_readonly is on dhtml: role="wairole:list" role_listitem html: <li>, <option> or <optgroup> dhtml: role="wairole:listitem" xul: <listitem> sets state_selected if the current listitem is selected. role_outline dhtml: role="wairole:tree" ...
... role_droplist not supported. n/a role supported? unique features role_progressbar xul: <progressmeter> dhtml: role="wairole:progressbar" fires event_valuechang...
Multiprocess on Windows
content processes. if you only register your interfaces in one process, com won't be able to understand the interface in the other process. registering outparams that consist of arrays of interfaces recall that one of the limitations of typelibs is that their metadata isn't as rich as oicf metadata. something typelibs do not include in their metadata, is idl annotations, such as length_is and
size_is. remember, for interceptors to work correctly, they must be able to wrap any outparams that are interfaces with their own interceptors. without the support for length_is and
size_is annotations, the interceptor cannot tell the difference between a scalar outparam and an array outparam. if your interface outputs an array of interfaces, the interceptor would only wrap the first element in the ar...
...nce between a scalar outparam and an array outparam. if your interface outputs an array of interfaces, the interceptor would only wrap the first element in the array, because it cannot distinguish between scalars and arrays. note: if your new interface does not contain either of these annotations, then you do not need to worry about this step. for those interfaces that do contain length_is or
size_is annotations, we need to use another api declared in mozilla/mscom/registration.h: registerarraydata(). registerarraydata() accepts an array of arraydata structs. you should statically define this array in your code, as const. for example: static const mozilla::mscom::arraydata kmyarraydata[] { { // first arraydata definition }, { // second arraydata definition } }; mozilla::mscom::regis...
...a(). registerarraydata() accepts an array of arraydata structs. you should statically define this array in your code, as const. for example: static const mozilla::mscom::arraydata kmyarraydata[] { { // first arraydata definition }, { // second arraydata definition } }; mozilla::mscom::registerarraydata(kmyarraydata); each arraydata struct corresponds to one function; with length_is and/or
size_is annotations. if your interface contains two functions with those annotations, then you will need to add two arraydata entries. arraydata contains seven fields: iid miid; ulong mmethodindex; ulong marrayparamindex; vartype marrayparamtype; iid marrayparamiid; ulong mlengthparamindex; flag mflag; miid is the uuid of the interface owning the function. mmethodindex is the v...
Software accessibility: Where are we today?
screen, while following the mouse or the current focus. screen magnifiers also have some built-in text-to-speech and the ability to filter text and images through various color palettes, such as black on yellow for high contrast, or green on blue for low contrast. the optacon provides access to printed words, graphics and on-screen information by means of an array vibrating pins the
size of an index finger. the user uses one hand to read the vibrating pins, and the other hand moves a mini-camera over the material to be read. unfortunately, the unit is not currently produced, although there is occasional talk of resurrecting this useful device. braille a solution used for quiet reading, for detailed work, and by deaf-blind users. this can come in the form of hard cop...
...ce. braille a solution used for quiet reading, for detailed work, and by deaf-blind users. this can come in the form of hard copy braille printed on braille embossers, or from a refreshable braille display (see below). these technologies requires special drivers, braille formatting routines and software based text-to-braille translation. the importance of braille itself must be empha
sized. for those that read it, braille can offer higher levels of employment and life fulfillment. refreshable braille displays of various
sizes a braille embosser audio- and braille- based user interfaces are concepts that software designers are historically untrained for. the basic concept is easy - dealing with information when you're blind is ...
...ftware designers are historically untrained for. the basic concept is easy - dealing with information when you're blind is like seeing everything through a mail slot - sequentially and methodically. only small pieces of sequential, non-graphical information can be conveyed - via text-to-speech or a refreshable braille display. whatever the user does, the software needs to respond with small, bite
sized pieces of information that are as short and to the point as possible. ideally, intelligent decisions are made, so the user does not have to wade through as much non-relevant data. alternative ways to command the computer and enter data another problem is how people with disabilities get information into the computer. if you're physically disabled, you may not be able to type on a regular keyboar...
HTTP logging
case.) reproduce whatever problem it is that you're having. once you've reproduced the problem, exit firefox and look for the generated log files in your temporary directory. you can type "%temp%" directly into the windows explorer location bar to get there quickly. advanced techniques you can adjust some of the settings listed above to change what http information get logged. limiting the
size of the logged data by default there is no limit to the
size of log file(s), and they capture the logging throughout the time firefox runs, from start to finish. these files can get quite large (gigabytes)! so we have added a 'rotate:
size_in_mb' option to moz_log (we use it in the examples above). if you are using firefox >= 51, setting this option saves only the last n megabytes of logging da...
... no limit to the
size of log file(s), and they capture the logging throughout the time firefox runs, from start to finish. these files can get quite large (gigabytes)! ...
... note 1: the file with the largest number is not guarantied to be the last file written! we don’t move the files, we only cycle. using the rotate module automatically adds timestamps to the log, so it’s always easy to recognize which file keeps the most recent data. note 2: rotate doesn’t support append. ...
SVG Guidelines
there is usually a compelling reason that makes svg the only solution. when used as an image format, it is sometimes less obvious whether it would be best to use svg or a raster image format for any given image. the vector format svg and raster formats like png both have their place. when choosing whether or not to use svg it is best to understand the advantages and disadvantages of both. ...
...e format for any given image. the vector format svg and raster formats like png both have their place. when choosing whether or not to use svg it is best to understand the advantages and disadvantages of both. file
size whether svg or a raster format will produce a smaller file for a given image depends very much on the image. for example, consider an image of a path with a gradient fill. the
size of an svg of this image will be the same regardless of the dimensions of the image. on the other hand the
size of a raster file of the same image will likely vary tremendously depending on the dimensions of the image since the larger the dimensions the more pixel data the file needs to store. at very small dimensions (the extreme case being 1px x 1px) the raster file will likely be much smaller t...
...svg image is slower than a raster equivalent, the difference is usually not noticable. however, just don't fall into the trap of thinking that svgs are faster than eqivalent raster images, or vice versa. once again, "it depends". authoring guidelines a lot of svg files (particularly those generated by svg editors) ship without being cleaned up and can contain a ton of junk that bloats the file
size and slows down rendering. in general the best way to combat this is to first run svg files through a linter such as svgo (see the tools section below). however, when authoring svgs by hand here are some best practices to help keep them lightweight. these rules are based on some real examples seen in mozilla's code. basics two spaces indenting no useless whitespaces or line breaks (see below ...
IME handling guide
lla::contentcache this is a base class of contentcacheinchild and contentcacheinparent and ipc-aware. this has common members of them including all cache data: mtext whole text in focused editor. this may be too big but ime may request all text in the editor. if we can separate editor contents per paragraph, moving selection between paragraphs generates pseudo focus move, we can reduce this
size and runtime cost of contenteventhandler. however, we've not had a plan to do that yet. note that microsoft word uses this hack. mcompositionstart offset of composition string in mtext. when there is no composition, this is uint32_max. mselection::manchor, mselection::mfocus offset of selection anchor and focus in mtext. mselection::mwritingmode writing mode at selection start. mselection::...
...h the following prefs. the values are integer, 0: none, 1: dotted, 2: dashed, 3: solid, 4: double, 5: wavy (the values same as ns_style_text_decoration_style_* defined in nsstyleconsts.h. ui.imerawinputunderlinestyle ui.imeselectedrawtextunderlinestyle ui.imeconvertedtextunderlinestyle ui.imeselectedconvertedtextunderlinestyle underline width can be specified with "ui.imeunderlinerelative
size" pref. this affects all types of clauses. the value should be 100 or 200. 100 means normal width, 200 means double width. on some platforms, ime may support its own style for each clause. currently, this feature is supported in tsf mode of windows and on linux. the style information is stored in textrangestyle which is defined in textrange.h. it's a member of textrange. textrange is stored in mr...
... handled asynchronously. the composition is not committed synchronously but later this is the only case in a remote process in e10s mode or occurs on linux even in non-e10s mode if the native ime is ibus. the callers of notifyime(request_tocommit_composition) may expect that composition string is committed immediately for their next job. for such a case, textcomposition::requesttocommit() synthe
sizes dom composition events and a dom text event for emulating to commit composition synchronously. additionally, textcomposition ignores comming events which are dispatched by widget when the widget receives native ime events. in this case, using the last composition string as commit string. however, if the last composition string is only an ideographic space (fullwidth space), the composition str...
Introduction to Layout in Mozilla
many don’t work like this! (tables, blocks, xul...
...pute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired
size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame
sizes child frame and view based on child’s metrics n.b. ...
...n parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame
sizes child frame and view based on child’s metrics n.b. ...
DownloadTarget
alled. you can use this instead of using file system calls to check for the existence of the file in order to reduce io overhead. path read only string the path of the target file. partfilepath read only string the path of the ".part" file containing the data downloaded so far, or null to disable the use of a ".part" file to keep partially downloaded data.
size read only number the
size of the target file, in bytes, or zero if the download has not yet been completed. it is possible for this property to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. for single-file download...
...file, in bytes, or zero if the download has not yet been completed. it is possible for this property to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. ...
...operty to have a non-zero value even if the target file no longer exists, if the value is available in download metadata. if that metadata is no longer available and the file has been deleted, then this value is zero. for single-file downloads, this property's value will always match the actual
size of the file on disk, while the download.totalbytes property, when available, may indicate the
size of the data as encoded for transfer instead. for downloads of multiple files, such as downloading a web page and its required media to disk, the meaning of this property is undefined. it currently indicates the
size of the main file (such as the html document) rather than the sum of all of the files'
sizes, but you must not rely upon this behavior, as it is subject to change. this is a ...
Using JavaScript code modules
t code located in a registered location. the module is loaded into a specific javascript scope, such as xul script or javascript xpcom script, using components.utils.import() or components.utils["import"](). creating a javascript code module a very simple javascript module looks like this: var exported_symbols = ["foo", "bar"]; function foo() { return "foo"; } var bar = { name : "bar",
size : 3 }; var dummy = "dummy"; notice that the module uses normal javascript to create functions, objects, constants, and any other javascript type. the module also defines a special array named exported_symbols. any javascript item named in exported_symbols will be exported from the module and injected into the importing scope. for example: components.utils.import("resource://app/my_module.jsm"...
... uses normal javascript to create functions, objects, constants, and any other javascript type. the module also defines a special array named exported_symbols. any javascript item named in exported_symbols will be exported from the module and injected into the importing scope. for example: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.
size + 3); // displays "6" alert(dummy); // displays "dummy is not defined" because 'dummy' was not exported from the module note: when you're testing changes to a code module, be sure to change the application's build id (e.g., the version) before your next test run; otherwise, you may find yourself running the previous version of your module's code. the url for a code module as you can ...
...ns that a given module will be shared when imported multiple times. any modifications to data, objects, or functions will be available in any scope that has imported the module. for example, if the simple module were imported into two different javascript scopes, changes in one scope can be observed in the other scope. scope 1: components.utils.import("resource://app/my_module.jsm"); alert(bar.
size + 3); // displays "6" bar.
size = 10; scope 2: components.utils.import("resource://app/my_module.jsm"); alert(foo()); // displays "foo" alert(bar.
size + 3); // displays "13" this sharing behavior can be used to create singleton objects that can share data across windows and between xul script and xpcom components. note: each scope that imports a module receives a by-value copy of...
MathML In Action
addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( ...
... addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 ...
... addeventlistener("click", zoomtoggle, false); } window.addeventlistener("load", load, false); consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if x < 0 u + if x > 0 or other complex mar...
Mozilla Quirks Mode Behavior
ugh list of the differences that exist between mozilla's standards mode and quirks mode behavior. miscellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 1049). add padding if the very first node in an li is another ul or ol (bug 98636). obsolete since gecko 50 list bullets do not inherit the font
size of the list (bug 97351). removed in firefox 50 (bug 648331). don't inherit font properties into tables except for font-family. make table borders gray rather than using the foreground color. collapse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has gen...
...apse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts like an inline, not a block. give floated img a 3px margin (bug 58899). residual style tags'
size info does not take precedence over heading tags'
size (bug 77352). use box-sizing:border-box for most input types and textarea. give form a margin-bottom:1em (bug 41806). in quirks mode css class and id names are case insensitive. in standards mode they are case sensitive. (this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type o...
...on body are supported only in quirks mode (bug 9258). obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 conform and has been adopted in standards mode. the scrollleft, scrolltop, scrollwidth, and scrollheight properties are relative to body in quirks mode (instead of html) (bug 211030). html (1-7) and css (xx-small - xx-large) font
sizes are calculated slightly differently (see bug 18136). the :hover and :active pseudo-classes will only be applied to links, and only if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), there was no class check, so the :hover pseudoclass was no...
Reporting a Performance Problem
ne with it. using the profiler when enabled, the profiler toolbar button is not recording by default. recording can be done by clicking on the toolbar icon to open its panel. make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording". the toolbar icon turns blue when it is recording. ...
... on the toolbar icon to open its panel. make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox platform), and then choosing "start recording". the toolbar icon turns blue when it is recording. the profiler uses a fixed
size buffer to store sample data. when it runs out of space in its buffer, it discards old entries so you may want to increase the buffer
size if you find you are unable to capture the profile quickly enough after you notice a performance problem. ...
...e when it is recording. the profiler uses a fixed
size buffer to store sample data. when it runs out of space in its buffer, it discards old entries so you may want to increase the buffer
size if you find you are unable to capture the profile quickly enough after you notice a performance problem. if you choose custom settings (and then clicking edit settings) for the profiler, you can adjust the
size of the buffer (presently defaults to 90 mb) and the time interval between data collection (presently defaults to 1 ms). note that increasing the buffer
size uses more memory and can make capturing a profile take longer. using the keyboard shortcuts is often more convenient than using the mouse to interact with the ui: ctrl+shift+1 - start/stop the profiler ctrl+shift+2 - take a profile and...
about:memory
preference-service" example above. finally, at the end of this section are individual measurements, as the following example shows. ...
...ap-chunk
size 114.51 mb ── heap-committed 164.00 mb ── heap-mapped 4.84% ── heap-overhead-ratio 1 ── host-object-urls 0.00 mb ── imagelib-surface-cache 5.27 mb ── js-main-runtime-temporary-peak 0 ── page-faults-hard 203,349 ── page-faults-soft 274.99 mb ── resident 251.47 mb ── resident-unique 1,103.64 mb ── v
size some measurements of note are as follows. "resident". physical memory usage. if you want a single measurement to summarize memory usage, this is probably the best one. "v
size". virtual memory usage. this is often much higher than any other measurement (particularly on mac). it only really matters on 32-bit platforms such as win32. ...
...if this number is low, it's likely that memory allocations will fail due to lack of virtual address space quite soon. various graphics-related measurements ("gfx-*"). ...
Midas
ipboard and remove the selection from the edit control. if there isn't a selection, nothing will happen. note: this command won't work without setting a pref or using signed js. see: more about security preferences note: the shortcut key will automatically trigger this command (typically accel-x) with or without the signed js or any code on the page to handle it. decreasefont
size this command will add a <small> tag around selection or at insertion point. delete this command will delete all text and objects that are selected. if no text is selected it deletes one character to the right. this is similar to the delete button on the keyboard. fontname a font name this command will set the font face for a selection or at the insertion poin...
...o text is selected it deletes one character to the right. this is similar to the delete button on the keyboard. fontname a font name this command will set the font face for a selection or at the insertion point if there is no selection. the given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names. font
size a number this command will set the font
size for a selection or at the insertion point if there is no selection. the given number is such as would be used in the "
size" attribute of the font tag. forecolor a color code this command will set the text color of the selection or at the insertion point. formatblock h1, h2, h3, h4, h5, h6, p, div, address, blockq...
..., h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element. heading h1, h2, h3, h4, h5, h6 selected block will be formatted as the given type of heading. hilitecolor a color code this command will set the hilite color of the selection or at the insertion point. it only works with stylewithcss enabled. increasefont
size this command will add a <big> tag around selection or at insertion point. indent indent the block where the caret is located. if the caret is inside a list, that item becomes a sub-item one level deeper. insertbronreturn true/false selects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag. inserthorizonta...
PRFileInfo
creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
... creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
... creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
PRFileInfo64
creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
... creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
... creationtime creation time per definition of prtime. see prtime.h. modifytime last modification time per definition of prtime. see prtime.h. ...
PRSockOption
enumeration type used in the option field of prsocketoptiondata to form the name portion of a name-value pair. syntax #include <prio.h> typedef enum prsockoption { pr_sockopt_nonblocking, pr_sockopt_linger, pr_sockopt_reuseaddr, pr_sockopt_keepalive, pr_sockopt_recvbuffer
size, pr_sockopt_sendbuffer
size, pr_sockopt_iptimetolive, pr_sockopt_iptypeofservice, pr_sockopt_addmember, pr_sockopt_dropmember, pr_sockopt_mcastinterface, pr_sockopt_mcasttimetolive, pr_sockopt_mcastloopback, pr_sockopt_nodelay, pr_sockopt_maxsegment, pr_sockopt_last } prsockoption; enumerators the enumeration has the following enumerators: pr_sockopt_nonblocking nonblocking i/o. pr_sockopt_linger time to linger on close if data is present in the socket send buffer. pr_sockopt_r...
...r_sockopt_maxsegment, pr_sockopt_last } prsockoption; enumerators the enumeration has the following enumerators: pr_sockopt_nonblocking nonblocking i/o. pr_sockopt_linger time to linger on close if data is present in the socket send buffer. pr_sockopt_reuseaddr allow local address reuse. pr_sockopt_keepalive periodically test whether connection is still alive. pr_sockopt_recvbuffer
size receive buffer
size. pr_sockopt_sendbuffer
size send buffer
size. pr_sockopt_iptimetolive ip time-to-live. pr_sockopt_iptypeofservice ip type-of-service and precedence. pr_sockopt_addmember join an ip multicast group. pr_sockopt_dropmember leave an ip multicast group. pr_sockopt_mcastinterface ip multicast interface address. pr_sockopt_mcasttimetolive ip multicast time-to-live. pr_...
...ence. pr_sockopt_addmember join an ip multicast group. pr_sockopt_dropmember leave an ip multicast group. pr_sockopt_mcastinterface ip multicast interface address. pr_sockopt_mcasttimetolive ip multicast time-to-live. pr_sockopt_mcastloopback ip multicast loopback. pr_sockopt_nodelay disable nagle algorithm. don't delay send to coalesce packets. pr_sockopt_maxsegment maximum segment
size. pr_sockopt_last always one greater than the maximum valid socket option numerator. description the prsockoption enumeration consists of all the socket options supported by nspr. the option field of prsocketoptiondata should be set to an enumerator of type prsockoption. ...
PR_CreateFileMap
prot protection option for read and write accesses of a file mapping. this parameter consists of one of the following options: pr_prot_readonly. read-only access. pr_prot_readwrite. readable, and write is shared. pr_prot_writecopy. readable, and write is private (copy-on-write). ...
... prot protection option for read and write accesses of a file mapping. this parameter consists of one of the following options: pr_prot_readonly. read-only access. pr_prot_readwrite. readable, and write is shared. pr_prot_writecopy. readable, and write is private (copy-on-write). ...
... prot protection option for read and write accesses of a file mapping. this parameter consists of one of the following options: pr_prot_readonly. read-only access. pr_prot_readwrite. readable, and write is shared. pr_prot_writecopy. readable, and write is private (copy-on-write). ...
PR_GetProtoByName
result on input, a pointer to a prprotoent structure. ...
... result on input, a pointer to a prprotoent structure. on output, this structure is filled in by the runtime if the function returns pr_success. ...
... result on input, a pointer to a prprotoent structure. on output, this structure is filled in by the runtime if the function returns pr_success. returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. ...
PR_GetProtoByNumber
result on input, a pointer to a prnetaddr structure. ...
... result on input, a pointer to a prnetaddr structure. on output, this structure is filled in by the runtime if the function returns pr_success. ...
... result on input, a pointer to a prnetaddr structure. on output, this structure is filled in by the runtime if the function returns pr_success. returns the function returns one of the following values: if successful, pr_success. if unsuccessful, pr_failure. ...
PR_OpenAnonFileMap
prot how the shared memory is mapped. returns pointer to prfilemap or null on error. description if the shared memory already exists, a handle is returned to that shared memory object. ...
... prot how the shared memory is mapped. returns pointer to prfilemap or null on error. description if the shared memory already exists, a handle is returned to that shared memory object. ...
... prot how the shared memory is mapped. returns pointer to prfilemap or null on error. description if the shared memory already exists, a handle is returned to that shared memory object. ...
NSS_3.12_release_notes.html
e pk11pub.h) pk11_creategenericobject (see pk11pub.h) pk11_createpbev2algorithmid (see pk11pub.h) pk11_destroymergelog (see pk11pub.h) pk11_generatekeypairwithopflags (see pk11pub.h) pk11_getpbecryptomechanism (see pk11pub.h) pk11_isremovable (see pk11pub.h) pk11_mergetokens (see pk11pub.h) pk11_writerawattribute (see pk11pub.h) seckey_ecparamstobasepointorderlen (see keyhi.h) seckey_ecparamstokey
size (see keyhi.h) secmod_deletemoduleex (see secmod.h) sec_getregisteredhttpclient (see ocsp.h) sec_pkcs5isalgorithmpbealgtag (see secpkcs5.h) vfy_createcontextdirect (see cryptohi.h) vfy_createcontextwithalgorithmid (see cryptohi.h) vfy_verifydatadirect (see cryptohi.h) vfy_verifydatawithalgorithmid (see cryptohi.h) vfy_verifydigestdirect (see cryptohi.h) vfy_verifydigestwithalgorithmid (see cryptoh...
...5isalgorithmpbealgtag (see secpkcs5.h) vfy_createcontextdirect (see cryptohi.h) vfy_createcontextwithalgorithmid (see cryptohi.h) vfy_verifydatadirect (see cryptohi.h) vfy_verifydatawithalgorithmid (see cryptohi.h) vfy_verifydigestdirect (see cryptohi.h) vfy_verifydigestwithalgorithmid (see cryptohi.h) new macros for camellia support (see blapit.h): nss_camellia nss_camellia_cbc camellia_block_
size new macros for rsa (see blapit.h): rsa_max_modulus_bits rsa_max_exponent_bits new macros in certt.h: x.509 v3 ku_encipher_only cert_max_serial_number_bytes cert_max_dn_bytes pkix cert_rev_m_do_not_test_using_this_method cert_rev_m_test_using_this_method cert_rev_m_allow_network_fetching cert_rev_m_forbid_network_fetching cert_rev_m_allow_implicit_default_source cert_rev_m_ignore_implicit_...
...roduces an error bug 402731: pkix_pl_pk11certstore_crlquery will crash if fails to acquire dp cache. bug 406647: libpkix does not use user defined revocation checkers bug 407064: pkix_pl_ldapcertstore_buildcrllist should not fail if a crl fails to be decoded bug 421216: libpkix test nss_thread leaks a test certificate bug 301259: signtool usage message is unhelpful bug 389781: nss should be built
size-optimized in browser builds on linux, windows, and mac bug 90426: use of obsolete typedefs in public nss headers bug 113323: the first argument to pk11_findcertfromnickname should be const. bug 132485: built-in root certs slot description is empty bug 177184: nss_cmsdecoder_cancel might have a leak bug 232392: erroneous root ca tests in nss libraries bug 286642: util should be in a shared librar...
NSS 3.20 release notes
new in nss 3.20 new functionality the tls library has been extended to support dhe ciphersuites in server applications. new functions in ssl.h ssl_dhegroupprefset - configure the set of allowed/enabled dhe group parameters that can be used by nss for a server socket. ssl_enableweakdheprimegroup - enable the use of weak dhe group parameters that are smaller than default minimum
size of the library. new types in sslt.h ssldhegrouptype - enumerates the set of dhe parameters embedded in nss that can be used with function ssl_dhegroupprefset new macros in ssl.h ssl_enable_server_dhe - a socket option user to enable or disable dhe ciphersuites for a server socket notable changes in nss 3.20 the tls library has been extended to support d...
...tdefault api. the server side implementation of the tls does not support session tickets while using a dhe ciphersuite (see bug 1174677). support for the following ciphersuites has been added: tls_dhe_dss_with_aes_128_gcm_sha256 tls_dhe_dss_with_aes_128_cbc_sha256 tls_dhe_dss_with_aes_256_cbc_sha256 by default, the server side tls implementation will use dhe parameters with a
size of 2048 bits when using dhe ciphersuites. nss embeds fixed dhe parameters
sized 2048, 3072, 4096, 6144 and 8192 bits, which were copied from version 08 of the internet-draft "negotiated finite field diffie-hellman ephemeral parameters for tls", appendix a. a new api ssl_dhegroupprefset has been added to nss, which allows a server application to select one or multiple of the embedded dhe paramet...
... order to support legacy clients. to enable this support, the new api ssl_enableweakdheprimegroup must be used. each time this api is called for the first time in a process, a fresh set of weak dhe parameters will be randomly created, which may take a long amount of time. please refer to the comments in the header file that declares the ssl_enableweakdheprimegroup api for additional details. the
size of the default pqg parameters used by certutil when creating dsa keys has been increased to use 2048 bit parameters. the selfserv utility has been enhanced to support the new dhe features. nss no longer supports c compilers that predate the ansi c standard (c89). bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resol...
NSS 3.22 release notes
_tls_ecdh_rsa sec_oid_tls_ecdh_anon sec_oid_tls_rsa_export sec_oid_tls_dhe_rsa_export sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
...oid_tls_ecdh_anon sec_oid_tls_rsa_export sec_oid_tls_dhe_rsa_export sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
...ec_oid_tls_rsa_export sec_oid_tls_dhe_rsa_export sec_oid_tls_dhe_dss_export sec_oid_tls_dh_rsa_export sec_oid_tls_dh_dss_export sec_oid_tls_dh_anon_export sec_oid_apply_ssl_policy in sslt.h ssl_signed_cert_timestamp_xtn is added to sslextensiontype. ...
NSS Sample Code Sample1
v = 0; seckeyprivatekey *prvkey = 0; seckeypublickey *pubkey = 0; pk11slotinfo *slot = 0; pk11rsagenparams rsaparams; secstatus s; // see if there is already a private key with this name. // if there is one, no further action is required. rv = getprivatekey(&prvkey); if (rv == 0 && prvkey) goto done; rv = 0; // these could be parameters to the init function rsaparams.key
sizeinbits = 1024; rsaparams.pe = 65537; slot = pk11_getinternalkeyslot(); if (!slot) { rv = 1; goto done; } prvkey = pk11_generatekeypair(slot, ckm_rsa_pkcs_key_pair_gen, &rsaparams, &pubkey, pr_true, pr_true, 0); if (!prvkey) { rv = 1; goto done; } // set the nickname on the private key so that it // can be found later. s = pk11_setprivatekeynickname(prvkey, mserver...
...nt server::generatekeys() { int rv = 0; seckeypublickey *pubkey = 0; pk11slotinfo *slot = 0; // choose a slot to use slot = pk11_getinternalkeyslot(); if (!slot) { rv = 1; goto done; } // get our own public key to use for wrapping rv = getpublickey(&pubkey); if (rv) goto done; // do the encryption (aes) key if (!mwrappedenckey) { pk11symkey *key = 0; // the key
size is 128 bits (16 bytes) key = pk11_keygen(slot, ckm_aes_key_gen, 0, 128/8, 0); if (!key) { rv = 1; goto aes_done; } rv = wrapkey(key, pubkey, &mwrappedenckey); aes_done: if (key) pk11_freesymkey(key); if (rv) goto done; } // do the mac key if (!mwrappedmackey) { pk11symkey *key = 0; // the key
size is 160 bits (20 bytes) key = pk11_keygen(slot, ckm_ge...
...seckeyprivatekey *prvkey = 0; rv = getprivatekey(&prvkey); if (rv) goto done; *pubkey = seckey_converttopublickey(prvkey); if (!*pubkey) { rv = 1; goto done; } done: if (prvkey) seckey_destroyprivatekey(prvkey); return rv; } int server::wrapkey(pk11symkey *key, seckeypublickey *pubkey, secitem **ret) { int rv = 0; secitem *data; secstatus s; data = (secitem *)port_zalloc(
sizeof(secitem)); if (!data) { rv = 1; goto done; } // allocate space for output of wrap data->len = seckey_publickeystrength(pubkey); data->data = new unsigned char[data->len]; if (!data->data) { rv = 1; goto done; } s = pk11_pubwrapsymkey(ckm_rsa_pkcs, pubkey, key, data); if (s != secsuccess) { rv = 1; goto done; } *ret = data; data = 0; done: if (data) secitem_freeitem(data,...
NSS Sample Code Sample_1_Hashing
nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag. ...
..."%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal =
sizeof(hash_names) /
sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)...
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcontext...
Hashing - sample 1
nametagpair hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* * maps a hash name to a secoidtag. ...
...%02x", data[i]); column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal =
sizeof(hash_names) /
sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)...
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcontext...
sample1
r hash_names[] = { { "md2", sec_oid_md2 }, { "md5", sec_oid_md5 }, { "sha1", sec_oid_sha1 }, { "sha256", sec_oid_sha256 }, { "sha384", sec_oid_sha384 }, { "sha512", sec_oid_sha512 } }; /* maps a hash name to a secoidtag. ...
... column += 2; break; } if (column > 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal =
sizeof(hash_names) /
sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < input ] [ > output ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algto...
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ ...
NSS functions
mxr 3.2 and later pk11_getallslotsforcert mxr 3.12 and later pk11_getbestkeylength mxr 3.2 and later pk11_getbestslot mxr 3.2 and later pk11_getbestslotmultiple mxr 3.2 and later pk11_getbestwrapmechanism mxr 3.2 and later pk11_getblock
size mxr 3.2 and later pk11_getcertfromprivatekey mxr 3.9.3 and later pk11_getcurrentwrapindex mxr 3.2 and later pk11_getdefaultarray mxr 3.8 and later pk11_getdefaultflags mxr 3.8 and later pk11_getdisabledreason mxr 3.8 and later pk11...
...reateecprivatekey mxr 3.8 and later seckey_createsubjectpublickeyinfo mxr 3.2 and later seckey_decodedersubjectpublickeyinfo mxr 3.4 and later seckey_destroyprivatekey mxr 3.2 and later seckey_ecparamstobasepointorderlen mxr 3.12 and later seckey_ecparamstokey
size mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickeytype mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signaturelen mxr 3.11.2 and lat...
...xr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
TLS Cipher Suite Discovery
in order to communicate securely, an tls client and tls server must agree on the cryptographic algorithms and keys that they will both use on the secured connection. they must agree on these items: key establishment algorithm (such as rsa, dh, or ecdh) peer authentication algorithm (such as rsa, dsa, ecdsa) bulk data encryption algorithm (such as rc4, des, aes) and key
size digest algorithm for message authentication checking (sha1, sha256) there are numerous available choices for each of those categories, and the number of possible combinations of all those choices is large. tls does not allow all possible combinations of choices from those categories to be used. instead, tls allows only certain well-defined combinations of those choices, known as cipher suites, defined in the ietf...
...ich cipher suites his application will attempt to use. here are the details of how an nss-based application learns what cipher suites are supported and obtains the information to display to the user. libssl offers a public table of well defined cipher suite numbers. the cipher suites are listed in the table in order of preference, from the most preferred cipher suite to the least preferred. the
size of this table varies from release to release, and so libssl makes the number of entries in that table publicly available too. the table and the number of entries are declared in "ssl.h", as follows: /* constant table enumerating all implemented ssl 2 and 3 cipher suites. */ ssl_import const pruint16 ssl_implementedciphers[]; /* number of entries in the above table. */ ssl_import const p...
...on about any supported cipher suite, by its number. this function is declared in "ssl.h" as follows: ssl_import secstatus ssl_getciphersuiteinfo( pruint16 ciphersuite, sslciphersuiteinfo *info, pruintn len); the application provides the cipher suite number for which it wants information, the address of a block of memory allocated to receive that information, and the
size in bytes of that block of memory. ssl_getciphersuiteinfo fills that caller-supplied memory with information from the sslciphersuiteinfo structure for that cipher suite. the sslciphersuiteinfo structure contains this information, declared in "sslt.h": typedef struct sslciphersuiteinfostr { pruint16 length; pruint16 ciphersuite; /* cipher suite name */ ...
Hacking Tips
its a failure. now you can run rr replay to replay that last (failed) run under gdb. rr with reftest to break on the write of a differing pixel: find the x/y of a pixel that differs use 'run z' where z is the mark in the log for test-start. for example in '[rr 28496 607198]reftest test-start | file:///home/bgirard/mozilla-central/tree/image/test/reftest/bmp/bmpsuite/b/wrapper.html?badpalette
size.bmp' z would be 607198. break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::errorresult&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)a...
...ly for this one …] return true; } [… old impl …] [hack] spewing all compiled code i usually just add this to the apropriate executablecopy. if (getenv("inst_dump")) { char buf[4096]; sprintf(buf, "gdb /proc/%d/exe %d -batch -ex 'set pagination off' -ex 'set arm force-mode arm' -ex 'x/%di %p' -ex 'set arm force-mode auto'", getpid(), getpid(), m_buffer.
size() / 4, buffer); system(buf); } if you aren't running on arm, you should omit the -ex 'set arm force-mode arm' and -ex 'set arm force-mode auto'. and you should change the
size()/4 to be something more apropriate for your architecture. benchmarking with sub-milliseconds (js shell) in the shell we have 2 simple ways to benchmark a script, we can either use the -b shell option (--p...
...o dump out all gc things (reachable and unreachable) that are present in the heap. by default the function writes to stdout, but a filename can be specified as an argument. example output might look as follows: 0x1234abcd b global object ========== # zone 0x56789123 # compartment http://gmail.com [in zone 0x56789123] # compartment http://gmail.com/iframe [in zone 0x56789123] # arena allockind=3
size=64 0x1234abcd b object > 0x1234abcd b prop1 > 0xabcd1234 w prop2 0xabcd1234 w object > 0xdeadbeef b prop3 # arena allockind=5
size=72 0xdeadbeef w object > 0xabcd1234 w prop4 the output is textual. the first section of the file contains a list of roots, one per line. each root has the form "0xabcd1234 <color> <description>", where <color> is the color of the given gc thing (b for black, g for g...
Garbage collection
the unit of memory that is allocated and collected by the gc, as used externally. in other words, from the point of view of the rest of the engine, the job of the gc is to allocate cells and automatically collect them. cell is the base class for all classes that are allocated by the gc, e.g., jsobject. allocation kind cells are classified by allocation kind. the allocation kind determines the
size of the object and the finalization behavior. allocation kind is defined by enum allockind. arenas always hold objects of the same allocation kind. thus, an arena holds objects all of the same
size and finalization behavior. compartments the js heap is partitioned into compartments. some key properties of compartments are: every cell (js heap object) belongs to at most one compartment. (some...
...fo::freearenashead and linked through arenaheader::next. the chunkinfo also contains some basic stats, such as the number of free arenas. arena an arena is an internal unit of memory allocation. an arena is one page (4096 bytes on almost all platforms) and contains an arenaheader, a few pad bytes, and then an array of aligned elements. all elements in an arena have the same allocation kind and
size. every arena maintains a list of free spans, starting at arenaheader::firstfreespanoffets. the last cell in each free span (except the last one) holds a freespan for the next free span. free span struct freespan represents a contiguous sequence of free cells [first,last] within an arena. freespan contains functions to allocate from the free span. mark bitmap the mark bitmap is represented by...
...of free cells [first,last] within an arena. freespan contains functions to allocate from the free span. mark bitmap the mark bitmap is represented by chunkbitmap. the mark bitmap has two bits per gc cell, so that it can represent both regular liveness marking ("marked black") as well as reachability from cycle-collected objects ("marked gray"). mark bits are allocated based on the minimum cell
size, thus an object comprised of larger cells consumes multiple bits in the bitmap (but only uses two of them.) exact stack rooting api note: the information here is about the implementation of gc roots and their use within spidermonkey. for information on how the rooting apis should be used by embedders, read: gc rooting guide. this information has been split out into a separate article: exact ...
SpiderMonkey Internals
no error recovery; it bails out on the first error. the emitter does some constant folding and a few codegen optimizations; about the fanciest thing it does is to attach source notes to the script for the decompiler's benefit. the decompiler implements function.tosource(), which reconstructs a function's source code. it translates postfix bytecode into infix source by consulting a separate byte-
sized code, called source notes, to disambiguate bytecodes that result from more than one grammatical production. garbage collector the gc is a mark-and-sweep, non-conservative (exact) collector. it is used to hold js objects and string descriptors (jsstring), but not string bytes. it runs automatically only when maxbytes (as passed to js_newruntime) bytes of gc things have been allocated and anothe...
... almost all client code. jspubtd.h, jsprvtd.h these files exist to group struct and scalar typedefs so they can be used everywhere without dragging in struct definitions from n different files. the jspubtd.h file contains public typedefs, and is included automatically when needed. the jsprvtd.h file contains private typedefs and is included by various .h files that need type names, but not type
sizes or declarations. jsdbgapi.cpp, jsdbgapi.h the debugging api. provided so far: traps, with which breakpoints, single-stepping, step over, step out, and so on can be implemented. the debugger will have to consult jsopcode.def on its own to figure out where to plant trap instructions to implement functions like step out, but a future jsdbgapi.h will provide convenience interfaces to do these thi...
...jsdtoa.h, dtoa.c dtoa.c contains david gay's portable double-precision floating point to string conversion code, with permission to use notice included. jsdtoa.cpp #includes this file. jshash.cpp, jshash.h, jsdhash.cpp, jsdhash.h portable, extensible hash tables. these use multiplicative hash for strength reduction over division hash, yet with very good key distribution over power of two table
sizes. jshash resolves collisions via chaining, so each entry burns a malloc and can fragment the heap. jsdhash uses open addressing. jslong.cpp, jslong.h 64-bit integer emulation, and compatible macros that use intrinsic c types, like long long, on platforms where they exist (most everywhere, these days). jsprf.* portable, buffer-overrun-resistant sprintf and friends. for no good reason save lack...
JS::AutoValueArray
description js::autovaluearray<n> holds a rooted array of js::value. this is typically used for local variables being passed to function which requires js::handlevaluearray or a pointer to js::value array. examples pass to function as a pointer to js::value. ...
... description js::autovaluearray<n> holds a rooted array of js::value. this is typically used for local variables being passed to function which requires js::handlevaluearray or a pointer to js::value array. examples pass to function as a pointer to js::value. ...
... description js::autovaluearray<n> holds a rooted array of js::value. this is typically used for local variables being passed to function which requires js::handlevaluearray or a pointer to js::value array. examples pass to function as a pointer to js::value. ...
JS::CompileFunction
this article covers features introduced in spidermonkey 17 create a javascript function from a text string. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. scopechain js::autoobjectvector & the scope in which to compile the function. options js::readonlycompileoptions &am...
...wly compiled function. nargs unsigned number of arguments to pass to the function. argnames const char *const * names to assign to the arguments passed to the function. chars const char16_t * string containing the body of the function to compile. bytes const char * string containing the body of the function to compile. length
size_t the length, in characters, of body. srcbuf js::sourcebufferholder & source buffer containing the script function compile. fun js::mutablehandlefunction out parameter. on success, fun receives the result function. description js::compilefunction compiles a function from a text string chars, bytes, or srcbuf. name is the name to assign to the newly cr...
JS::CompileOffThread
this article covers features introduced in spidermonkey 31 compile a script off thread for execution. syntax bool js::cancompileoffthread(jscontext *cx, const js::readonlycompileoptions &options,
size_t length); bool js::compileoffthread(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars,
size_t length, js::offthreadcompilecallback callback, void *callbackdata); jsscript * js::finishoffthreadscript(jscontext *maybecx, jsruntime *rt, void *token); typedef void (*js::offthreadcompilecallback)(void *token, void *callbackdata); name type description cx / maybe jscontext * pointer to a js context from which to derive runtime information. requires request. in ...
...context * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rt jsruntime * pointer to a js runtime. options js::readonlycompileoptions & compile options. chars const char16_t * string containing the script to compile. length
size_t the length of chars or bytes, in characters. callback js::offthreadcompilecallback a callback function invoked when the compilation. callbackdata / token void * pointer to application-defined data. description js::compileoffthread compiles a script, chars for execution. the script is associated with a js object. chars is the string containing the text o...
... in characters. callback js::offthreadcompilecallback a callback function invoked when the compilation. callbackdata / token void * pointer to application-defined data. description js::compileoffthread compiles a script, chars for execution. the script is associated with a js object. chars is the string containing the text of the script. length indicates the
size of the text version of the script in characters. after successfully triggering an off thread compile of a script, the callback will eventually be invoked with the specified data and a token for the compilation. the callback will be invoked while off the main thread, so its operations must be thread safe. afterwards, js::finishoffthreadscript must be invoked on the main thread to get the result s...
JS::HandleValueArray
this article covers features introduced in spidermonkey 31 a handle to an array of rooted values. syntax js::handlevaluearray(const js::rootedvalue& value); js::handlevaluearray(const js::autovaluevector& values); js::handlevaluearray(const js::autovaluearray<n>& values); js::handlevaluearray(const js::callargs& args); js::handlevaluearray::frommarkedlocation(
size_t len, const js::value *elements); js::handlevaluearray::subarray(const js::handlevaluearray& values,
size_t startindex,
size_t len); js::handlevaluearray::empty(); name type description value js::rootedvalue & an element of newly created 1-length array. values js::autovaluevector & elements of newly created array. values js...
...ndlevaluearray::empty(); name type description value js::rootedvalue & an element of newly created 1-length array. values js::autovaluevector & elements of newly created array. values js::autovaluearray & elements of newly created array. args js::callargs & elements of newly created array. ...
...amp; elements of newly created array. len
size_t (frommarkedlocation only) length of elements array or (subarray only) length of sub array of values. elements js::value * (frommarkedlocation only) a pointer to the first element of an array of js::value. values js::handlevaluearray (subarray only) an array to get sub array. startindex
size_t (subarray only) an index of the first element of subarray of values. methods method description
size_t length() const returns the length of the array. const value *begin() const returns the pointer to the first element of the array. js::handlevalue operator[](
size_t i) const returns i-th element of the array. description js::han...
JS::SourceBufferHolder
this article covers features introduced in spidermonkey 31 container class for passing in script source buffers to the js engine. constructor enum ownership { noownership, giveownership }; js::sourcebufferholder(const char16_t *data,
size_t datalength, ownership ownership); name type description data const char16_t * source buffer containing the script to compile. datalength
size_t the length of data, in characters. ownership ownership see description. description js::sourcebufferholder is the container class for passing in script source buffers to the js engine. this not only groups the buffer and length values, it also provides a way to optionally pass ownership of the buffer ...
...ated with js_malloc or js_realloc if ownership is being granted to the sourcebufferholder. if ownership is not given to the sourcebufferholder, then the memory must be kept alive until the js compilation is complete. any code calling sourcebufferholder::take() must guarantee to keep the memory alive until js compilation completes. ...
...ourcebufferholder. if ownership is not given to the sourcebufferholder, then the memory must be kept alive until the js compilation is complete. any code calling sourcebufferholder::take() must guarantee to keep the memory alive until js compilation completes. normally only the js engine should be calling take(). ...
JS_CompileFunctionForPrincipals
solete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. create a security-enabled js function from a text string. ...
...requires request. ...
...r this function. name const char * name to assign the newly compiled function. nargs unsigned int number of arguments to pass to the function. argnames const char ** names to assign to the arguments passed to the function. body const char * or const jschar * string containing the source code of the function to compile. length
size_t the length, in characters, of body. filename const char * name of file or url containing the function. used to report filename or url in error messages. lineno unsigned int line number. used to report the offending line in the file or url if an error occurs. description js_compilefunctionforprincipals compiles a security-enabled function from a text stri...
JS_EncodeCharacters
obsolete since jsapi 19this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. convert a 16-bit string to an 8-bit string. syntax jsbool js_encodecharacters(jscontext *cx, const jschar *src,
size_t srclen, char *dst,
size_t *dstlen); name type description cx jscontext * a context. src const jschar * the pointer to 16-bit values of jsstring. this can be obtained with js_getstringchars. srclen
size_t the length of the source string, in 16-bit values. dst const char * the pointer to an array of bytes to be filled with encoded characters; or null. the caller is responsible for allocating an...
...on entry, if dst is non-null, *dstlenp must be the length of the destination string in 16-bit units. on success, *dstlenp receives the length of the converted string, in bytes. ...
...values. if spidermonkey was built with js_c_strings_are_utf8 defined or js_setcstringsareutf8 was called, the string is converted to utf-8. otherwise each character is simply truncated to 8 bits. if utf-8 is turned on, the length of the encoded string may vary. to calculate the number of bytes needed, call js_encodecharacters twice, like this: /* determine how many bytes to allocate. */
size_t dstlen = 0; if (!js_encodecharacters(cx, src, srclen, null, &dstlen)) return js_false; /* allocate. */ char *dst = (char *) js_malloc(cx, dstlen); if (dst == null) return js_false; /* convert characters to bytes. */ js_encodecharacters(cx, src, srclen, dst, &dstlen); /* use the converted bytes for something. */ ... /* remember to free the ...
JS_InternString
requires request. ...
...requires request. ...
...e_t length); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s const char * or const char16_t * pointer to a character array containing the data for the string. in js_internstring and js_internucstring, the string must be null-terminated. length
size_t (only in js_internstringn and js_internucstringn) the length of s in characters. description js_internstring and js_internstringn return an interned javascript string with a specified value, s. js_internucstring and js_internucstringn are the unicode versions of the function. each jsruntime keeps a table of all existing interned strings. if an interned string already exists with the de...
JS_NewExternalString
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...data before js_newexternalstring is called, and the array must remain in memory, with its contents unchanged, for as long as the javascript engine needs to hold on to it. (ultimately, the string will be garbage collected, and the javascript engine will call the string finalizer callback, allowing the application to free the array.) the array does not need to be zero-terminated. length
size_t the number of characters in the array chars. fin jsstringfinalizer a string finalizer the javascript engine should use (later) to free the string buffer chars. added in spidermonkey 17 type int (js_newexternalstringwithclosure only) indicates which string finalizer callback the javascript engine should use (later) to free the string buffer chars. this must be an...
JS_SetScriptStackQuota
the default quota is 32mb which is quite generous. ...
...the default quota is 32mb which is quite generous. ...
...the default quota is 32mb which is quite generous. the function must be called before any script compilation or execution api calls, i.e. ...
JSDBGAPI
see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above f...
...see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. j...
...see profiling javascript with shark. js_connectshark js_disconnectshark js_startchudremote js_stopchudremote the following jsnative functions can be used to expose the above four apis to scripts. js_connectshark js_disc...
A Web PKI x509 certificate primer
intermediate signs the csr (using sha256) and appends the extensions described in the file "openssl x509 -req -sha256 -days 1096 -in example.csr -cakey intkey.pem -ca int.pem -set_serial $some_large_integer -out www.example.com.pem -extfile openssl.int.cnf" security notes there are several organizations that provide recommendations regarding the security parameters for key/hash
sizes given current computational power. for the end date of the root cert created following the instructions in this page (year 2017). these are the recomendations of bit
sizes (from http://www.keylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 172 172 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 20...
...eylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 172 172 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 2010 4096 200 256 rfc 3766 2358 200 --- bsi 1976 256 256 in other words, sha1 is now deprecated for new uses. we should use at least 3072 key
sizes and at least a 256 ecc curve. thus the recommendation here is for the root to be 4096 if using rsa and p384 for the root key. (p384 also chosen for compatibility as most ssl/tls implementations support this part of suite b). error codes in firefox here are some common errors that might be encountered when working with certificates in firefox. error code what it means what can i...
... sec_error_expired_issuer_certificate an issuer certificate is too old re-issue the issuer certificate mozilla_pkix_error_ca_cert_used_as_end_entity a certificate with a basic constraints extension with ca:true is being used as an end-entity certificate re-generate the end-entity certificate without the basic constraints extension mozilla_pkix_error_inadequate_key_
size a certificate has a key that is too small to be secure re-generate a larger key and issue a certificate using that key ...
NS ConvertASCIItoUTF16 external
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
NS ConvertUTF16toUTF8 external
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
NS ConvertUTF8toUTF16 external
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
NS LossyConvertUTF16toASCII external
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
PromiseFlatCString (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
PromiseFlatString (External)
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsACString (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsAString (External)
prunichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...nichar charat(pruint32) const - source parameters pruint32 apos operator[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsAutoString (External)
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsCAutoString (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsCStringContainer (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsCString external
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsDependentCString external
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsDependentCSubstring external
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsDependentString external
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsDependentSubstring external
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...nwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsLiteralCString (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsLiteralString (External)
operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... operator[] char operator[](pruint32) const - source parameters pruint32 apos first char first() const - source beginwriting pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... pruint32 beginwriting(char**, char**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsStringContainer (External)
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
nsString external
tor[] prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
... prunichar operator[](pruint32) const - source parameters pruint32 apos first prunichar first() const - source beginwriting pruint32 beginwriting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. ...
...riting(prunichar**, prunichar**, pruint32) - source get the length, begin writing, and optionally set the length of a string all in one operation. @param new
size size the string to this length. pass pr_uint32_max to leave the length unchanged. @return the new length of the string, or 0 if resizing failed. ...
IAccessibleAction
teps to navigate a context menu. the first action should be equivalent to the msaa default action. if there is only one action, iaccessibleaction should also be implemented. method overview [propget] hresult description([in] long actionindex, [out] bstr description ); hresult doaction([in] long actionindex ); [propget] hresult keybinding([in] long actionindex, [in] long nmaxbindings, [out,
size_is(,nmaxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); [propget] hresult localizedname([in] long actionindex, [out] bstr localizedname ); hresult nactions([out,retval] long nactions ); [propget] hresult name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object. [propget] hresult descripti...
... there is no need to implement this method for single action controls since that would be redundant with the standard msaa programming practice of getting the mnemonic from get_acckeyboardshortcut. an at such as an on screen keyboard might not expose these bindings but provide alternative means of activation. [propget] hresult keybinding( [in] long actionindex, [in] long nmaxbindings, [out,
size_is(,nmaxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); parameters actionindex 0 based index specifying which action's key bindings should be returned. nmaxbindings this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. keybindings an array of bstrs, allocated by the server, one for each key binding...
...ngs ); parameters actionindex 0 based index specifying which action's key bindings should be returned. nmaxbindings this parameter is ignored. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. keybindings an array of bstrs, allocated by the server, one for each key binding. free it with cotaskmemfree. nbindings the number of key bindings returned; the
size of the returned array. return value e_invalidarg if bad [in] passed, [out] values are null and 0 respectively. s_false if there are no relations, [out] values are null and 0 respectively. s_ok. localizedname() returns the localized name of specified action. [propget] hresult localizedname( [in] long actionindex, [out] bstr localizedname ); parameters actionindex 0 based index specifying wh...
mozISpellCheckingEngine
1.7 this interface represents a spell checking engine. the built in hunspell engine has contract id "@mozilla.org/spellchecker/engine;1". extensions can use this interface to check spelling or provide its own spell checker to editors. method overview void adddirectory(in nsifile dir); boolean check(in wstring word); void getdictionarylist([array,
size_is(count)] out wstring dictionaries, out pruint32 count); void removedirectory(in nsifile dir); void suggest(in wstring word,[array,
size_is(count)] out wstring suggestions, out pruint32 count); attributes attribute type description copyright wstring a string indicating the copyright of the engine. no...
..., the spell checker sends a "spellcheck-dictionary-update" notification. boolean check( in wstring word ); parameters word a word to check for correct spelling. return value returns true if word is spelled correctly according to the dictionary attribute, and returns false if word is misspelled. getdictionarylist() gets the list of dictionaries. void getdictionarylist( [array,
size_is(count)] out wstring dictionaries, out pruint32 count ); parameters dictionaries a list of dictionaries supported by this spell checker. the dictionary attribute can be set to one of these. each dictionary name is typically but not always a locale code. count the length of dictionaries. removedirectory() removes all the dictionaries in the specified directory fr...
...ctory from the spell checker. void removedirectory( nsifile dir ); parameters dir an nsifile object indicating the directory whose spell checkers are to be removed from the spell checker. suggest() gets a list of suggestions for a misspelled word. when this changes, the spell checker sends a "spellcheck-dictionary-update" notification. void suggest( in wstring word, [array,
size_is(count)] out wstring suggestions, out pruint32 count ); parameters word a word, which is misspelled according to check. suggestions a list of words suggested instead of word. count the length of suggestions. ...
mozIStorageVacuumParticipant
rd 3.3 / seamonkey 2.1) to create an instance of this interface, use the category manger, with the category "vacuum-participant". add more details here. method overview boolean onbeginvacuum(); void onendvacuum(in boolean asucceeded); attributes attribute type description databaseconnection mozistorageconnection a connection to the database file to be vacuumed. ...
...reate an instance of this interface, use the category manger, with the category "vacuum-participant". add more details here. method overview boolean onbeginvacuum(); void onendvacuum(in boolean asucceeded); attributes attribute type description databaseconnection mozistorageconnection a connection to the database file to be vacuumed. expecteddatabasepage
size long the expected page
size, in bytes, for the database. ...
...acuum-participant". add more details here. method overview boolean onbeginvacuum(); void onendvacuum(in boolean asucceeded); attributes attribute type description databaseconnection mozistorageconnection a connection to the database file to be vacuumed. expecteddatabasepage
size long the expected page
size, in bytes, for the database. the vacuum manager will try to correct the page
size when the browser is idle, using this value as a target. valid page
sizes are in the range 512 to 65,536. the recommended value is mozistorageconnection::default_page_
size. note: if the database is using the wal journal node and the current page
size is not the expected one, the journal node will be changed to truncate because wal doesn't allow page
size changes. the vacuum manager will try to res...
nsIAccessibleRole
e user. the role is used by xul:menubar or role="menubar". role_scrollbar 3 represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip 4 represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to re
size it. role_sound 5 represents a system sound, which is associated with various system events. role_cursor 6 represents the system mouse pointer. role_caret 7 represents the system caret. the role is supported for caret. role_alert 8 represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire on screen co...
...igger@appearance="minimal". role_helpballoon 31 displays a help topic in the form of a tooltip or help balloon. role_character 32 represents a cartoon-like graphic object, such as microsoft office assistant, which is displayed to provide help to users of an application. role_list 33 represents a list box, allowing the user to select one or more items. it is used for xul:listbox, html:select@
size, role="list". see also role_list_item. role_listitem 34 represents an item in a list. see also role_list. role_outline 35 represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches. is is used for role="tree". role_outlineitem 36 represents an item in an outline or tree structure. it is used for...
...frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane 76 a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. also refer to role_root_pane. role_html_container 77 a document container for html, whose children represent the document content. role_icon 78 a small fixed
size picture, typically used to decorate components. role_label 79 presents an icon or short string in an interface. role_layered_pane 80 a layered pane. a specialized pane that allows its children to be drawn in layers, providing a form of stacking order. this is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window. also refer to rol...
nsIAppShellService
d by this appshellservice. read only. hiddenwindow nsixulwindow return the (singleton) application hidden window, automatically created and maintained by this appshellservice. read only. nativeappsupport nsinativeappsupport getter for "native application support." read only. obsolete since gecko 1.8 constants constant value description
size_to_content -1 create a window, which will be initially invisible. econsiderquit 1 attempt to quit if all windows are closed. obsolete since gecko 1.8 eattemptquit 2 try to close all windows, then quit if successful. obsolete since gecko 1.8 eforcequit 3 force all windows to close, then quit. obsolete since gecko 1.8 methods close...
...en window. void createhiddenwindow( in nsiappshell aappshell ); parameters aappshell a widget "appshell" (event processor) to associate with the new window. createstartupstate() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs. note:
size_to_content may be used for width or height. boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened. awindowheight the height to make the initial window(s) opened. return value true if a window was opened. createtoplevelwindow() this method creates a window, which will be initially invisibl...
..._false. aloaddefaultpage obsolete since gecko 1.8 controls whether the window should try to load a default content page on its own. achromemask chrome flags affecting the kind of os border given to the window. (see nsibrowserwindow for bit/flag definitions). ainitialwidth width, in pixels, of the window. width of window at creation. can be overridden by the "width" tag in the xul. set to ns_
sizetocontent to force the window to wrap to its contents. ainitialheight height, in pixels, of the window. height of window at creation. can be overridden by the "height" tag in the xul. set to ns_
sizetocontent to force the window to wrap to its contents. aappshell a widget "appshell" (event processor) to associate with the new window. return value returns the newly created window. destroyhi...
nsIAsyncStreamCopier
of one stream to another. inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunk
size, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation. the specified observer is notified when the copy completes. void asynccopy( in nsirequestobserver aobserver, in nsisupports aobservercontext ); parameters aobserver receives notifications. aobservercontext the object to receive notifications with information about the progress of the copy ope...
...s notifications. aobservercontext the object to receive notifications with information about the progress of the copy operation. init() initializes the stream copier. note: at least one of the streams must be buffered. void init( in nsiinputstream asource, in nsioutputstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunk
size, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied. asink specifies the destination for the data. atarget specifies the thread on which the copy will occur. a null value is permitted and causes the copy to occur on an unspecified background thread. asourcebuffered true if asource implements nsiinputstream.readsegments(). asinkbuffered true i...
...arameters asource contains the data to be copied. asink specifies the destination for the data. atarget specifies the thread on which the copy will occur. a null value is permitted and causes the copy to occur on an unspecified background thread. asourcebuffered true if asource implements nsiinputstream.readsegments(). asinkbuffered true if asink implements nsiinputstream.writesegments() . achunk
size specifies how many bytes to read and write at a time. this controls the granularity of the copy operation. this value should match the segment
size of any buffered streams involved in the operation. aclosesource true if asource should be closed after copying. aclosesink true if asink should be closed after copying. see also nsiinputstream nsioutputstream ...
nsIBinaryInputStream
big-endian and little-endian platforms. inherits from: nsiinputstream last changed in gecko 1.7 method overview pruint8 read8(); pruint16 read16(); pruint32 read32(); pruint64 read64(); unsigned long readarraybuffer(in pruint32 alength, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint32 alength, [array,
size_is(alength), retval] out pruint8 abytes); void readbytes(in pruint32 alength, [
size_is(alength), retval] out string astring); acstring readcstring(); double readdouble(); float readfloat(); astring readstring(); void setinputstream(in nsiinputstream ainputstream); methods read8() reads from the stream. pruint8 read8(); parameters ...
...ue the number of bytes actually read into aarraybuffer. readboolean() reads an 8-bit value from the stream, treating it as a boolean value. prbool readboolean(); parameters none. return value a boolean value read from the stream. readbytearray() reads an opaque byte array from the stream, storing the results as an array of pruint8s. ...
... astring a string containing the bytes read from the stream. exceptions thrown ns_error_failure if it can't read alength bytes. readcstring() reads an 8-bit pascal style string from the stream. ...
nsIDOMProgressEvent
progressevent. ...
...read only. methods initprogressevent() deprecated since gecko 22.0 this method has been removed from use in javascript in gecko 22.0. use the regular constructor to construct a synthetic progressevent. it still is usable from native c++ code. initializes the progress event object. ...
...earg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters typearg the type of event. must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the created event can be canceled. lengthcomputablearg if the
size of the data to be transferred is known, this should be true. otherwise, specify false. loadedarg the number of bytes already transferred. must be a non-negative value. totalarg the total number of bytes to be transferred. if lengthcomputable is false, this must be zero. see also using xmlhttprequest xmlhttprequest nsixmlhttprequesteventtarget nsixmlhttprequest ...
nsIDOMWindow
e. method overview nsidomcssstyledeclaration getcomputedstyle(in nsidomelement elt, [optional] in domstring pseudoelt); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void
sizetocontent(); attributes attribute type description applicationcache nsidomofflineresourcelist get the application cache object for this window. read only. note: prior to gecko 7.0 this attribute was part of nsidomwindow2. document nsidomdocument the document contained in the window. read only. frames nsidomwindowcollection the chi...
... "replaceable" in javascript. read only. sessionstorage nsidomstorage session storage for the current browsing context. data stored in session storage may be accessed by any site in the browsing context. read only.note: prior to gecko 8.0 this attribute was part of nsidomstoragewindow. textzoom float get or set the document scale factor as a multiplier of the default
size. when setting this attribute, an ns_error_not_implemented error may be returned by implementations not supporting zoom. this attribute should always return 1.0 for implementations not supporting text zoom. 1.0 represents normal (unzoomed)
size. native code only! top nsidomwindow the root window for the hierarchy of windows that contain this nsidomwindow. this is the window itself i...
... specified number of pages. void scrollbypages( in long numpages ); parameters numpages the number of pages by which to scroll. scrollto() scrolls the window to an absolute pixel offset. void scrollto( in long xscroll, in long yscroll ); parameters xscroll the horizontal position to which to scroll, in pixels. yscroll the vertical position to which to scroll, in pixels.
sizetocontent() makes the window's
size fit the contents of the window. void
sizetocontent(); parameters none. see also dom ...
nsIDownload
e alphanumeric characters. read only. mimeinfo nsimimeinfo provides the targets relevant mime information, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete. read only. ...
...read only. source nsiuri the source uri of the download. read only. speed double the downloads transfer speed in bytes per second. read only. starttime long long the time at which the transfer was started. read only. ...
...unknown. read only. referrer nsiuri the referrer uri of the download. this is only valid for http downloads, and can be null. read only. resumable boolean indicates if the download can be resumed after being paused or not. this is only the case if the download is over http/1.1 or ftp and if the server supports it. read only.
size long long the total
size of the file in bytes, or ll_maxuint if the file's
size is unknown. read only. source nsiuri the source uri of the download. read only. speed double the downloads transfer speed in bytes per second. read only. starttime long long the time at which the transfer was started. read only. state short the downloads current state. see nsidow...
nsIMarkupDocumentViewer
docshell/base/nsimarkupdocumentviewer.idlscriptable describes the properties of a content viewer for an html or xml markup document. inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview void scrolltonode(in nsidomnode node); void
sizetocontent(); attributes attribute type description allowplugins boolean if true, plugins are allowed within the doc shell. default = true. obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user...
...t will be displayed without reordering. 1 - the default order for the charset 2 - logical order 3 - visual order. defaultcharacterset acstring forcecharacterset acstring fullzoom float the amount by which to scale all lengths. default is 1.0. hintcharacterset acstring hintcharactersetsource print32 minfont
size long the minimum font
size to allow. note: this attribute was added late in the gecko 2.0 development cycle and was implemented by the nsimarkupdocumentviewer_mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0. prevdoccharacterset acstring textzoom float the amount by which to scale all text. default is 1.0. metho...
...mozilla_2_0_branch interface; it was merged into this interface in gecko 7.0. prevdoccharacterset acstring textzoom float the amount by which to scale all text. default is 1.0. methods scrolltonode() scroll the make the specified node visible. void scrolltonode( in nsidomnode node ); parameters node the nsidomnode of the node to make visible.
sizetocontent() tell the container to shrink-to-fit or grow-to-fit its contents. void
sizetocontent(); parameters none. see also full page zoom ...
nsIMsgDBHdr
ute. messagekey nsmsgkey indicates the database key for this message. setting this property will probably result in an inconsistent database representation, so only internal database code should set this attribute. threadparent nsmsgkey indicates the parent of this message in its thread. if this is the root of the thread, it will return nsmsgkey_none. message
size unsigned long indicates the
size of this message in bytes. linecount unsigned long indicates the
size of the message body in number of lines. statusoffset unsigned long indicates the offset within the message of the x-mozilla-status header. messageoffset unsigned long indicates the position of the offline copy of an imap or news messages within t...
... date prtime indicates the date of this message; the equivalent header is the date: header. dateinseconds unsigned long readonly: indicates the date of this message as a unix timestamp. ...
... date prtime indicates the date of this message; the equivalent header is the date: header. dateinseconds unsigned long readonly: indicates the date of this message as a unix timestamp. messageid string indicates the message id of this message, without angle brackets. ...
nsIPluginHost
nsiplugin getpluginfactory(in string amimetype); native code only! obsolete since gecko 1.9.2 void getpluginname(in nsiplugininstance ainstance, [shared] out string apluginname); native code only! nsiplugintag getplugintagforinstance(in nsiplugininstance ainstance); native code only! void getplugintags([optional] out unsigned long aplugincount, [retval, array,
size_is(aplugincount)] out nsiplugintag aresults); void handlebadplugin(in prlibraryptr alibrary, in nsiplugininstance instance); native code only! void init(); native code only! void instantiatedummyjavaplugin(in nsiplugininstanceowner aowner); native code only! void instantiateembeddedplugin(in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner);...
...you need it longer than that. native code only!getplugintagforinstance get the plugin tag associated with a given plugin instance. nsiplugintag getplugintagforinstance( in nsiplugininstance ainstance ); parameters ainstance the plugin instance object. return value plugin tag object. getplugintags() void getplugintags( out unsigned long aplugincount, optional [retval, array,
size_is(aplugincount)] out nsiplugintag aresults ); parameters aplugincount optional aresults native code only!handlebadplugin void handlebadplugin( in prlibraryptr alibrary, in nsiplugininstance instance ); parameters alibrary instance native code only!init void init(); parameters none. native code only!instantiatedummyjavaplugin instantiate a "dummy" java plu...
...stom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data. if "content-length" string and end of headers is found it substitutes single lf with crlf in the headers, so the end of headers always will be crlfcrlf (single cr in headers, if any, remain untouched) else it puts "content-length: "+
size_of_data+crlfcrlf at the beginning of the output buffer and memcpy data to the output buffer. on failure outpostdata and outpostdatalen will be set in 0. void parsepostbuffertofixheaders( in string ainpostdata, in unsigned long ainpostdatalen, out string aoutpostdata, out unsigned long aoutpostdatalen ); parameters ainpostdata the post data. ainpostdatalen the length ainpostdata.
nsIPrefLocalizedString
tring so the preferences service can have a unique identifier to distinguish between requests for normal wide strings nsisupportsstring) and 'localized' wide strings, which get their default values from properites files. ...
...it should only be the number of characters for which there is space in the string. data the string data to be stored. ...
...it should only be the number of characters for which there is space in the string. data the string data to be stored. ...
nsIPushMessage
ystem subscription. inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43) nsipushmessage is the subject of a push-message observer notification. this interface resembles pushmessagedata from the push api. ...
... data the byte array containing the data. datalen and data are out parameters. when called from javascript, nsipushmessage.binary() returns data. please see method parameters in xpidl for more details on using out parameters in javascript. ...
...t uint8_t data); methods text() extracts the message data as a utf-8 text string. domstring text(); parameters none. json() parses the message data as json. jsval json(); parameters none. binary() extracts the message data as a byte array. void binary( [optional] out uint32_t datalen, [array, retval,
size_is(datalen)] out uint8_t data ); parameters datalen the data
size. data the byte array containing the data. datalen and data are out parameters. when called from javascript, nsipushmessage.binary() returns data. please see method parameters in xpidl for more details on using out parameters in javascript. see also nsipushservice nsipushsubscription pushmessagedata ...
nsIScriptableUnicodeConverter
throws ns_error_uconv_noconv if...
...throws ns_error_uconv_noconv if the requested charset is not supported. methods convertfromunicode() converts the data from unicode to one charset. returns the converted strin...
... asrc ); finish() returns the terminator string. should be called after convertfromunicode() and appended to that function's return value. acstring finish(); converttounicode() converts the data from one charset to unicode. astring converttounicode( in acstring asrc ); convertfrombytearray() converts an array of bytes to a unicode string. astring convertfrombytearray( [const,array,
size_is(acount)] in octet adata, in unsigned long acount ); converttobytearray() convert a unicode string to an array of bytes. finish does not need to be called. void converttobytearray(in astring astring, out unsigned long alen, optional [array,
size_is(alen),retval] out octet adata ); converttoinputstream() converts a unicode string to an input stream. the bytes in the stream are encod...
nsISupportsArray
return value compact() void compact(); parameters none. deleteelementat() void deleteelementat( in unsigned long ...
...return value compact() void compact(); parameters none. deleteelementat() void deleteelementat( in unsigned long aindex ); param...
...lates the xpcom interface guidelines removelastelement() boolean removelastelement( [const] in nsisupports aelement ); parameters aelement return value violates the xpcom interface guidelines replaceelementat() boolean replaceelementat( in nsisupports aelement, in unsigned long aindex ); parameters aelement aindex return value violates the xpcom interface guidelines
sizeto() boolean
sizeto( in long a
size ); parameters a
size return value ...
nsIUpdateCheckListener
nterface describing an object that listens to the progress of an update check operation. this object is notified as the check continues, finishes and if it has an error. ...
...upports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void oncheckcomplete(in nsixmlhttprequest request, [array,
size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); void onerror(in nsixmlhttprequest request, in nsiupdate update); void onprogress(in nsixmlhttprequest request, in unsigned long position, in unsigned long total
size); methods oncheckcomplete() called when the update check is completed. void oncheckcomplete( in nsixmlhttprequest request, [array,
size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount ); parameters request the nsixmlhttprequest object handling the update check. updates an array of nsiupdate objects describing the available updates. updatecount the number of updates ...
...quest, in nsiupdate update ); parameters request the nsixmlhttprequest object handling the update check. update an nsiupdate object containing details about the error in its statustext attribute. onprogress() called every time there is a progress notification loading the update service file. void onprogress( in nsixmlhttprequest request, in unsigned long position, in unsigned long total
size ); parameters request the nsixmlhttprequest object handling the update check. position the number of bytes downloaded so far. total
size the total number of bytes that need to be downloaded. see also nsiupdatepatch nsiupdate nsiupdatechecker nsiapplicationupdateservice nsiupdatemanager nsiupdateprompt nsiupdatetimermanager ...
Working with ArrayBuffers
ress(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight * 4 because per pixel there is r, g, b, a numbers casted.tostring(); // "ctypes.uint8_t.array(640000)([45, 66, 135, 255, 99, 86, 55, 255, .......... ])" myimgdat.data.set(casted); the ctypes.cast takes a couple of milliseconds, however, the myimgdat.data.set takes up to 800ms for a
size of 52,428,800 (which is image
size of 1280 x 1024 pixels). so, for the
size of 640,000 it takes about 98ms. method 2: manually handled another strategy is to handle it manually, as illustrated by the following code example: var casted = ctypes.cast(pixelbuffer.address(), ctypes.uint8_t.array(myimgdata.data.length).ptr).contents; // myimgdat.data.length is imgwidth * imgheight *4 because per pi...
...(a); } myimgdat.data.set(normalarr); the preceding example, however, does not take advantage of method 1, but instead manually goes through the array and sets the imagedata array. the cast takes a couple of milliseconds, roughly the same as method 1. however, the manual method a, in the preceding example, takes ~1300 ms. method b takes ~1400 ms, for an array length of 52,428,800 (which is image
size of 1280 x 1024 pixels). method 3: transfer byte array by calling memcpy this is the recommended method, as it only takes a couple of milliseconds, even for large arrays. notice that the following example does not cast the pixelbuffer. passing an arraybuffer object to pointer type will pass the pointer to buffer (based on //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#3080).
...i dont know where to memcpy is defined on your operating system, "' + os.constants.sys.name + '"'); lib.close(); } } try { var memcpy = lib.declare('memcpy', os.constants.sys.name.tolowercase().indexof('win') == 0 ? ...
Plug-in Basics - Plugins
lar subpart of the page (unless it is hidden). embedded plug-ins are commonly used for multimedia images relating to text in the page, such as the adobe flash plug-in. when gecko encounters the object or embed element in a document, it attempts to find and display the file represented by the data and src attributes, respectively. the height and width attributes of the object element determine the
size of the embedded plug-in in the html page. for example, this object element calls a plug-in that displays video: <object data="newave.avi" type="video/avi" width="320" height="200" autostart="true" loop="true"> </object> a hidden plug-in is a type of embedded plug-in that is not drawn on the screen when it is invoked. it is created by using the hidden attribute of the embed elem...
...analog clock or fetches all of its data dynamically. for a visible plug-in, you must include width and height if you use type; no default value is used. the pluginurl attribute is the url of the plug-in or of the xpi in which the plug-in is stored (see installing plug-ins for more information on the xpi file format). the embed element has a number of attributes that determine the appearance and
size of the plug-in instance, including these: the border and frameborder attributes specify the
size of a border for the plug-in or draw a borderless plug-in. height, width, and units determine the
size of the plug-in in the html page. if the plug-in is not hidden, the height and width attributes are required. hspace and vspace create a margin of the specified width, in pixels, around the plug-i...
...t. for example, this embed element loads a picture with the imaginary data type dgs: <embed src="mypic.dgs" width="320" height="200" border="25" align="right"> gecko interprets the attributes as follows: src: load the data file and determine the mime type of the data. width and height: set the area of the page handled by the plug-in to 320 by 200 pixels. in general, use css to control the
size and location of elements within an html page. border: draw a border 25 pixels wide around the plug-in. align: align the plug-in at the right side of the web page. the following example shows an embed element nested within an object element, which is necessary for browsers that do not support the embed element. example 2: embed within object <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444...
Debugger keyboard shortcuts - Firefox Developer Tools
to open the profiler, use shift + function + f5). note: before firefox 66, the combination ctrl + shift + s on windows and linux or cmd + opt + s on macos would open/close the debugger. ...
...efox 66, the combination ctrl + shift + s on windows and linux or cmd + opt + s on macos would open/close the debugger. from firefox 66 and later, this is no longer the case. ...
...ux or cmd + opt + s on macos would open/close the debugger. from firefox 66 and later, this is no longer the case. ...
Debugger.Memory - Firefox Developer Tools
, dobj.allocationsite returns a saved call stack indicating wheredobj’s referent was allocated. allocation logging ifdbg is a debugger instance, and dbg.memory.trackingallocationsites is set to true, then the javascript engine logs each object allocated bydbg’s debuggee code. you can retrieve the current log by calling dbg.memory.drainallocationslog. you can control the limit on the log’s
size by setting dbg.memory.maxallocationsloglength. censuses a census is a complete traversal of the graph of all reachable memory items belonging to a particular debugger‘s debuggees. it produces a count of those items, broken down by various criteria. ifdbg is a debugger instance, you can call dbg.memory.takecensus to conduct a census of its debuggees’ possessions. accessor properties of the ...
...rom one object to the next. to take advantage of this regularity, spidermonkey objects with identical sets of properties may share their property metadata; only property values are stored directly in the object. array objects may also be optimized, if the set of live indices is dense. strings spidermonkey has three representations of strings: normal: the string’s text is counted in its
size. substring: the string is a substring of some other string, and points to that string for its storage. this representation may result in a small string retaining a very large string. however, the memory consumed by the string itself is a small constant independent of its
size, since it is simply a reference to the larger string, a start position, and a length. concatenations: when ask...
...is simply a reference to the larger string, a start position, and a length. concatenations: when asked to concatenate two strings, spidermonkey may elect to delay copying the strings’ data, and represent the result simply as a pointer to the two original strings. again, such a string retains other strings, but the memory consumed by the string itself is a small constant independent of its
size, since it is simply a pair of pointers. spidermonkey converts strings from the more complex representations to the simpler ones when it pleases. such conversions usually increase memory consumption. spidermonkey shares some strings amongst all web pages and browser js. these shared strings, called atoms, are not included in censuses’ string counts. scripts spidermonkey has a complex, hyb...
AnalyserNode.getFloatTimeDomainData() - Web APIs
the getfloattimedomaindata() method of the analysernode interface copies the current waveform, or time-domain, data into a float32array array passed into it. if the array has fewer elements than the analysernode.fft
size, excess elements are dropped. if it has more elements than needed, excess elements are ignored. syntax var audioctx = new audiocontext(); var analyser = audioctx.createanalyser(); var dataarray = new float32array(analyser.fft
size); // float32array needs to be the same length as the fft
size analyser.getfloattimedomaindata(dataarray); // fill the float32array with data returned from getfloattimedomaindata() parameters array the float32array that the time domain data will be copied to. if the array has fewer elements than the analysernode.frequencybincount, excess ele...
...estanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...
...me domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic-float-data demo (see the source code too). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...
Attr - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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"...
...you should revise yo...
CanvasRenderingContext2D.fillText() - Web APIs
the canvasrenderingcontext2d method filltext(), part of the canvas 2d api, draws a text string at the specified coordinates, filling the string's characters with the current fillstyle. an optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font
size. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. the text is rendered using the font and text layout configuration as defined by the font, textalign, textbaseline, and direction properties. to draw the outlines of the characters in a string, call the context's stroketext() method. syntax canvasrenderingcontext2d.filltext(text, x, y [, maxwidth]...
... begin drawing the text, in pixels. maxwidth optional the maximum number of pixels wide the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font
size in order to fit the text in the specified width. return value undefined. examples drawing filled text this example writes the words "hello world" using the filltext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels across. <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this example...
...as.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context. with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call filltext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text
size this example writes the words "hello world," restricting its width to 140 pixels. html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html...
CanvasRenderingContext2D.strokeText() - 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. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. use the filltext() method to fill the text characters rather than having just their outlines drawn. syntax canvasrenderingcontext2d.stroketext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context. the text is rendered using the settings...
...e of the point at which to begin drawing the text. maxwidth optional the maximum width the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font
size in order to fit the text in the specified width. return value undefined. examples drawing text outlines this example writes the words "hello world" using the stroketext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels high. <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this exa...
...etcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context. with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call stroketext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text
size this example writes the words "hello world," restricting its width to 140 pixels. html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status comment ht...
CanvasRenderingContext2D - Web APIs
t(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas. canvasrenderingcontext2d.clearrect() sets all pixels in the rectangle defined by starting point (x, y) and
size (width, height) to transparent black, erasing any previously drawn content. canvasrenderingcontext2d.fillrect() draws a filled rectangle at (x, y) position whose
size is determined by width and height. canvasrenderingcontext2d.strokerect() paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. drawing text ...
...renderingcontext2d.arc() adds a circular arc to the current path. canvasrenderingcontext2d.arcto() adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line. canvasrenderingcontext2d.ellipse() adds an elliptical arc to the current path. canvasrenderingcontext2d.rect() creates a path for a rectangle at position (x, y) with a
size that is determined by width and height. drawing paths canvasrenderingcontext2d.fill() fills the current sub-paths with the current fill style. canvasrenderingcontext2d.stroke() strokes the current sub-paths with the current stroke style. canvasrenderingcontext2d.drawfocusifneeded() if a given element is focused, this method draws a focus ring around the current path. canvasrenderingcon...
...stead. canvasrenderingcontext2d.webkitimagesmoothingenabled use canvasrenderingcontext2d.imagesmoothingenabled instead. blink only canvasrenderingcontext2d.iscontextlost() inspired by the same webglrenderingcontext method it returns true if the canvas context has been lost, or false if not. webkit only canvasrenderingcontext2d.webkitbackingstorepixelratio the backing store
size in relation to the canvas element. see high dpi canvas. canvasrenderingcontext2d.webkitgetimagedatahd intended for hd backing stores, but removed from canvas specifications. canvasrenderingcontext2d.webkitputimagedatahd intended for hd backing stores, but removed from canvas specifications. gecko only prefixed apis canvasrenderingcontext2d.mozcurrenttransform sets or gets ...
Manipulating video using canvas - Web APIs
contexts for each of the two canvases. these will be used when we're actually doing the chroma-keying effect. then addeventlistener() is called to begin watching the video element so that we obtain notification when the user presses the play button on the video. in response to the user beginning playback, this code fetches the width and height of the video, halving each (we will be halving the
size of the video when we perform the chroma-keying effect), then calls the timercallback() method to start watching the video and computing the visual effect. the timer callback the timer callback is called initially when the video starts playing (when the "play" event occurs), then takes responsibility for establishing itself to be called periodically in order to launch the keying effect for each ...
...rame.data[i * 4 + 3] = 0; } this.ctx2.putimagedata(frame, 0, 0); return; } when this routine is called, the video element is displaying the most recent frame of video data, which looks like this: in line 2, that frame of video is copied into the graphics context ctx1 of the first canvas, specifying as the height and width the values we previously saved to draw the frame at half
size. note that you can simply pass the video element into the context's drawimage() method to draw the current video frame into the context. the result is: line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getimagedata() method on the first context. this provides raw 32-bit pixel image data we can then manipulate. line 4 computes the number of pixels ...
...e video element into the context's drawimage() method to draw the current video frame into the context. the result is: line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getimagedata() method on the first context. this provides raw 32-bit pixel image data we can then manipulate. line 4 computes the number of pixels in the image by dividing the total
size of the frame's image data by four. the for loop that begins on line 6 scans through the frame's pixels, pulling out the red, green, and blue values for each pixel, and compares the values against predetermined numbers that are used to detect the green screen that will be replaced with the still background image imported from foo.png. every pixel in the frame's image data that is found that is w...
Applying styles and colors - Web APIs
the setlinedash method accepts a list...
...four properties: shadowoffsetx = float indicates the horizontal distance the shadow should extend from the object. this value isn't affected by the transformation matrix. the default is 0. shadowoffsety = float indicates the vertical distance the shadow should extend from the object. this value isn't affected by the transformation matrix. the default is 0. shadowblur = float indicates the
size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. shadowcolor = color a standard css color value indicating the color of the shadow effect; by default, it is fully-transparent black. the properties shadowoffsetx and shadowoffsety indicate how far the shadow should extend from the object...
...erties shadowoffsetx and shadowoffsety indicate how far the shadow should extend from the object in the x and y directions; these values aren't affected by the current transformation matrix. use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. these are both 0 by default. the shadowblur property indicates the
size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. the shadowcolor property is a standard css color value indicating the color of the shadow effect; by default, it is fully-transparent black. note: shadows are only drawn for source-over compositing operations. a shadowed text example t...
Compositing example - Web APIs
function createcanvas() { var canvas = document.createelement("canvas"); can...
... g = b; b = v; break; case 4: r = c; g = a; b = v; break; case 5: r = v; g = a; b = b; break; } } return { r: r, g: g, b: b }; }; var createinterlace = function (
size, color1, color2) { var proto = document.createelement("canvas").getcontext("2d"); proto.canvas.width =
size * 2; proto.canvas.height =
size * 2; proto.fillstyle = color1; // top-left proto.fillrect(0, 0,
size,
size); proto.fillstyle = color2; // top-right proto.fillrect(
size, 0,
size,
size); proto.fillstyle = color2; // bottom-left proto.fillrect(0,
size,
size,...
... color1, color2) { var proto = document.createelement("canvas").getcontext("2d"); proto.canvas.width =
size * 2; proto.canvas.height =
size * 2; proto.fillstyle = color1; // top-left proto.fillrect(0, 0,
size,
size); proto.fillstyle = color2; // top-right proto.fillrect(
size, 0,
size,
size); proto.fillstyle = color2; // bottom-left proto.fillrect(0,
size,
size,
size); proto.fillstyle = color1; // bottom-right proto.fillrect(
size,
size,
size,
size); var pattern = proto.createpattern(proto.canvas, "repeat"); pattern.data = proto.canvas.todataurl(); return pattern; }; var op_8x8 = createinterlace(8, "#fff", "#eee"); ...
Pixel manipulation with canvas - Web APIs
there are two versions of the createimagedata() method: var myimagedata = ctx.createimagedata(width, height); this creates a new imagedata object with the specif...
... grayscalebtn.addeventlistener('click', grayscale); } zooming and anti-aliasing with the help of the drawimage() method, a second canvas and the imagesmoothingenabled property, we are able to zoom into our picture and see the details. we get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. then we copy that one over to another canvas and re
size the image to the
size we want it to. in the zoom canvas we re
size a 10×10 pixel crop of the original canvas to 200×200. zoomctx.drawimage(canvas, math.min(math.max(0, x - 5), img.width - 10), math.min(math.max(0, y - 5), img.height - 10), 10, 10, 0, 0, 200, 200); because anti-aliasing is enabled by default, we might want to disable the smo...
...an no longer be read and saved. see security and tainted canvases in allowing cross-origin use of images and canvas canvas.todataurl('image/png') default setting. creates a png image. canvas.todataurl('image/jpeg', quality) creates a jpg image. optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file
size. once you have generated a data uri from you canvas, you are able to use it as the source of any <image> or put it into a hyper link with a download attribute to save it to disc, for example. you can also create a blob from the canvas. canvas.toblob(callback, type, encoderoptions) creates a blob object representing the image contained in the canvas. ...
Transformations - Web APIs
with transformations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it. saving and restoring state before we look at the transformation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings. save() saves the entire state of the canvas. ...
...ht="200"></canvas> draw(); screenshotlive sample scaling the next transformation method is scaling. we use it to increase or decrease the units in our canvas grid. this can be used to draw scaled down or enlarged shapes and bitmaps. scale(x, y) scales the canvas units by x horizontally and by y vertically. both parameters are real numbers. values that are smaller than 1.0 reduce the unit
size and values above 1.0 increase the unit
size. values of 1.0 leave the units the same
size. using negative numbers you can do axis mirroring (for example using translate(0,canvas.height); scale(1,-1); you will have the well-known cartesian coordinate system, with the origin in the bottom left corner). by default, one unit on the canvas is exactly one pixel. if we apply, for instance, a scaling f...
...sing negative numbers you can do axis mirroring (for example using translate(0,canvas.height); scale(1,-1); you will have the well-known cartesian coordinate system, with the origin in the bottom left corner). by default, one unit on the canvas is exactly one pixel. if we apply, for instance, a scaling factor of 0.5, the resulting unit would become 0.5 pixels and so shapes would be drawn at half
size. in a similar way setting the scaling factor to 2.0 would increase the unit
size and one unit now becomes two pixels. this results in shapes being drawn twice as large. a scale example in this last example, we'll draw shapes with different scaling factors. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw a simple rectangle, but scale it. ctx.save()...
Using images - Web APIs
ineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas. drawimage(image, x, y, width, height) this adds the width and height parameters, which indicate the
size to which to scale the image when drawing it onto the canvas. example: tiling an image in this example, we'll use an image as a wallpaper and repeat it several times on the canvas. this is done simply by looping and placing the scaled images at different positions. in the code below, the first for loop iterates over the rows. the second for loop iterates over the columns. the image is scaled to...
...e when drawing it onto the canvas. example: tiling an image in this example, we'll use an image as a wallpaper and repeat it several times on the canvas. this is done simply by looping and placing the scaled images at different positions. in the code below, the first for loop iterates over the rows. the second for loop iterates over the columns. the image is scaled to one third of its original
size, which is 50x38 pixels. note: images can become blurry when scaling up or grainy if they're scaled down too much. scaling is probably best not done if you've got some text in it which needs to remain legible. <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext(...
...tion of the source image, then scale and draw it on our canvas. drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are swidth and sheight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the
size specified by dwidth and dheight. to really understand what this does, it may help to look at the image to the right. the first four parameters define the location and
size of the slice on the source image. the last four parameters define the rectangle into which to draw the image on the destination canvas. slicing can be a useful tool when you want to make compositions. you could have all elem...
CompositionEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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" ...
... properties this interface also inherits properties of its parent, uievent, and its ances...
ContentIndex.add() - Web APIs
sponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. can be: '' an empty string, this is the default. homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
sizes: optional a string representation of the image
size. type: optional the mime type of the image. return value returns a promise that resolves with undefined exceptions typeerror if the service worker's registration is not present or the service worker does not contain a fetchevent. if the id, title, description or url are missing, not of type string, or an empty string. i...
... here we're declaring an item in the correct format and creating an asynchronous function which uses the add method to register it with the content index. ...
...ata); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope. // our content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png',
sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status comment unknownthe definition of 'add' in that specification. unknown initial definition. ...
Document.execCommand() - Web APIs
lue argument for the hyperlink's href. the uri must contain at least a single character, which may be whitespace. (internet explorer will create a link with a null value.) cut removes the current selection and copies it to the clipboard. when this behavior is enabled varies between browsers, and its conditions have evolved over time. check the compatibility table for usage details. decreasefont
size adds a <small> tag around the selection or at the insertion point. (not supported by internet explorer.) defaultparagraphseparator changes the paragraph separator used when new paragraphs are created in editable text regions. see differences in markup generation for more details. delete deletes the current selection. enableabsolutepositioneditor enables or disables the grabber that allows ...
...utepositioneditor enables or disables the grabber that allows absolutely-positioned elements to be moved around. the grabber is disabled by default since firefox 64 (bug 1490641). enableinlinetableediting enables or disables the table row/column insertion and deletion controls. the controls are disabled by default since firefox 64 (bug 1490641). enableobjectresizing enables or disables the re
size handles on images, tables, and absolutely-positioned elements and other resizable objects. the handles are disabled by default since firefox 64 (bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like "arial") as a value argument. font
size changes the font
size for the selection or at the insertion point. this requires a...
...lement around a selection or insertion point line. requires the tag-name string as a value argument (i.e. "h1", "h6"). (not supported by internet explorer and safari.) hilitecolor changes the background color for the selection or at the insertion point. requires a color value string as a value argument. usecss must be true for this to function. (not supported by internet explorer.) increasefont
size adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the enter key inserts a <br> element,...
DocumentFragment - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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" str...
... properties this interface has no specific properties, but inherits those of its paren...
DocumentType - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4d...
...ace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" 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=...
... documenttype.entities read only a namednodemap of entities declared in the d...
Examples of web and XML development using the DOM - Web APIs
h element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom. in this case, you are manipulating the individual styles directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. ...
...the dom. in this case, you are manipulating the individual styles directly. in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!doctype html> <html lang="en"> <head> <title>changing color and font-
size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.font
size = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document. you can access these styles...
...e, which prints out all of the style rule selectors to the console. var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-
size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an event listener is registered with the top row of the table. the event listener handles the event by executing the function...
File - Web APIs
ative; 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/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" stro...
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since...
...e.lastmodifieddate read only returns the last modified date of the file referenced by the file object. file.prototype.nameread only returns the name of the file referenced by the file object. file.prototype.webkitrelativepath read only returns the path the url of the file is relative to. file implements blob, so it also has the following properties available to it: file.prototype.
size read only returns the
size of the file in bytes. file.prototype.type read only returns the mime type of the file. instance methods the file interface doesn't define any methods, but inherits methods from the blob interface: blob.prototype.slice([start[, end[, contenttype]]]) returns a new blob object containing the data in the specified range of bytes of the source blob. blob.prototy...
FileSystemEntry.getMetadata() - Web APIs
syntax filesystementry.getmetadata(successcallback[, errorcallback]); parameters successcallback a function which is called when the copy operation is succesfully completed. receives a single input parameter: a metadata object with information about the file. errorcallback optional an optional callback which is executed if an error occurs while looking up the metadata. ...
...ptional callback which is executed if an error occurs while looking up the metadata. there's a single parameter: a fileerror describing what went wrong. return value undefined. errors fileerror.not_found_err the filesystementry refers to an item which doesn't exist. fileerror.security_err security restrictions prohibit obtaining the requested metadata. ...
...fers to an item which doesn't exist. fileerror.security_err security restrictions prohibit obtaining the requested metadata. example this example checks the
size of a log file in a temporary folder and, if it exceeds a megabyte, moves it into a different directory. workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.
size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); 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. desk...
FocusEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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...
... properties this interface also inherits properties from its parent uievent, and indirectly fro...
HTMLImageElement.currentSrc - Web APIs
read-only htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents. syntax let currentsource = htmlimageelement.currentsrc; value a usvstring indicating the full url of the image currently visible in the <img> element represented by the htmlimageelement. ...
...rentsrc; value a usvstring indicating the full url of the image currently visible in the <img> element represented by the htmlimageelement. this is useful when you provide multiple image options using the
sizes and/or htmlimageelement.srcset properties. currentsrc lets you determine which image from the set of provided images was selected by the browser. example in this example, two different
sizes are provided for an image of a clock. one is 200px wide and the other is 400px wide. the
sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document. html <img src="/files/16797/clock-demo-400px.png" alt="clock" srcset="/files/16864/clock-demo-200...
...nd the other is 400px wide. the
sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400px wide; otherwise, the image is drawn at 90% width of the document. ...
HTMLVideoElement.videoHeight - Web APIs
the htmlvideoelement interface's read-only videoheight property indicates the intrinsic height of the video, expressed in css pixels. in simple terms, this is the height of the media in its natural
size. see about intrinsic width and height for more details. syntax height = htmlvideoelement.videoheight; value an integer value specifying the intrinsic height of the video in css pixels. if the element's readystate is htmlmediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame
size information is yet available. about intrinsic width and height a user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including: the media's aspect r...
...width and height, then taking into account factors including: the media's aspect ratio. the media's clean aperture (the sub-rectangle centered within the media that matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic
size is considered to be the
size of the <video> element. if at any time the intrinsic
size of the media changes and the element's readystate isn't have_nothing, a re
size event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler f...
...dered to be the
size of the <video> element. if at any time the intrinsic
size of the media changes and the element's readystate isn't have_nothing, a re
size event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler for the re
size event that re
sizes the <video> element to match the intrinsic
size of its contents. let v = document.getelementbyid("myvideo"); v.addeventlistener("re
size", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero. this a...
HTMLVideoElement.videoWidth - Web APIs
the htmlvideoelement interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels. in simple terms, this is the width of the media in its natural
size. see about intrinsic width and height for more details. syntax width = htmlvideoelement.videowidth; value an integer value specifying the intrinsic width of the video in css pixels. if the element's readystate is htmlmediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame
size information is yet available. about intrinsic width and height a user agent calculates the intrinsic width and height of the element's media by starting with the media's raw pixel width and height, then taking into account factors including: the media's aspect ratio. ...
...width and height, then taking into account factors including: the media's aspect ratio. the media's clean aperture (the sub-rectangle centered within the media that matches the target aspect ratio). the target device's resolution. any other factors required by the media format. if the element is currently displaying the poster frame rather than rendered video, the poster frame's intrinsic
size is considered to be the
size of the <video> element. if at any time the intrinsic
size of the media changes and the element's readystate isn't have_nothing, a re
size event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler f...
...dered to be the
size of the <video> element. if at any time the intrinsic
size of the media changes and the element's readystate isn't have_nothing, a re
size event will be sent to the <video> element. this can happen when the element switches from displaying the poster frame to displaying video content, or when the displayed video track changes. example this example creates a handler for the re
size event that re
sizes the <video> element to match the intrinsic
size of its contents. let v = document.getelementbyid("myvideo"); v.addeventlistener("re
size", ev => { let w = v.videowidth; let h = v.videoheight; if (w && h) { v.style.width = w; v.style.height = h; } }, false); note that this only applies the change if both the videowidth and the videoheight are non-zero. this a...
IDBOpenDBRequest - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" strok...
...fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="#f4f7f...
... methods no methods, but inherits methods from its parents idbrequest and eventtarget. events...
InputEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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...
... properties this interface inherits properties from its parents, uievent and event. inputevent.dataread only retur...
InstallEvent - Web APIs
ative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4...
...pace" 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 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="#f4f7...
... properties inherits properties from its ancestor, event. installevent.activeworker read only ...
KeyboardEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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" str...
... constants the keyboardevent interface defines the following constants. keyboard locations the following ...
LocalFileSystem - Web APIs
. for more information about restrictions, see the basic concepts article. example the following is a code snippet that shows how you can request a file system storage. ...
...er defines the type of storage: persistent or temporary // next, set the
size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. window.requestfilesystem(window.persistent, 1024*1024,oninitfs,errorhandler); method overview void requestfilesystem (in unsigned short type, in unsigned long long
size, in filesystemcallback successcallback, in optional errorcallback errorcallback); void resolvelocalfilesystemurl (in domstring url, in entrycallback successcallback, in optional errorcallback errorcallback); constants constant value description temporary 0 transient storage that can be be removed by the browser at its discretion. ...
...he user or the app expunges it. the user must grant permission before the app can use this type of storage. methods requestfilesystem() requests a file system where data should be stored. you access a sandboxed file system by requesting a localfilesystem object using this global method, window.requestfilesystem(). void requestfilesystem( in unsigned short type, in unsigned long long
size, in filesystemcallback successcallback, in errorcallback errorcallback ); parameters type the storage type of the file system. the values can be either temporary or persistent.
size the storage space—in bytes—that you need for your app. successcallback the success callback that is called when the browser provides a file system. its argument is the filesystem object with two prope...
LockedFile.getMetadata() - Web APIs
ve some metadata about the locked file. syntax var request = instanceoflockedfile.getmetadata(param); parameters param optional an object used to request specific metadata. each key is a boolean where true means the metadata is expected and where false means it is not expected. note that if the key is undefined, it is considered as if it were true. ...
...he locked file. syntax var request = instanceoflockedfile.getmetadata(param); parameters param optional an object used to request specific metadata. each key is a boolean where true means the metadata is expected and where false means it is not expected. note that if the key is undefined, it is considered as if it were true. ...
...note that if the key is undefined, it is considered as if it were true. the following metadata are supported:
size : will provide the
size of the file lastmodified : will provide the date when the file was last modified return a filerequest object. in case of success, the request's result is an object with the metadata requested through the param object. ...
MediaStreamConstraints.audio - Web APIs
e start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-
size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.
...e start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-
size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.
...adding-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.getusermedia({ audio: { sample
size: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedia(), specifying a set of audio constraints requesting that echo cancellation be enabled and that, if possible, the sample rate be 8 bits per sample instead of the more co...
Recording a media element - Web APIs
he user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...
...this is the stream we'll record. lines 5-9 when the promise returned by getusermedia() is resolved, the preview <video> element's s...
...download button's download attribute is set. while the download attribute can be a boolean, you can also set it to a string to use as the name for the downloaded file. so by setting the download link's download attribute to "recordedvideo.webm", we tell the browser that clicking the button should download a file named "recordedvideo.webm" whose contents are the recorded video. lines 17-18 the
size and type of the recorded media are output to the log area below the two videos and the download button. line 20 the catch() for all the promises outputs the error to the logging area by calling our log() function. handling the stop button the last bit of code adds a handler for the click event on the stop button using addeventlistener(): stopbutton.addeventlistener("click", function() { s...
MouseEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" str...
...o,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,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...
... properties this interface also inherits properties of its parents, uievent and event. mouseevent.altkey read only ...
performance.clearResourceTimings() - Web APIs
note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
... note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
... note: this feature is available in web workers. syntax performance.clearresourcetimings(); arguments void return value none this method has no return value. ...
ReadableStream.ReadableStream() - Web APIs
stream was cancelled. type optional this property controls what type of readable stream is being dealt with. if it is included with a value set to "bytes", the passed controller object will be a readablebytestreamcontroller capable of handling a byob (bring your own buffer)/byte stream. if it is not included, the passed controller will be a readablestreamdefaultcontroller. autoallocatechunk
size optional for byte streams, the developer can set the autoallocatechunk
size with a positive integer value to turn on the stream's auto-allocation feature. with this turned on, the stream implementation will automatically allocate an arraybuffer with a
size of the given integer, and the consumer can also use a default reader. queuingstrategy optional an object that optionally defines a queu...
... note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. ...
...r can also use a default reader. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied.
size(chunk) a method containing a parameter chunk — this indicates the
size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied, the default used is the same as a countqueuingstrategy with a high water mark of 1. return value an instance of the readablestream object. exceptions rangeerror t...
SVGTransformList - Web APIs
to this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) svgtransform removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception wit...
...d if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) svgtransform removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in svgtransform newitem) svgtransform inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexcepti...
... candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtransformlist' in that specific...
ServiceWorkerGlobalScope - Web APIs
width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="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...
...4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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="5...
... serviceworkerglobalscope.registration read...
SyncEvent - Web APIs
ative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4...
...pace" 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 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" ...
... properties inherits properties from its ancestor, event. syncevent.tag read only returns the developer-...
TextEncoder.prototype.encodeInto() - Web APIs
ome of the few characters that expant into 3 bytes. it is unlikely that long text will exceed s.length * 2 bytes in length. thus, a more optimistic approach might be to allocate s.length * 2 + 5 bytes, and perform reallocation in the rare circumstance that the optimistic prediction was wrong. if the output is expected to be long-lived, it makes sense to compute minimum allocation rounduptobucket
size(s.length), the maximum allocation
size s.length * 3, and to have a chosen (as a tradeoff between memory usage and speed) threshold t such that if rounduptobucket
size(s.length) + t >= s.length * 3, you simply allocate for s.length * 3. otherwise, first allocate for rounduptobucket
size(s.length) and convert. if the read item it the return dictionary is s.length, the conversion is done. if not, real...
...ngth * 3. otherwise, first allocate for rounduptobucket
size(s.length) and convert. if the read item it the return dictionary is s.length, the conversion is done. if not, reallocate the target buffer to written + (s.length - read) * 3 and then convert the rest by taking a substring of s starting from index read and a subbuffer of the target buffer starting from index written. above rounduptobucket
size() is a function that rounds up to the allocator bucket
size. for example, if your wasm allocator is known to use power-of-two buckets, rounduptobucket
size() should return the argument if it is a power-of-two or the next power-of-two otherwise. if the behavior of the wasm allocator is unknown, rounduptobucket
size() should be an identity function. if the behavior of your allocator is unknown, you ...
...ginal length times three.the above advice assumes that you don't need to allocate space for a zero terminator. that is, on the wasm side you are working with rust strings or a non-zero-terminating c++ class. if you are working with c++ std::string, even though the logical length is shown to you, you need to take the extra terminator byte into account when computing rounding up to allocator bucket
size. see the next section about c strings. no zero-termination if the input string contains the character u+0000 in the input, encodeinto() will write a 0x00 byte in the output. encodeinto() does not write a c-style 0x00 sentinel byte after the logical output. if your wasm program uses c strings, it's your responsibility to write the 0x00 sentinel and you can't prevent your wasm program from seein...
VRStageParameters - Web APIs
rs interface of the webvr api represents the values describing the the stage area for devices that support room-scale experiences. this interface is accessible through the vrdisplay.stageparameters property. properties vrstageparameters.sittingtostandingtransform read only contains a matrix that transforms the sitting-space view matrices of vrframedata to standing-space. vrstageparameters.
sizex read only returns the width of the play-area bounds in meters. vrstageparameters.
sizey read only returns the depth of the play-area bounds in meters. examples var info = document.queryselector('p'); var vrdisplay; navigator.getvrdisplays().then(function(displays) { vrdisplay = displays[0]; var stageparams = vrdisplay.stageparameters; // stageparams is a vrstageparameters object ...
... draft initial definition ...
... draft initial definition ...
VisualViewport - Web APIs
ns the width of the visual viewport in css pixels. visualviewport.height read only returns the height of the visual viewport in css pixels. visualviewport.scale read only returns the pinch-zoom scaling factor applied to the visual viewport. events listen to these events using addeventlistener() or by assigning an event listener to the relevant oneventname property of this interface. re
size fired when the visual viewport is re
sized. also available via the visualviewport.onre
size property. scroll fired when the visual viewport is scrolled. also available via the visualviewport.onscroll property. examples hiding an overlaid box on zoom this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might conta...
...this example, taken from the visual viewport readme, shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. this is a nice way to improve the user experience when zooming in on pages. a live sample is also available. var bottombar = document.getelementbyid('bottombar'); var viewport = window.visualviewport; function re
sizehandler() { if (viewport.scale > 1.3) bottombar.style.display = "none"; else bottombar.style.display = "block"; } window.visualviewport.addeventlistener('re
size', re
sizehandler); simulating position: device-fixed this example, also taken from the visual viewport readme, shows how to use this api to simulate position: device-fixed, which fixes elements to the visual viewport. a l...
...this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('re
size', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling. specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format. syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, image
size, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth, format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture. possible values: gl.texture_3d: a three-dimensional texture. gl.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of d...
...onal array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the x offset within the compressed texture image. yoffset a glint specifying the y offset within the compressed texture image. zoffset a glint specifying the z offset within the compressed texture image. width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. depth a gl
sizei specifying the depth of the texture. format a glenum specifying the compressed image format. possible values: gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac g...
...num specifying the compressed image format. possible values: gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac gl.compressed_rgb8_punchthrough_alpha1_etc2 gl.compressed_srgb8_punchthrough_alpha1_etc2 image
size a glint specifying the number of bytes to read from the buffer bound to gl.pixel_unpack_buffer. offset a glint specifying the offset in bytes from which to read from the buffer bound to gl.pixel_unpack_buffer. srcdata an arraybufferview that be used as a data store for the compressed image data in memory. return value none. examples gl.compressedtexsubimage3d(gl.texture_3d, 0, 0, 0, 512...
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
nitializes a renderbuffer object's data store and allows specifying a number of samples to be used. syntax void gl.renderbufferstoragemultisample(target, samples, internalformat, width, height); parameters target a glenum specifying the target renderbuffer object. possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal format. samples a gl
sizei specifying the number of samples to be used for the renderbuffer storage. internalformat a glenum specifying the internal format of the renderbuffer. possible values: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 gl.rgba4 gl.rgb565 gl.rgb5_a1 gl.rg...
... return value none. examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 256, 256); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification. editor'...
....srgb8_alpha8 gl.rgba4 gl.rgb565 gl.rgb5_a1 gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component16 gl.depth_component24 gl.depth_component32f gl.depth_stencil gl.depth24_stencil8 gl.depth32f_stencil8 gl.stencil_index8 width a gl
sizei specifying the width of the renderbuffer in pixels. height a gl
sizei specifying the height of the renderbuffer in pixels. return value none. examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 256, 256); specifications specification status comment webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification. editor's draft initial definition for webgl. opengl es 3.0the defi...
WebGLRenderingContext.drawElements() - Web APIs
render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. ...
... if count is negative, a gl.invalid_value error is thrown. ...
... if count is negative, a gl.invalid_value error is thrown. ...
WebGLRenderingContext.getActiveUniform() - Web APIs
it is generally used when querying unknown uniforms either for debugging or generic library creation. syntax webglactiveinfo webglrenderingcontext.getactiveuniform(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uniform variable's information. index a gluint specifying the index of the uniform attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_uniforms). ...
...e array will generate its own entries. e.g. uniform struct { float foo; vec4 bar; } d[2]; will result in: d[0].foo d[0].bar d[1].foo d[1].bar uniform blocks: one entry for each member. if the uniform block has an instance name, the block name is prefixed. e.g. uniform block { float foo; }; will result in foo, and uniform block { float bar; } e; will result in block.bar. the
size attribute of the return value corresponds to the length of the array for uniforms declared as arrays. otherwise, it is 1 (this includes interface blocks instanced with arrays). exceptions gl.invalid_value is generated if the program webglprogram is invalid (not linked, deleted, etc.). gl.invalid_value is generated if index is not in the range [0, gl.getprogramparameter(program, gl.active_uni...
...glprogram is invalid (not linked, deleted, etc.). gl.invalid_value is generated if index is not in the range [0, gl.getprogramparameter(program, gl.active_uniforms) - 1]. examples const numuniforms = gl.getprogramparameter(program, gl.active_uniforms); for (let i = 0; i < numuniforms; ++i) { const info = gl.getactiveuniform(program, i); console.log('name:', info.name, 'type:', info.type, '
size:', info.
size); } specifications specification status comment webgl 1.0the definition of 'getactiveuniform' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgetactiveuniform' in that specification. standard man page of the opengl api. ...
WebGLRenderingContext.texImage2D() - Web APIs
rgba unsigned_short_5_5_5_1 4 2 rgb unsigned_short_5_6_5 3 2 luminance_alpha unsigned_byte 2 2 luminance unsigned_byte 1 1 alpha unsigned_byte 1 1 other possible values in webgl2 for the versions of teximage2d that take an arraybufferview or a glintptr offset
sized format base format r bits g bits b bits a bits shared bits color renderable texture filterable r8 red 8 ● ● r8_snorm red s8 ● rg8 rg 8 8 ● ● rg8_snorm rg s8 s8 ● rgb...
... border a glint specifying the width of the border. must be 0. format a glenum specifying the format of the texel data. in webgl 1, this must be the same as internalformat (see above). in webgl 2, the combinations are listed in this table. type a glenum specifying the data type of the texel data. p...
...ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rg16ui gl.rg32ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_alpha8 gl.rgb5_a1 gl.rgb10_a2 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. border a glint specifying the width of the border. must be 0. format a glenum specifying the format of the texel data. in webgl 1, this must be the same as internalformat (see above). in webgl 2, the combinations are listed in this table. type a glenum specifying the data type of the texel data. possible values: gl.unsigned_byte: 8 bits per channel...
Basic scissoring - Web APIs
canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to get webgl context. " + "your browser or device may not...
...adding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the
size (in css pixels) of // the drawing buffer to be identical to the
size of the // canvas html element, as determined by css. canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to get webgl context. " + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbuf...
...height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { paragraph.innerhtml = "failed to get webgl context. " + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); // enable scissoring operation and define the position and //
size of the scissoring area. gl.enable(gl.scissor_test); gl.scissor(40, 20, 60, 130); // clear the drawing buffer solid yellow. gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }, false); the source code of this example is also available on github. « previousnext » ...
Taking still photos with WebRTC - Web APIs
inal display shown to the user. <canvas id="canvas"> </canvas> <div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html. the rest is just some page layout fluff and a bit of text offering a link back to this page. the javascript code now let's take a look at the javascript code. we'll break it up into a few bite-
sized pieces to make it easier to explain. initialization we start by wrapping the whole script in an anonymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var ...
...onymous function to avoid global variables, then setting up various variables we'll be using. (function() { var width = 320; // we will scale the photo width to this var height = 0; // this will be computed based on the input stream var streaming = false; var video = null; var canvas = null; var photo = null; var startbutton = null; those variables are: width whatever
size the incoming video is, we're going to scale the resulting image to be 320 pixels wide. height the output height of the image will be computed given the width and the aspect ratio of the stream. streaming indicates whether or not there is currently an active stream of video running. video this will be a reference to the <video> element after the page is done loading. canvas this will be a ...
... canvas.setattribute('width', width); canvas.setattribute('height', height); streaming = true; } }, false); this callback does nothing unless it's the first time it's been called; this is tested by looking at the value of our streaming variable, which is false the first time this method is run. if this is indeed the first run, we set the video's height based on the
size difference between the video's actual
size, video.videowidth, and the width at which we're going to render it, width. finally, the width and height of both the video and the canvas are set to match each other by calling element.setattribute() on each of the two properties on each element, and setting widths and heights as appropriate. finally, we set the streaming variable to true to prevent us ...
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
just like a real-world film camera. as much as possible, standard cinematographic techniques are used, since the viewer has likely grown up watching films using those techniques, and has subconscious expectations that a film or animation will follow those methods. deviating from them can pull the viewer out of the moment. in business applications, the 3d camera is used to simply set the apparent
size and perspective when rendering things such as graphs and charts. in mapping applications, the camera may either be placed directly over the scene, or might use various angles to show perspective. for 3d gps solutions, the camera is positioned to show the area around the user, with the majority of the display showing the area ahead of the user's path of motion. when using webgl to accelerate 2d ...
...the near clipping plane is the distance in meters to a plane parallel to the display surface closer than which nothing gets drawn. any vertices which lie on the same side of that plane as the camera are not drawn. conversely, the far clipping plane is the distance in meters to a plane beyond which no vertices are drawn. to zoom using a scaling factor or percentage, you can map 1x (100% of normal
size) to the largest value of fov you allow (which leads to the most content being visible), then map your maximum magnification to the maximum value of fov you support and map corresponding values in between. if you start each frame's rendering pass by computing the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's ...
... desired render time with the time at which the last frame was drawn. since this value is in microseconds, we convert it to seconds by multiplying by 0.001 (or diiding by 1000).. now we loop over the pose's views, as found in the xrviewerpose array, views. for each view, we ask the xrwebgllayer for the appropriate viewport to use, configure the webgl viewport to match by passing the position and
size information into gl.viewport(). this constrains rendering so that we can only draw into the portion of the framebuffer that represents the image seen by the eye identified by view.eye. with the constraints so established and everything else we need ready, we call a custom function, myrenderscene(), to actually perform the computations and webgl rendering to render the frame. in this case, we're ...
Rendering and the WebXR frame animation callback - Web APIs
, and an xrframe object describing the state of the scene as of that time. the optics of 3d we have two eyes for a reason: by having two eyes, each inherently sees the world from a slightly different angle. since they're a known, fixed distance apart, our brains can do basic geometry and trigonometry and figure out the 3d nature of reality from that information. we also make use of perspective,
size differences, and even simply our understanding of how things usually look to figure out the details of that third dimension. these factors, among others, are the source of our depth perception. to create the illusion of three dimensions when rendering graphics, we need to simulate as many of these factors as we can. the more of these we simulate—and the more accurately we do so—the better a...
...ption. to create the illusion of three dimensions when rendering graphics, we need to simulate as many of these factors as we can. the more of these we simulate—and the more accurately we do so—the better able we are to trick the human brain into perceiving our images in 3d. the advantage to xr is that not only can we use the classic monocular techniques to simulate 3d graphics (perspective,
size, and simulated parallax), but we can also simulate binocular vision—that is, vision using two eyes—by rendering the scene twice for each frame of animation—once for each eye. the typical human's pupillary distance—the distance between the centers of the pupils—is between 54 and 74 millimeters (0.054 to 0.074 meters). so if the center of the viewer's head is located at [0.0, 2.0, 0.0] (...
...tex, located at the back of the occipital lobe. tha brain takes those signals from the left and right eyes and constructs a single, unified, 3d image of the world in the viewer's brain, and that image is what is seen. and because of those differences between what is seen by the left eye versus the right eye, the brain is able to infer a great deal of information about how deep the object is, its
size, and more. by combining that inferred depth information with other cues such as perspective, shadows, memories of what these relationships mean, and so forth, we can figure out a great deal about the world around us. frames, poses, views, and framebuffers once you have an xrframe representing the state of the scene at a moment in time, you need to determine the positions of objects within the s...
Using IIR filters - Web APIs
encies of the audio being passed into the filter. let's draw a frequency plot of the filter we've created with the data we get back from this method. we need to create three arrays. one of frequency values for which we want to receive the magnitude response and phase response for, and two empty arrays to receive the data. all three of these have to be of type float32array and all be of the same
size. // arrays for our frequency response const totalarrayitems = 30; let myfrequencyarray = new float32array(totalarrayitems); let magresponseoutput = new float32array(totalarrayitems); let phaseresponseoutput = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(item, index) { re...
...('canvas'); canvascontainer.appendchild(canvasel); // set 2d context and set dimesions const canvasctx = canvasel.getcontext('2d'); const width = canvascontainer.offsetwidth; const height = canvascontainer.offsetheight; canvasel.width = width; canvasel.height = height; // set background fill canvasctx.fillstyle = 'white'; canvasctx.fillrect(0, 0, width, height); // set up some spacing based on
size const spacing = width/16; const font
size = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = font
size+'px sans-seri...
...// draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = font
size+'px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-font
size, spacing+font
size); canvasctx.filltext('g', spacing-font
size, (height-spacing+font
size)/2); canvasctx.filltext('0', spacing-font
size, height-spacing+font
size); canvasctx.filltext('hz', width/2, height-spacing+font
size); canvasctx.filltext('20k', width-spacing, height-spacing+font
size); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magres...
Window.innerHeight - Web APIs
bar, if present. the value of innerheight is taken from the height of the window's layout viewport. the width can be obtained using the innerwidth property. syntax let intviewportheight = window.innerheight; value an integer value indicating the window's layout viewport height in pixels. the property is read only and has no default value. to change the width of the window, call one of its re
size methods, such as re
sizeto() or re
sizeby(). usage notes to obtain the height of the window minus its horizontal scroll bar and any borders, use the root <html> element's clientheight() property instead. both innerheight and innerwidth are available on any window or any object that behaves like a window, such as a tab or frame. example assuming a frameset var intframeheight = window.innerheig...
... to get the outer height of a window, i.e. the height of the whole browser window, see window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of 'windo...
...self.innerheight; // will return the height of the frame viewport within the frameset var intframesetheight = parent.innerheight; // will return the height of the viewport of the closest frameset var intouterframesetheight = top.innerheight; // will return the height of the viewport of the outermost frameset fixme: link to an interactive demo here to change the
size of a window, see window.re
sizeby() and window.re
sizeto(). to get the outer height of a window, i.e. the height of the whole browser window, see window.outerheight. graphical example the following figure shows the difference between outerheight and innerheight. specification specification status comment css object model (cssom) view modulethe definition of 'window.innerheight' in that specific...
Window.outerHeight - Web APIs
to get the inner height of a window, i.e. the height of the page being displayed, see window.innerheight. graphical example the following figure shows the difference between outerheight and innerheight. ...
... to get the inner height of a window, i.e. the height of the page being displayed, see window.innerheight. graphical example the following figure shows the difference between outerheight and innerheight. ...
... to get the inner height of a window, i.e. the height of the page being displayed, see window.innerheight. graphical example the following figure shows the difference between outerheight and innerheight. ...
Window.outerWidth - Web APIs
to get the inner width of a window, i.e. ...
... to get the inner width of a window, i.e. ...
... to get the inner width of a window, i.e. ...
XMLHttpRequest - Web APIs
width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="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" fi...
...text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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"...
... if your communication needs to involve receiving event data or message data from a ser...
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
tive resolution of the webxr device's frame buffer. this information can be used when creating a new xrwebgllayer to configure the xrwebgllayerinit property framebufferscalefactor in the options specified when calling the xrwebgllayer() constructor. see the usage notes and examples for details. if the scaling factor is 1.0, then the frame buffer pixels and the native display pixels are the same
size. if the scaling factor is greater than zero, then the frame buffer is smaller than the diplay's native dimensions, resulting in the output being up-scaled for display to the screen after rendering into the frame buffer. if the scaling factor is less than zero, the frame buffer is larger than the native resolution of the display, resulting in the frame buffer's contents being scaled down for displ...
...sary to contain all of fthe xrviews needed by the device while at the same time providing typical applications an acceptable balance of image quality and performance. for example, consider a device which uses a 2560x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1440 pixels). consider a frame buffer which at full
size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image quality in order to improve performance to an acceptable level, it might choose to halve the resolution. in this case, the value returned by xrwebgllayer.getnativeframebufferscalefactor() will be 2.0. this method of dividing the frame buffer between views is shown in the following...
...ity in order to improve performance to an acceptable level, it might choose to halve the resolution. in this case, the value returned by xrwebgllayer.getnativeframebufferscalefactor() will be 2.0. this method of dividing the frame buffer between views is shown in the following diagram. now the width and height of the frame buffer are 50% what they were before, resulting in a total frame buffer
size of 1280 by 720 pixels, with each eye's half of the buffer being 640x720 pixels. now we can see the coordinates of each of the viewports representing these two views: since each eye gets half of the frame buffer, the result is that the left eye gets a 640x720 portion of the buffer with the viewport's x and y at 0, the width at 640, and the height set to 720. the right eye gets the other half of...
ARIA: article role - Accessibility
pport a means to navigate among articles. they may also support indication of nesting relationships within articles. articles can be nested, indicating that a nested article directly relates to the one it is nested in, but not necessarily to the ones outside the nesting hierarchy. see the examples for specific use cases. if an article is part of a feed, it can have the aria-posinset and aria-set
size attributes set to indicate which position within the feed this particular article represents. inside an application or other widget that causes screen readers and other assistive technologies to be in pass-through mode, an article can be used to indicate that these should switch back to treating the enclosed content as regular web content. instead of including the article role on a non-semantic...
...he role="article", or preferably <article>, include blog posts, forum posts, a comment to a forum or blog post, a comment to a comment to a forum or blog post, any an item in a social media feed. associated wai-aria roles, states, and properties aria-posinset in the context of a feed, indicates the position of this particular article within that feed, based on a count starting at 1. ...
... always use native element if available. instead of a div with the article role, the <article> element should be used. ...
ARIA: feed role - Accessibility
ist of articles in which articles are added to or removed from either end of the list as the user scrolls. a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads. <section role="feed" aria-busy="false"> ... <article aria-posinset="427" aria-set
size="-1">...</article> <article aria-posinset="428" aria-set
size="-1">...</article> <article aria-posinset="429" aria-set
size="-1">...</article> ... </section> description a feed is a page structure for a scrollable list of articles where scrolling may cause articles to be added to the top or end of the list. the list establishes an interoperability contract between the web page and assistiv...
..., or the user may not see the updates. to ensure good user experience, avoid inserting or removing articles in the middle of a feed, load new articles before the user has reached the end of the feed, and provide keyboard commands for moving focus among articles so that keyboard users can navigate through your feed. see keyboard interactions below. if the number of articles is known, set aria-set
size on the articles themselves. however, if the total number is extremely large, indefinite, or changes often, set aria-set
size="-1" to indicate that the
size of the feed is not known. another feature of the feed pattern is skim reading: articles within a feed can contain both an accessible name with the aria-label and a description with an aria-describedby, suggesting to screen readers which elemen...
.... each article should have an aria-labelledby referring to the article title or other child that can serve as a distinguishing label. each article should preferably have aria-describedby referring to one or more elements inside the article that serve as the primary content of the article. each article element has aria-posinset set to a value that represents its position in the feed and an aria-set
size set to a value that represents either the total number of articles that have been loaded or the total number in the feed, depending on which value is more helpful to users. if the total number in the feed is not known, set aria-set
size="-1". required javascript features none, except as required by any attributes. for example, setting aria-busy to true during the update operation if needed, a...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
tant]: event_system_sound event_system_alert [can be important, to have auto-speaking for newly created role_alerts] event_system_foreground event_system_menustart [important] event_system_menuend [important] event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_move
sizestart event_system_move
sizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimize...
...ted [important] state_focused [important] state_pressed state_checked [important] state_mixed state_readonly [important] state_hottracked state_default [important] state_expanded [important] state_collapsed [important] state_busy [important] state_floating state_marqueed state_animated state_invisible state_offscreen [important] state_
sizeable state_moveable state_selfvoicing state_focusable [important] state_selectable [important] state_linked [important] state_traversed [important] state_multiselectable [important] state_extselectable state_alert_low state_alert_medium state_alert_high state_protected [important] state_haspopup msaa roles cheat sheet for information on w...
... technology partners to find out what object identifiers you need to support. there's a very good chance they won't ask for more than the object itentifiers marked [important]: objid_alert objid_caret objid_client [important] objid_cursor objid_hscroll objid_nativeom [important? might be useful for supporting custom interfaces, need to research] objid_menu objid_queryclassnameidx objid_
sizegrip objid_sound objid_sysmenu objid_titlebar objid_vscroll objid_window [important, but implemented automatically by microsoft windows. will return object of type role_window. see windowfromaccessibleobject quirk explanation below.] dealing with the quirks of msaa msaa has a well deseved reputation for quirkiness. it is not "plug and play", and will take a lot of testing/refinement before...
Operable - Accessibility
ensure that for functionality that can be triggered by a) device motion (like shaking, tilting) or b) user gestures detected by device sensors (including a camera) that both of the following are true: 1) motion actuation can be disabled, and 2) the functionality can be operated without using device motion or user gestures. exceptions exist. ...
...that can be triggered by a) device motion (like shaking, tilting) or b) user gestures detected by device sensors (including a camera) that both of the following are true: 1) motion actuation can be disabled, and 2) the functionality can be operated without using device motion or user gestures. exceptions exist. ...
...h of the following are true: 1) motion actuation can be disabled, and 2) the functionality can be operated without using device motion or user gestures. exceptions exist. understanding motion actuation 2.5.5 target
size (aaa) added in 2.1 the
size of an actionable item's touch target must be at least 44 css pixels in both width and height. exceptions exist. understanding target
size 2.5.6 concurrent input mechanisms (aaa) added in 2.1 make sure people can use and switch between different modes of input when interacting with digital content including touchscreen, keyboard, mouse, voice commands, or alternative input devices. an essential exception exists. understanding concurrent input mechanism note: also see the wcag description for guideline 2.5: i...
-webkit-box-reflect - CSS: Cascading Style Sheets
global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites. to achieve reflection on the web, the standard way is to use the css element() function. syntax values above, below, right, left are keywords indicating in which direction the reflection is to happen. <length> indicates the
size of the reflection. <image> describes the mask to be applied to the reflection. formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ above | below | right | left ]? <length>? <image>?where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( ...
...<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
aspect-ratio - CSS: Cascading Style Sheets
io of the viewport. syntax the aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. it is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively. examples the example below is contained in an <iframe>, which creates its own viewport. re
size the <iframe> to see aspect-ratio in action. html <div id='inner'> watch this element as you re
size your viewport's width and height. </div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it a...
... */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could re
size html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { bac...
...l id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you re
size your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specific...
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
styles in the css backgrounds and borders module allow filling backgrounds with color or an image (clipped or re
sized), or modifying them in other ways. these styles can also decorate borders with lines or images, and make them square or rounded. ...
...er ways. these styles can also decorate borders with lines or images, and make them square or rounded. ...
... border-radius border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element. scaling background images describes how to change the
size and repeating behavior of background images. applying color to html elements using css an overview of how css color can be used in html, including for borders. border-image generator this interactive tool lets you visually create border images (the border-image property). border-radius generator this interactive tool lets you visually create rounded corners (the border-radius property). bo...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
e 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 the space-around value, or where supported, space-evenly. you could also use flex-start to place the space at the end of the items, flex-end to place it before them, or center to centre the navigation items. space distributed within the items a different...
... object is using the initial values of flexbox it can shrink but not grow, and uses a flex-basis of auto. any width or max-width applied to the image will become the flex-basis. .image img { max-width: 100px; } you could also allow both sides to grow and shrink in proportion. if you set both sides to flex: 1, they will grow and shrink from a flex-basis of 0, so you will end up with two equal-
sized columns. you could either take the content as a guide and set both to flex: auto, in which case they would grow and shrink from the
size of the content or any
size applied directly to the flex items such as a width on the image. .media .content { flex: 1; padding: 10px; } .image { flex: 1; } you could also give each side different flex-grow factors, for example setting the side with the...
...re taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do. conclusion while exploring the above patterns you have hopefully started to see how you can think through the best way to use flexbox to achieve the result that you want. quite often you have more than one choice. mix items that cannot stretch with those that can, use the content to inform the
size, or allow flexbox to share out space in proportion. it’s up to you. think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it. ...
Block and inline layout in normal flow - CSS: Cascading Style Sheets
s between block elements collapse. this means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins. in the example below, the paragraphs have a top margin of 20px and a bottom margin of 40px. ...
... elements participating in an inline formatting context inline elements display one after the other in the direction that sentences run in that particular writing mode. while we don’t tend to think of inline elements as having a box, as with everything in css they do. ...
... the lines created are known as line boxes. in the following example, we have three inline boxes created by a paragraph with a <strong> element inside it. the boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly. the line box
size in the block direction (so the height when working in english) is defined by the tallest box inside it. in the next example, i have made the <strong> element 300%; that content now defines the height of the line box on that line. find out more about how block and inline boxes behave in our guide to the visual formatting model. the display property and flow layout in addition to the rules exi...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
m out into each cell of row 1. if you have created additional rows using the grid-template-rows property then grid will continue placing items in these rows. if the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created. sizing rows in the implicit grid the default for automatically created rows in the implicit grid is for them to be auto-
sized. this means that they will contain the content added to them without causing an overflow. you can however control the
size of these rows with the property grid-auto-rows. to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>thr...
...ement by column you can also ask grid to auto-place items by column. using the property grid-auto-flow with a value of column. in this case grid will add items in rows that you have defined using grid-template-rows. when it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. as with implicit row tracks, these column tracks will be auto
sized. you can control the
size of implicit column tracks with grid-auto-columns, this works in the same way as grid-auto-rows. in this next example i have created a grid with three row tracks of 200 pixels height. i am auto-placing by column and the columns created will be a column width of 300 pixels, then a column width of 100 pixels until there are enough column tracks to hold all of the items. ...
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
ibility. i have not defined any column or row tracks but this layout dictates a single column, and rows will be created as needed for each of the items in the implicit grid. .wrapper { display: grid; grid-gap: 20px; grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; } after setting up a mobile layout we will get this single column at all screen
sizes, we can now add a media query and redefine our layout for the circumstance of having enough screen real estate to show two columns. @media (min-width: 500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; ...
...three-column layout. @media (min-width: 700px) { .wrapper { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track
size. this means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center. in this layout i am displaying the nav in the left column, alongside the content. in the right column we have the sidebar and underneath it the advertisements (ad). the footer now spans right across the bottom of the...
... </div> i can then set up our grid, as for the example 12-column layout above. .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } we are once again going to make this a responsive layout, this time however using named lines. every breakpoint will use a 12-column grid, however the number of tracks that items will span changes depending on the
size of the screen. we start mobile first, and all we want for the narrowest screens is for the items to remain in source order, and all span right across the grid. .wrapper > * { grid-column: col-start / span 12; } at the next breakpoint we want to move to a two-column layout. our header and navigation still span the full grid, so we do not need to specify any positioning for them. the sidebar ...
Layout and the containing block - CSS: Cascading Style Sheets
most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. in this article, we examine the factors that determine an element's containing block. when a user agent (such as your browser) lays out a document, it generates a box for every element. each box is divided into four areas: content area padding area border area margin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. ...
...argin area many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. let's investigate the factors that determine what an element's containing block is. effects of the containing block before learning what determines the containing block of an element, it's useful to know why it matters in the first place. the
size and position of an element are often impacted by its containing block. percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. identifying the containing block the process for identifying the containing block depend...
...ht: 25%; /* == (160px + 30px + 30px) * .25 = 55px */ margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */ background: cyan; } example 4 in this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). thus, the paragraph's dimensions change based on the
size of the browser window. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { width: 400px; height: 480px; margin: 30px; padding: 15px; background: lightgray; } p { position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: ...
Media queries - CSS: Cascading Style Sheets
in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. ...
... in css, use the @media at-rule to conditionally apply part of a style sheet based on the result of a media query. use @import to conditionally apply an entire style sheet. ...
...introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or re
sizes the browser). using media queries for accessibility learn how media queries can help users understand your website better. specifications specification status comment media queries level 5 editor's draft css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation medi...
Mozilla CSS extensions - CSS: Cascading Style Sheets
version still accepted] -moz-animation-timing-function [prefixed version still accepted] -moz-appearance b -moz-backface-visibility [prefixed version still accepted] -moz-background-clipobsolete since gecko 2 -moz-background-originobsolete since gecko 2 -moz-background-inline-policyobsolete since gecko 32 [superseded by the standard version box-decoration-break] -moz-background-
sizeobsolete since gecko 2 -moz-border-end [superseded by the standard version border-inline-end] -moz-border-end-color [superseded by the standard version border-inline-end-color] -moz-border-end-style [superseded by the standard version border-inline-end-style] -moz-border-end-width [superseded by the standard version border-inline-end-width] -moz-border-image -moz-border-start [su...
... 1.9.2 -moz-outline-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-...
...owsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem re
sizer re
sizerpanel scale-horizontal scalethumb-horizontal scalethumb-vertical scale-vertical scrollbarbutton-down scrollbarbutton-left scrollbarbutton-right scrollbarbutton-up scrollbar-small scrollbarthumb-horizontal scrollbarthumb-vertical scrollbartrack-horizontal scrollbartrack-vertical separator spinner spinner-downbutton spinner-textfield spinner-upbutton statusbar statusbar...
Visual formatting model - CSS: Cascading Style Sheets
pplies equally to continuous and paged media. in the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. the layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree. external information (e.g., viewport
size, intrinsic dimensions of images, etc.). much of the information about the visual formatting model is defined in css2, however, various level 3 specifications have added to this information. when reading specifications you will often find references to the model as defined in css2, so an understanding of the model and the terms used to describe it in css2 is valuable when reading other layout sp...
...sed to describe it in css2 is valuable when reading other layout specifications. in this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on mdn for further details. the role of the viewport in continuous media, the viewport is the viewing area of the browser window. user agents can change the layout of the page when the viewport
size changes — for example, if you re
size your window, or change the orientation of a mobile device. if the viewport is smaller than the
size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. we most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. however, you might desig...
...g a direct child selector to target the children of the container. this does not change the anonymous boxes, as they are not a child of the parent block. inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <em></em>. this splits the sentence into three inline boxes — an anonymous inline box before the empha
sized section, the section wrapped in the <em> element, then a final anonymous inline box. as with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts also create anonymous boxes. grid layout behaves in the same way as the flexbox example above, turning strings of tex...
background-image - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
...| <percentage> examples layering background images note that the star image is partially transparent and is layered over the cat image. html <div> <p class="catsandstars"> this paragraph is full of cats<br />and stars. ...
border-image - CSS: Cascading Style Sheets
n initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse. ...
...r-image-width'>? / <'border-image-outset'> ]? | <'border-image-repeat'> examples bitmap in this example, we will apply a diamond pattern to an element's borders. the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based border image!</div> css to match the
size of a single diamond, we will use a value of 81 divided by 3, or 27, for slicing the image into corner and edge regions. to center the border image on the edge of the element's background, we will make the outset values equal to half of the width values. finally, a repeat value of round will make the border slices fit evenly, i.e., without clipping or gaps. #bitmap { width: 200px; background-...
... initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse. ...
font-variant-caps - CSS: Cascading Style Sheets
the font-variant-caps css property controls the use of alternate glyphs for capital letters. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when a given font includes capital letter glyphs of multiple different
sizes, this property selects the most appropriate ones. if petite capital glyphs are not available, they are rendered using small capital glyphs. if these are not present, the browser synthe
sizes them from the uppercase glyphs. fonts sometimes include special glyphs for various caseless characters (such as punctuation marks) to better match the capitalized characters around them. however, small capital glyp...
... language-specific rules this property accounts for language-specific case mapping rules. ...
...-variant-caps: petite-caps; font-variant-caps: all-petite-caps; font-variant-caps: unicase; font-variant-caps: titling-caps; /* global values */ font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; the font-variant-caps property is specified using a single keyword value from the list below. in each case, if the font doesn't support the opentype value, then it synthe
sizes the glyphs. values normal deactivates of the use of alternate glyphs. small-caps enables display of small capitals (opentype feature: smcp). small-caps glyphs typically use the form of uppercase letters but are reduced to the
size of lowercase letters. all-small-caps enables display of small capitals for both upper and lowercase letters (opentype features: c2sc, smcp). petite-caps ena...
image() - CSS: Cascading Style Sheets
background for some white text. a dark background color may be needed for foreground text to be legible, if the image does not render. omitting image sources while including a color is valid and creates a color swatch. unlike declaring a background-color, which is placed under or behind all the background images, this can be used to put (generally semi-transparent) colors over other images. the
size of the color swatch can be set with the background-
size property. this is different from the background-color, which sets a color to cover the entire element. both image(color) and background-color placements are impacted by the background-clip and background-origin properties. accessibility concerns browsers do not provide any special information on background images to assistive technology. ...
...d will be a webp image, if webp is supported. if not, the svg example will be shown. if svg is not supported, the gif version will display. putting color on top of a background image .quarterlogo {height: 200px; width: 200px; border: 1px solid;} .quarterlogo { background-image: image(rgba(0, 0, 0, 0.25)), url("https://mdn.mozillademos.org/files/12053/firefox.png"); background-
size: 25%; background-repeat: no-repeat; } <div class="quarterlogo">if supported, a quarter of this div has a darkened logo</div> the above will put a semi-transparent black mask over the firefox logo background image. had we used the background-color property instead, the color would have appeared behind the logo image instead of on top of it. additionally, the entire container would have had th...
...rted, a quarter of this div has a darkened logo</div> the above will put a semi-transparent black mask over the firefox logo background image. had we used the background-color property instead, the color would have appeared behind the logo image instead of on top of it. additionally, the entire container would have had the same background color. because we used image() along with the background-
size property (and prevented the image from repeating with the background-repeat property, the color swatch will only cover a quarter of the container. specifications specification status comment css images module level 4the definition of 'image()' in that specification. working draft initial definition ...
Inheritance - CSS: Cascading Style Sheets
value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. only the root element of the document gets the initial value given in the property's summary. a typical example of an inherited property is the color property. given the style rules: p { color: green; } ... and the markup: <p>this paragraph has <em>empha
sized text</em> in it.</p> ... the words "empha
sized text" will appear green, since the em element has inherited the value of the color property from the p element. it does not get the initial value of the property (which is the color that is used for the root element when the page specifies no color). non-inherited properties when no value for a non-inherited property has been specified on an elem...
...e specifies no color). non-inherited properties when no value for a non-inherited property has been specified on an element, the element gets the initial value of that property (as specified in the property's summary). a typical example of a non-inherited property is the border property. given the style rules: p { border: medium solid; } ... and the markup: <p>this paragraph has <em>empha
sized text</em> in it.</p> ... the words "empha
sized text" will not have a border (since the initial value of border-style is none). notes the inherit keyword allows authors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. fo...
...pha
sized text" will not have a border (since the initial value of border-style is none). notes the inherit keyword allows authors to explicitly specify inheritance. it works on both inherited and non-inherited properties. you can control inheritance for all properties at once using the all shorthand property, which applies its value to all properties. for example: font { all: revert; font-
size: 200%; font-weight: bold; } this reverts the style of the font property to the user agent's default unless a user stylesheet exists, in which case that is used instead. then it doubles the font
size and applies a font-weight of "bold". see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts...
justify-content - CSS: Cascading Style Sheets
ues */ /* 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 items have a half-
size space on either end */ justify-content: space-evenly; /* distribute items evenly items have equal space around them */ justify-content: stretch; /* distribute items evenly stretch 'auto'-
sized items to fit the container */ /* overflow alignment */ jus...
... empty space before the first and after the last item equals half of the space between each pair of adjacent items. space-evenly the items are evenly distributed within the alignment container along the main axis. the spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same. stretch if the combined
size of the items along the main axis is less than the
size of the alignment container, any auto-
sized items have their
size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size exactly fills the alignment container along the main axis. note: stretch is not supported by flexible boxes...
...tly fills the alignment container along the main axis. note: stretch is not supported by flexible boxes (flexbox). safe used alongside an alignment keyword. if the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. unsafe used alongside an alignment keyword. regardless of the relative
sizes of the item and alignment container, and regardless of whether overflow which causes data loss might happen, the given alignment value is honored. formal definition initial valuenormalapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]where <content-dis...
margin-bottom - CSS: Cascading Style Sheets
e is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
...to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the
size of the margin as a fixed value. <percentage> the
size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containi...
margin-left - CSS: Cascading Style Sheets
alled margin collapsing. in the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified. ...
... auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. ...
... relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the
size of the margin as a fixed value. <percentage> the
size of the margin as a percentage, relative to the width of the containing block. auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display value of floa...
margin-right - CSS: Cascading Style Sheets
ample is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. ...
... auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. ...
...tive to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the
size of the margin as a fixed value. <percentage> the
size of the margin as a percentage, relative to the width of the containing block. auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this table summarizes the different cases: value of display value of flo...
margin-top - CSS: Cascading Style Sheets
e example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. ...
... auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. ...
... /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the
size of the margin as a fixed value. <percentage> the
size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable value to use. see margin. formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containi...
max() - CSS: Cascading Style Sheets
ax value. you can (and often need to) combine min() and max() values, or use max() within a clamp() or calc() function. formal syntax max( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum
size for a font another use case for css functions is allow a font
size to grow while ensuring it is at least a mimum
size, enabling responsive font
sizes while ensuring legibility. let's look at some css: h1 { font-
size: 2rem; } h1.responsive { font-
size: max(4vw, 2em, 2rem); } the font-
size will at minimum be 2rems, or twice the default
size of font for the page. this ensure it is legible a...
...hile ensuring it is at least a mimum
size, enabling responsive font
sizes while ensuring legibility. let's look at some css: h1 { font-
size: 2rem; } h1.responsive { font-
size: max(4vw, 2em, 2rem); } the font-
size will at minimum be 2rems, or twice the default
size of font for the page. this ensure it is legible and ensures accessibility <h1>this text is always legible, but doesn't change
size</h1> <h1 class="responsive">this text is always legible, and is responsive, to a point</h1> think of the max() function as finding the minimum value allowed for a property. accessibility concerns when max() is used for controlling text
size, make sure the text is always large enough to read. a suggestion is to use the min() function nested within a max() that has as its second value a relat...
...point</h1> think of the max() function as finding the minimum value allowed for a property. accessibility concerns when max() is used for controlling text
size, make sure the text is always large enough to read. a suggestion is to use the min() function nested within a max() that has as its second value a relative length unit that is always large enough to read. for example: small { font-
size: max(min(0.5vw, 0.5em), 1rem); } this ensures a minimum
size of 1rem, with a text
size that scales if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status comment css values and units module level 4the definition of 'max()' in that specificat...
place-items - CSS: Cascading Style Sheets
art on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. start the item is packed flush to each other toward the start edge of the alignment container in the appropriate axis. end the item is packed flush to each other toward the end edge of the alignment container in the appropriate axis. flex-start the item is packed flush to each other toward the edge of the alignment container depending on the flex container'...
... first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if the combined
size of the items is less than the
size of the alignment container, any auto-
sized items have their
size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size exactly fills the alignment container. formal definition initial valueas each of the properties of the shorthand:align-items: no...
... justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 { background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-
size: 30px; } select { font-
size: 16px; } .row { margin-top: 10px; } html <div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> <div id="item4">4</div> <div id="item5">5</div> <div id="item6">6</div> </div> <div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> ...
place-self - CSS: Cascading Style Sheets
e keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic
sizes where it behaves like start. the property doesn't apply to block-level boxes, and to table cells. self-start aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis. self-end aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the...
...h the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. flex-end the cross-end margin edge of the flex item is flushed with the cross-end edge of the line. center the flex item's margin box is centered within the line on the cross-axis. if the cross-
size of the item is larger than the flex container, it will overflow equally in both directions. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallb...
... first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if the combined
size of the items along the cross axis is less than the
size of the alignment container and the item is auto-
sized, its
size is increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined
size of all auto-
sized items exactly fills the alignment container along the cross axis. formal definition ini...
radial-gradient() - CSS: Cascading Style Sheets
keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). ...
... the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is
sized so that it exactly meets the closest corner of the box from its center. farthest-side similar to closest-side, except the ending shape is
sized to meet the side of the box farthest from its center (or vertical and horizontal sides). farthest-corner the default value, the gradient's ending shape is
sized so that it exactly meets the farthest corner of the box from its center. note: early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner an...
...ng how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. description as with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to. to create a radial gradient that repeats so as to fill its container, use the repeating-radial-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, radial-gradient() won't work on background-color and other pr...
repeating-radial-gradient() - CSS: Cascading Style Sheets
ce between the last color stop and the first). thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition, which can be mitigated by repeating the first color as the last color. as with any gradient, a repeating radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type. syntax /* a gradient at the center of its container, starting red, ch...
...ent-keyword> a keyword describing how big the ending shape must be. the possible values are: keyword description closest-side the gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses). closest-corner the gradient's ending shape is
sized so that it exactly meets the closest corner of the box from its center. farthest-side similar to closest-side, except the ending shape is
sized to meet the side of the box farthest from its center (or vertical and horizontal sides). farthest-corner the gradient's ending shape is
sized so that it exactly meets the farthest corner of the box from its center. ...
... [at <position>]? , | [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , | [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , | at <position> , <color-stop-list> ) \---------------------------------------------------------------/\-----------------/ contour,
size and position of the ending shape list of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <perce...
<transform-function> - CSS: Cascading Style Sheets
it is used in the transform property. syntax the <transform-function> data type is specified using one of the transformation functions listed below. each function applies a geometric operation in either 2d or 3d. matrix transformation matrix() describes a homogeneous 2d transformation matrix. matrix3d() describes a 3d transformation as a 4×4 homogeneous matrix. perspective perspective() sets the distance between the user and the z=0 plane. ...
...ement in the vertical direction. translation (moving) translate() translates an element on the 2d plane. translate3d() translates an element in 3d space. translatex() translates an element horizontally. translatey() translates an element vertically. translatez() translates an element along the z-axis. description various coordinate models can be used to describe an html element's
size and shape, as well as any transformations applied to it. the most common is the cartesian coordinate system, although homogeneous coordinates are also sometimes used. cartesian coordinates in the cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). this is represented by the vector notation (x, y). in cs...
...g: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .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(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background:...
translate - CSS: Cascading Style Sheets
with two values specified. three values two <length-percentage> and single <length> values that specify the x, y, and z axis translation values (respectively) of a 3d translation. equivalent to a translate3d() (3d translation) function. none specifies that no translation should be applied. ...
... editor's draft initial definition. initial valuenoneapplies totransformable elementsin...
... .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification. editor's draft initial definition. initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the
size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes ...
Used value - CSS: Cascading Style Sheets
perty is its value after all calculations have been performed on the computed value. after the user agent has finished its calculations, every css property has a used value. the used values of dimensions (e.g., width, line-height) are in pixels. ...
... (e.g., background) are consistent with those of their component properties (e.g., background-color or background-
size) and with position and float. note: the getcomputedstyle() dom api returns the resolved value, which may either be the computed value or the used value, depending on the property. ...
...updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('re
size', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation. then, css 2.1 introduced the distinct definition of used value. an element could then explicitly inherit a width/height of a parent, whose computed value is a percentage. for css properties that don't depend on layout (e.g., display, font-
size, or l...
visibility - CSS: Cascading Style Sheets
descendants of the element will be visible if they have visibility set to visible. the element cannot receive focus (such as when navigating through tab indexes). collapse for <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). ...
... for other elements, collapse is treated the same as hidden. accessibility concerns using a visibility value of hidden on an element will remove it from the accessibility tree. ...
...lapsed row(s) or column(s) are present. this value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table. collapsed flex items are hidden, and the space they would have occupied is removed. for xul elements, the computed
size of the element is always zero, regardless of other styles that would normally affect the
size, although margins still take effect. for other elements, collapse is treated the same as hidden. accessibility concerns using a visibility value of hidden on an element will remove it from the accessibility tree. this will cause the element and all its descendant elements to no longer be announced by screen reading technology. interpolation visibility values are interpolable between visible...
white-space - CSS: Cascading Style Sheets
e boxes. break-spaces the behavior is identical to that of pre-wrap, except that: any sequence of preserved white space always takes up space, including at the end of the line. a line breaking opportunity exists after every preserved white space character, including between white space characters. such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic
sizes (min-content
size and max-content
size). the following table summarizes the behavior of the various white-space values: new lines spaces and tabs text wrapping end-of-line spaces normal collapse collapse wrap remove nowrap collapse collapse no wrap remove pre preserve preserve no wrap preserve ...
...si ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...ut enim ad minim veniam, quis nos...
Mobile Web Development - Developer guides
they usually have touch screens for user input. apis like geolocation or orientation are either not supported on desktops or are much less useful, and these apis give mobile users new ways to interact with your site. working with small screens responsive web design is a term for a set of techniques that enables your web site to adapt its layout as its viewing environment — most obviously, the
size and orientation of the screen — changes. it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the browser window
size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the browser to display your site at the appropriate scale for the user's device. working...
...clickable items like buttons to respect the fact that fingers are fatter than mouse pointers. see this article on designing for touch screens. you can use the pointer or any-pointer media query to load different css on a touch-enabled device. optimizing images to help users whose devices have low or expensive bandwidth, you can optimize images by loading images appropriate to the device screen
size and resolution. you do this in css by querying for screen height, width, and pixel ratio. you can also make use of css properties to implement visual effects like gradients and shadows without images. mobile apis finally, you can take advantage of the new possibilities offered by mobile devices, such as orientation and geolocation. cross-browser development write cross-browser code to creat...
...of gecko-specific properties, and this list of webkit-specific properties, and peter beverloo's table of vendor-specific properties. using tools like css lint can help find problems like this in code, and preprocessors like sass and less can help you to produce cross-browser code. take care with user agent sniffing it's preferable for web sites to detect specific device features such as screen
size and touch screens using the techniques listed above, and adapt themselves accordingly. but sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops, tablets, and phones, to serve different content to each type of device. if you do this, make sure your algorithm is correct, and you aren't serving the wrong type of conten...
HTML attribute reference - HTML: Hypertext Markup Language
id global attribute often used with css to style a specific element. the value of this attribute must be unique. importance <iframe>, <img>, <link>, <script> indicates the relative fetch priority for the resource. integrity <link>, <script> specifies a subresource integrity value that allows browsers to verify what they fetch. intrinsic
size <img> this attribute tells the browser to ignore the actual intrinsic
size of the image and pretend it’s the
size specified in the attribute. inputmode <textarea>, contenteditable provides a hint as to the type of data that might be entered by the user while editing the element or its contents. the attribute can be used with form controls (such as the value of textarea el...
...box <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows). scope <th> defines the cells that the header test (defined in the th element) relates to. scoped <style> selected <option> defines a value which will be selected on page load. shape <a>, <area>
size <input>, <select> defines the width of the element (in pixels). if the element's type attribute is text or password then it's the number of characters.
sizes <link>, <img>, <source> slot global attribute assigns a slot in a shadow dom shadow tree to an element. span <col>, <colgroup> spellcheck global attribute indicates whether ...
..., there are no clear rules and the way idl attributes behave in conjunction with their corresponding content attributes depends on the attribute. most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. html specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.
size, for example) and you should read the specifications to understand how exactly they behave. boolean attributes some content attributes (e.g. required, readonly, disabled) are called boolean attributes. if a boolean attribute is present, its value is true, and if it’s absent, its value is false. html5 defines restrictions on the allowed values of boolean attributes: if the attribute is presen...
<button>: The Button element - HTML: Hypertext Markup Language
ar with the icon's meaning or understand the button's purpose. this is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses. ...
...eaning or understand the button's purpose. this is especially relevant for people who are not technologically sophisticated, or who may have different cultural interpretations for the icon the button uses. ...
...guideline 4.1 explanations understanding success criterion 4.1.2 | w3c understanding wcag 2.0
size and proximity
size interactive elements such as buttons should provide an area large enough that it is easy to activate them. this helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. a minimum interactive
size of 44×44 css pixels is recommended. understanding success criterion 2.5.5: target
size | w3c understanding wcag 2.1 target
size and 2.5.5 | adrian roselli quick test: large touch targets - the a11y project proximity large amounts of interactive content — including buttons — placed in close visual proximity to each other should have space separating them. this spacing is beneficial fo...
<input type="number"> - HTML: Hypertext Markup Language
the edit box when the element's value is "". once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears. here, we have an number input with the placeholder "multiple of 10". note how the placeholder disappears and reappears as you manipulate the contents of the edit field. <input type="number" placeholder="multiple of 10"> controlling step
size by default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. you can change this by providing a step attribute, which takes as its value a number specifying the step amount. our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a step value of 10: <input type="number" place...
... 0, and a maximum of 100: <input type="number" placeholder="multiple of 10" step="10" min="0" max="100"> in this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. you can still manually enter a number outside these bounds, but it will be considered invalid. allowing decimal values one issue with number inputs is that their step
size is 1 by default. if you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. if you want to enter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). here's a simple example: <input type="number" placeholder="1.0" step="0.01" min="0" max="10"> see that this example allows any ...
...nter a value that requires decimals, you'll need to reflect this in the step value (e.g. step="0.01" to allow decimals to two decimal places). here's a simple example: <input type="number" placeholder="1.0" step="0.01" min="0" max="10"> see that this example allows any value between 0.0 and 10.0, with decimals to two places. for example, "9.52" is valid, but "9.521" is not. controlling input
size <input> elements of type number don't support form sizing attributes such as
size. you'll have to resort to css to change the
size of these controls. for example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using ...
<keygen> - HTML: Hypertext Markup Language
of rsa key strengths. currently, the user is given a choice between "high" strength (2048 bits) and "medium" strength (1024 bits). for dsa keys, the keyparams parameter specifies the dsa pqg parameters which are to be used in the keygen process. the value of the pqg parameter is the the base64 encoded, der encoded dss-parms as specified in ietf rfc 3279. the user may be given a choice of dsa key
sizes, allowing the user to choose one of the
sizes defined in the dsa standard. for ec keys, the keyparams parameter specifies the name of the elliptic curve on which the key will be generated. it is normally a string from the table in nskeygenhandler.cpp. (note that only a subset of the curves named there may actually be supported in any particular browser.) if the keyparams parameter string is not...
...rve named "secp384r1" for high, and the curve named "secp256r1" for medium keys. (note: choice of the number of key strengths, default values for each strength, and the ui by which the user is offered a choice, are outside of the scope of this specification.) the <keygen> element is only valid within an html form. it will cause some sort of selection to be presented to the user for selecting key
size. the ui for the selection may be a menu, radio buttons, or possibly something else. the browser presents several possible key strengths. currently, two strengths are offered, high and medium. if the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on...
...omething else. the browser presents several possible key strengths. currently, two strengths are offered, high and medium. if the user's browser is configured to support cryptographic hardware (e.g. "smart cards") the user may also be given a choice of where to generate the key, i.e., in a smart card or in software and stored on disk. when the submit button is pressed, a key pair of the selected
size is generated. the private key is encrypted and stored in the local key database. publickeyandchallenge ::= sequence { spki subjectpublickeyinfo, challenge ia5string } signedpublickeyandchallenge ::= sequence { publickeyandchallenge publickeyandchallenge, signaturealgorithm algorithmidentifier, signature bit string } the public key and challenge string are der encoded as publ...
<picture>: The Picture element - HTML: Hypertext Markup Language
ibute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. to decide which url to load, the user agent examines each <source>'s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device. the <img> element serves two purposes: it describes the
size and other attributes of the image and its presentation. it provides a fallback in case none of the offered <source> elements are able to provide a usable image. common use cases for <picture>: art direction. cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays). offering alternative i...
...tent. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlpictureelement attributes this element includes only global attributes. usage notes you can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is re
sized to fit within the frame. note: use these properties on the child <img> element, not the <picture> element. examples these examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>. the media attribute the media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> ...
...r agent will evaluate for each <source> element. if the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on
size. it is composed of a comma-separated list of image descriptors. each image descriptor is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x (such as 2x) to serve a high-res image for high-dpi screens. <picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo...
<table>: The Table element - HTML: Hypertext Markup Language
and margin-right to auto or margin to 0 auto to achieve an effect that is similar to the align attribute. bgcolor the background color of the table. it is a 6-digit hexadecimal rgb code, prefixed by a '#'. one of the predefined color kewords can also be used. to achieve a similar effect, use the css background-color property. ...
...if the length is defined using a percentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). ...
...rcentage value, the content will be centered and the total vertical space (top and bottom) will represent this value. the same is true for the total horizontal space (left and right). to achieve a similar effect, apply the border-collapse property to the <table> element, with its value set to collapse, and the padding property to the <td> elements. cellspacing this attribute defines the
size of the space between two cells in a percentage value or pixels. the attribute is applied both horizontally and vertically, to the space between the top of the table and the cells of the first row, the left of the table and the first column, the right of the table and the last column and the bottom of the table and the last row. to achieve a similar effect, apply the border-spacing property to t...
<tbody>: The Table Body element - HTML: Hypertext Markup Language
characters specified by the char attribute. valign this attribute specifies the vertical alignment of the text within each row of cells of the table header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the
size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. as this attribute is deprecated, use the css vertical-align property instead. usage notes if the table includes a <thead> block...
...id #bbb; padding: 2px 8px 0; text-align: left; } then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells. the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce; font-
size: 18px; border-bottom: 2px solid #999; } finally, header cells contained within the <thead> block are given additional styling. they use a darker background-color, a larger font
size, and a thicker, darker bottom border than the other cell borders. result the resulting table looks like this: multiple bodies you can create multiple sections within a table by using multiple <tbody> elements...
...hen each remaining row in each major's <tbody> consists of two cells: the first for the student's id and the second for their name. css table { border: 2px solid #555; border-collapse: collapse; font: 16px "lucida grande", "helvetica", "arial", sans-serif; } th, td { border: 1px solid #bbb; padding: 2px 8px 0; text-align: left; } thead > tr > th { background-color: #cce; font-
size: 18px; border-bottom: 2px solid #999; } most of the css is unchanged. we do, however, add a slightly more subtle style for header cells contained directly within a <tbody> (as opposed to those which reside in a <thead>). this is used for the headers indicating each table section's corresponding major. tbody > tr > th { background-color: #dde; border-bottom: 1.5px solid #bbb; font-weigh...
<textarea> - HTML: Hypertext Markup Language
the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a
sizeable amount of free-form text, for example a comment on a review or feedback form. 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. ...
...teractive-examples and send us a pull request. the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the form is submitted. rows and cols attributes to allow you to specify an exact
size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this e...
...line is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box. don't use vertical-align: baseline on it; the behavior is unpredictable. controlling whether a textarea is resizable in most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the
size of the element on the page. this is controlled by the re
size css property — resizing is enabled by default, but you can explicitly disable it using a re
size value of none: textarea { re
size: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using ...
<video>: The Video Embed element - HTML: Hypertext Markup Language
in seconds, on the media's timeline. if no media is present on the element, or the media is not valid, the returned value is nan. if the media has no known end (such as for live streams of unknown duration, web radio, media incoming from webrtc, and so forth), this value is +infinity. height the height of the video's display area, in css pixels (absolute values only; no percentages.) intrinsic
size this attribute tells the browser to ignore the actual intrinsic
size of the image and pretend it’s the
size specified in the attribute. specifically, the image would raster at these dimensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples loop a boolean attribute; if specified, the browser will automatically seek back to t...
...d audio) content, htmlmediaelements fire many different events. in addition to providing controllability, these events let you monitor the progress of both download and playback of the media, as well as the playback state and position. you can use the object-position property to adjust the positioning of the video within the element's frame, and the object-fit property to control how the video's
size is adjusted to fit within the frame. to show subtitles/captions along with your video, you can use some javascript along with the <track> element and the webvtt format. see adding captions and subtitles to html5 video for more information. you can play audio files using a <video> element. this can be useful if, for example, you need to perform audio with a webvtt transcript, since the <audio> e...
...<video> is the video and audio content beginner's tutorial. styling with css the <video> element is a replaced element — its display value is inline by default, but its default width and height in the viewport is defined by the video being embedded. there are no special considerations for styling <video>; a common strategy is to give it a display value of block to make it easier to position,
size, etc., and then provide styling and layout information as required. video player styling basics provides some useful styling techniques. detecting track addition and removal you can detect when tracks are added to and removed from a <video> element using the addtrack and removetrack events. however, these events aren't sent directly to the <video> element itself. instead, they're sent to the tr...
contextmenu - HTML: Hypertext Markup Language
er" onclick="shareviatwitter()"></menuitem> <menuitem label="facebook" onclick="shareviafacebook()"></menuitem> </menu> </menu> <ol> <li> anywhere in the example you can share the page on twitter and facebook using the share menu from your context menu. ...
... function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray! ...
... recommendation snapshot of html liv...
itemscope - HTML: Hypertext Markup Language
</p> direc...
... </p> directions: <br> <div itemprop="...
... sugar and cinnamon. use additional sugar for tart apples . itemprop author [person] itemprop name carol smith itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.0 itemprop reviewcount 35 itemscope itemprop[itemtype] nutrition [nutritioninformation] itemprop serving
size 1 medium slice itemprop calories 250 cal itemprop fatcontent 12 g note: a handy tool for extracting microdata structures from html is google's structured data testing tool. try it on the html shown above. specifications specification status comment html microdatathe definition of 'itemscope' in that specification. working ...
Content negotiation - HTTP
ram. this value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. for example, 512 megabytes will be reported as 0.5. dpr indicates the client's device pixel ratio. viewport-width indicates the layout viewport width in css pixels. width indicates the resource width in physical pixels (in other words the intrinsic
size of an image). the accept-charset header the accept-charset header indicates to the server what kinds of character encodings are understood by the user-agent. traditionally, it was set to a different value for each locale for the browser, like iso-8859-1,utf-8;q=0.7,*;q=0.7 for a western european locale. with utf-8 now being well-supported, being the preferred way of encoding characters, ...
...r the accept-encoding header defines the acceptable content-encoding (supported compressions). the value is a q-factor list (e.g.: br, gzip;q=0.8) that indicates the priority of the encoding values. the default value identity is at the lowest priority (unless otherwise declared). compressing http messages is one of the most important ways to improve the performance of a web site, it shrinks the
size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression. the accept-language header the accept-language header is used to indicate the language preference of the user. it is a list of values with quality factors (like: "de, en;q=0.7"). a default value is often set accordin...
...orithm and will be able to serve acceptable content directly, without more request to the server. obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen
size, resolution or other dimensions, a new http header must be created. sending of the headers must be done on every request. this is not too problematic with few headers, but with the eventual multiplications of them, the message
size would lead to a decrease in performance. the more precise headers are sent, the more entropy is sent, allowing for more http fingerprinting and corresponding privacy c...
HTTP range requests - HTTP
ue isn't "none"), the server supports range requests. you can check this by issuing a head request with curl, for example. curl -i http://i.imgur.com/z4d4kwk.jpg http/1.1 200 ok ... accept-ranges: bytes content-length: 146515 in this response, accept-ranges: bytes indicates that bytes can be used as unit to define a range. here the content-length header is also useful as it indicates the full
size of the image to retrieve. if sites omit the accept-ranges header, they likely don't support partial requests. some sites also explicitly send "none" as a value, indicating no support. in some apps, download managers disable their pause buttons in that case. curl -i https://www.youtube.com/watch?v=ewtz2xpqwpa http/1.1 200 ok ... accept-ranges: none requesting a specific range from a server i...
...he first 1024 bytes. curl http://i.imgur.com/z4d4kwk.jpg -i -h "range: bytes=0-1023" the issued request looks like this: get /z4d4kwk.jpg http/1.1 host: i.imgur.com range: bytes=0-1023 the server responses with the 206 partial content status: http/1.1 206 partial content content-range: bytes 0-1023/146515 content-length: 1024 ... (binary content) the content-length header now indicates the
size of the requested range (and not the full
size of the image). the content-range response header indicates where in the full resource this partial message belongs. multipart ranges the range header also allows you to get multiple ranges at once in a multipart document. the ranges are separated by a comma. curl http://www.example.com -i -h "range: bytes=0-50, 100-150" the server responses with t...
...t-byte-pos of all ranges is greater than the resource length), the server responds with a 416 requested range not satisfiable status. in case of no support of range requests, the 200 ok status is sent back from a server. comparison to chunked transfer-encoding the transfer-encoding header allows chunked encoding, which is useful when larger amounts of data are sent to the client and the total
size of the response is not known until the request has been fully processed. the server sends data to the client straight away without buffering the response or determining the exact length, which leads to improved latency. range requests and chunking are compatible and can be used with or without each other. ...
Expressions and operators - JavaScript
eof operator is used in either of the following ways: typeof operand typeof (operand) the typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned. the parentheses are optional. ...
...he type is to be returned. the parentheses are optional. ...
...for example, you can override multiplication and division first, then addition and subtraction to evaluate addition first. var a = 1; var b = 2; var c = 3; // default precedence a + b * c // 7 // evaluated by default like this a + (b * c) // 7 // now ...
Keyed collections - JavaScript
ey/value map and can iterate its elements in insertion order. the following code shows some basic operations with a map. see also the map reference page for more examples and the complete api. you can use a for...of loop to return an array of [key, value] for each iteration. let sayings = new map(); sayings.set('dog', 'woof'); sayings.set('cat', 'meow'); sayings.set('elephant', 'toot'); sayings.
size; // 3 sayings.get('dog'); // woof sayings.get('fox'); // undefined sayings.has('bird'); // false sayings.delete('dog'); sayings.has('dog'); // false for (let [key, value] of sayings) { console.log(key + ' goes ' + value); } // "cat goes meow" // "elephant goes toot" sayings.clear(); sayings.
size; // 0 object and map compared traditionally, objects have been used to map strings to values. o...
...object and map compared traditionally, objects have been used to map strings to values. objects allow you to set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. map objects, however, have a few more advantages that make them better maps. the keys of an object are strings or symbols, where they can be of any value for a map. you can get the
size of a map easily, while you have to manually keep track of
size for an object. the iteration of maps is in insertion order of the elements. an object has a prototype, so there are default keys in the map. (this can be bypassed using map = object.create(null).) these three tips can help you to decide whether to use a map or an object: use maps over objects when keys are unknown until run tim...
...s of values. you can iterate its elements in insertion order. a value in a set may only occur once; it is unique in the set's collection. the following code shows some basic operations with a set. see also the set reference page for more examples and the complete api. let myset = new set(); myset.add(1); myset.add('some text'); myset.add('foo'); myset.has(1); // true myset.delete('foo'); myset.
size; // 2 for (let item of myset) console.log(item); // 1 // "some text" converting between array and set you can create an array from a set using array.from or the spread operator. also, the set constructor accepts an array to convert in the other direction. note: remember that set objects store unique values—so any duplicate elements from an array are deleted when converting! array.from(m...
Deprecated and obsolete features - JavaScript
ecated features these deprecated features can still be used, but should be used with caution because they are expected to be removed entirely sometime in the future. you should work to remove their use from your code. regexp properties the following properties are deprecated. this does not affect their use in replacement strings: property description $1-$9 parenthe
sized substring matches, if any. warning: using these properties can result in problems, since browser extensions can modify them. avoid them! $_ see input. $* see multiline. $& see lastmatch. $+ see lastparen. $` see leftcontext. $' see rightcontext. input the string against which a regular expression is matc...
... browser extensions can modify them. avoid them! $_ see input. $* see multiline. $& see lastmatch. $+ see lastparen. $` see leftcontext. $' see rightcontext. input the string against which a regular expression is matched. lastmatch the last matched characters. lastparen the last parenthe
sized substring match, if any. leftcontext the substring preceding the most recent match. rightcontext the substring following the most recent match. the following are now properties of regexp instances, no longer of the regexp object: property description global whether or not to test the regular expression against all possible matches in a stri...
... escape sequences octal escape sequences (\ followed by one, two, or three octal digits) are deprecated in string and regular expression literals. the escape and unescape functions are deprecated. use encodeuri, encodeuricomponent, decodeuri or decodeuricomponent to encode and decode escape sequences for special characters. string methods html wrapper methods like string.prototype.font
size and string.prototype.big. string.prototype.quote is removed from firefox 37. non standard flags parameter in string.prototype.search, string.prototype.match, and string.prototype.replace are deprecated. string.prototype.substr probably won't be removed anytime soon, but it's defined in annex b of the ecma-262 standard, whose introduction states: "… programmers should not use or assume the ex...
String.prototype.replace() - JavaScript
owing special replacement patterns: pattern inserts $$ inserts a "$". $& inserts the matched substring. $` inserts the portion of the string that precedes the matched substring. $' inserts the portion of the string that follows the matched substring. $n where n is a positive integer less than 100, inserts the nth parenthe
sized submatch string, provided the first argument was a regexp object. note that this is 1-indexed. if a group n is not present (e.g., if group is 3), it will be replaced as a literal (e.g., $3). $<name> where name is a capturing group name. if the group is not in the regular expressions (or not in the match), this will resolve to the empty string. only available in browser versions suppo...
...ns do not apply in this case.) note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global. the arguments to the function are as follows: possible name supplied value match the matched substring. (corresponds to $& above.) p1, p2, ... the nth string found by a parenthe
sized capture group (including named capturing groups), provided the first argument to replace() was a regexp object. (corresponds to $1, $2, etc. above.) for example, if /(\a+)(\b+)/, was given, p1 is the match for \a+, and p2 for \b+. offset the offset of the matched substring within the whole string being examined. (for example, if the whole string was 'abcd', and the matched substring ...
...s argument will be 1.) string the whole string being examined. groups in browser versions supporting named capturing groups, will be an object whose keys are the used group names, and whose values are the matched portions (undefined if not matched). ...
String.prototype.replaceAll() - JavaScript
owing special replacement patterns: pattern inserts $$ inserts a "$". $& inserts the matched substring. $` inserts the portion of the string that precedes the matched substring. $' inserts the portion of the string that follows the matched substring. $n where n is a positive integer less than 100, inserts the nth parenthe
sized submatch string, provided the first argument was a regexp object. note that this is 1-indexed. specifying a function as a parameter you can specify a function as the second parameter. in this case, the function will be invoked after the match has been performed. the function's result (return value) will be used as the replacement string. (note: the above-mentioned special replacement pat...
...ns do not apply in this case.) note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global. the arguments to the function are as follows: possible name supplied value match the matched substring. (corresponds to $& above.) p1, p2, ... the nth string found by a parenthe
sized capture group, provided the first argument to replace() was a regexp object. (corresponds to $1, $2, etc. above.) for example, if /(\a+)(\b+)/, was given, p1 is the match for \a+, and p2 for \b+. offset the offset of the matched substring within the whole string being examined. (for example, if the whole string was 'abcd', and the matched substring was 'bc', then this argument will b...
...d p2 for \b+. offset the offset of the matched substring within the whole string being examined. (for example, if the whole string was 'abcd', and the matched substring was 'bc', then this argument will be 1.) string the whole string being examined. (the exact number of arguments depends on whether the first argument is a regexp object—and, if so, how many parenthe
sized submatches it specifies.) examples using replaceall 'aabbcc'.replaceall('b', '.'); // 'aa..cc' non-global regex throws when using a regular expression search value, it must be global. this won't work: 'aabbcc'.replaceall(/b/, '.'); typeerror: replaceall must be called with a global regexp this will work: 'aabbcc'.replaceall(/b/g, '.'); "aa..cc" specifications specification ...
TypedArray - JavaScript
y (e.g. int8array), an array buffer is created internally in memory or, if an arraybuffer object is given as constructor argument, then this is used instead. the buffer address is saved as an internal property of the instance and all the methods of %typedarray%.prototype, i.e. set value and get value etc., operate on that array buffer address. ...
... bigint64array. these objects all have a common syntax for their constructors: new typedarray(); new typedarray(length); new typedarray(typedarray); new typedarray(object); new typedarray(buffer [, byteoffset [, length]]); where typedarray is a constructor for one of the concrete types. parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
... a length argument, a new typed array view is created that views the specified arraybuffer. the byteoffset and length parameters specify the memory range that will be exposed by the typed array view. if both are omitted, all of buffer is viewed; if only length is omitted, the remainder of buffer is viewed. static properties typedarray.bytes_per_element returns a number value of the element
size for the different typedarray objects. typedarray.name returns the string value of the constructor name (e.g, "int8array"). get typedarray[@@species] the constructor function used to create derived objects. typedarray.prototype prototype for typedarray objects. static methods typedarray.from() creates a new typedarray from an array-like or iterable object. see also array.from(). typed...
WebAssembly.Memory() constructor - JavaScript
a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance. a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly. syntax new webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial
size of the webassembly memory, in units of webassembly pages. maximum optional the maximum
size the webassembly memory is allowed to grow to, in units of webassembly pages. when present, the maximum parameter acts as a hint to the engine to reserve memory up front. however, the engine may ignore or clamp this reservation request. unshared webassembly memories don't need to set a maximum, but shar...
... hint to the engine to reserve memory up front. however, the engine may ignore or clamp this reservation request. unshared webassembly memories don't need to set a maximum, but shared memories do. shared optional a boolean value that defines whether the memory is a shared memory or not. if set to true, it is a shared memory. the default is false. note: a webassembly page has a constant
size of 65,536 bytes, i.e., 64kib. exceptions if memorydescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new memory instance there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory insta...
...e., 64kib. exceptions if memorydescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new memory instance there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial
size of 10 pages (640kib), and a maximum
size of 100 pages (6.4mib). its buffer property will return an arraybuffer. var memory = new webassembly.memory({initial:10, maximum:100}); the second way to get a webassembly.memory object is to have it exported by a webassembly module. the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm by...
MathML documentation index - MathML
we will now prove the pythagorean theorem: 6 mathml attribute reference mathml, mathml reference this is an alphabetical list of mathml attributes. more details for each attribute are available on particular element pages. 7 values guide, mathml, mathml reference several mathml presentation elements have attributes that accept length values used for
size or spacing. mathml accepts different units and constants for specifying lengths. 8 mathml documentation index index, mathml found 40 pages: 9 mathml element reference mathml, mathml reference this is an alphabetical list of mathml presentation elements. 10 <maction> mathml, mathml reference, mathml:element, mathml:enlivening expressions ...
... mathml:script and limit schemata the mathml <mover> element is used to attach an accent or a limit over an expression. use the following syntax: <mover> base overscript </mover> 23 <mpadded> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mpadded> element is used to add extra padding and to set the general adjustment of position and
size of enclosed contents. 24 <mphantom> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mphantom> element is rendered invisibly, but dimensions (such as height, width, and baseline position) are still kept. 25 <mroot> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <mroot> element is use...
...y. note that quotation marks should not be specified unless they are part of the string literal. the content of an <ms> element is not an ascii string per se, but rather a sequence of characters and <mglyph> and <malignmark> elements. 28 <mspace> mathml, mathml reference, mathml:element, mathml:token elements the mathml <mspace> element is used to display a blank space, whose
size is set by its attributes. 29 <msqrt> mathml, mathml reference, mathml:element, mathml:general layout schemata the mathml <msqrt> element is used to display square roots (no index is displayed). the square root accepts only one argument, which leads to the following syntax: <msqrt> base </msqrt>. 30 <mstyle> mathml, mathml reference, mathml:element, mathml:gener...
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this article explains a change that has occured in the way
sizes are worked out on web documents when width and height attributes are set on them. this change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the
size needed to display the image before it has loaded, if css has been applied that causes problems with its display
size. read on to find out more. jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-
sized placeholder box in the layout for each image to appear in when it finally loads. without the width and height attri...
...n — the above css overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0. when the image finally loads, the same jank will occur as the page layout is shifted to make space for it. a new way of sizing images before loading completes recognizing the problem, a wicg community group formed to propose an intrinsic
size attribute. folks from mozilla then expanded on this thinking, working on a proposal in the css box sizing level 4 draft to define an aspect-ratio property and propose the idea of using the width and height attributes to compute layout. fantasai & jen simmons collaborated with emilio, who worked on an experimental implementation to prove it would work. mozilla then brought the idea up in the wicg...
...rrently this effect is being limited to actual <img> elements, as applying to other such elements may have undesirable results. see (bug 1583980). when the width/height of an <img> element — as set using html attributes — is overidden using css using something like this: img { max-width: 100%; height: auto } the aspect ratio is then used to calculate the height and therefore the correct
size is applied to the <img> element, meaning that the aforementioned jank will not occur when the image loads. it only works before the image loads the new mechanism currently only works on <img> elements before the image is loaded. originally we were going to have the new mechanism apply the calculated sizing to <img> elements before and after the image has loaded. however, this caused a problem ...
Navigation and resource timings - Web Performance
is document for the rest of this explanation, we use the following variable: let timing = performance.getentriesbytype('navigation')[0]; protocol we can check the protocol used by querying: let protocol = timing.nexthopprotocol it returns the network protocol used to fetch the resource: in this case h2 for http/2. compression to get the compression savings percentage, we divide the transfer
size by the decodedbody
size, and subtract that from 100%. we see a savings of over 74%. let compressionsavings = 1 - (timing.transfer
size / timing.decodedbody
size) we could have used let compressionsavings = 1 - (timing.encodedbody
size / timing.decodedbody
size) but using transfer
size includes the overhead bytes. for comparison, we can look at the network tab and see that we transferred 22.04kb fo...
..., and subtract that from 100%. we see a savings of over 74%. let compressionsavings = 1 - (timing.transfer
size / timing.decodedbody
size) we could have used let compressionsavings = 1 - (timing.encodedbody
size / timing.decodedbody
size) but using transfer
size includes the overhead bytes. for comparison, we can look at the network tab and see that we transferred 22.04kb for an uncompressed file
size of 87.24kb. if we do the math with these numbers, we get the same result: 1 - (22.04 / 87.24) = 0.747. the navigation timings provide us a way to programmatically check transfer sizing and bandwidth savings. note that this is the
size for this single document alone: for this resource alone, not for all the resources combined. however, the duration, load events and dom related timings have to...
...provide us a way to programmatically check transfer sizing and bandwidth savings. note that this is the
size for this single document alone: for this resource alone, not for all the resources combined. however, the duration, load events and dom related timings have to do with the entire navigation, not this single asset. client-side web applications may seem faster than this one with transfer
sizes under 10000 and decoded body
sizes under 30000, but that doesn't mean javascript, css, or media assets aren't adding bloat. checking compression ratios is important but ensure to also check duration and the time between when the domcontentloaded event ended and when the dom is complete, as running javascript on the main thread for long periods of time can lead to a non-responsive user interface.
Media - Progressive web apps (PWAs)
support for printing and for paged media in general. a @page rule can set the page margins. for double-sided printing, you can specify the margins separately for @page:left and @page:right. for print media, you normally use appropriate length units like inches (in) and points (pt = 1/72 inch), or centimeters (cm) and millimeters (mm). it is equally appropriate to use ems (em) to match the font
size, and percentages (%). you can control how the content of the document breaks across page boundaries, by using the page-break-before, page-break-after and page-break-inside properties. example this rule sets the page margins to one inch on all four sides: @page {margin: 1in;} this rule ensures that every h1 element starts on a new page: h1 {page-break-before: always;} more details for...
...it uses your browser's default style. print (or print preview) the document. the stylesheet places each section on a s...
...it uses your browser's default style. print (or print preview) the document. the stylesheet places each section on a separate page, and it adds a header and footer to each page. if your browser supports counters, it adds a page number in the foo...
SVG Presentation Attributes - SVG: Scalable Vector Graphics
presentation attributes are css properties that can be used as attributes on svg elements. ...
...on attributes are css properties that can be used as attributes on svg elements. ...
...opshadow> element. value: <color>; animatable: yes flood-opacity it indicates the opacity value to use across the current filter primitive subregion defined through the <feflood> or <fedropshadow> element. value: <number>|<percentage>; animatable: yes font-family it indicates which font family will be used to render the text of the element. value: see css font-family; animatable: yes font-
size it specifies the
size of the font. value: see css font-
size; animatable: yes font-
size-adjust it specifies that the font
size should be chosen based on the height of lowercase letters rather than the height of capital letters. value: <number>|none|inherit; animatable: yes font-stretch it selects a normal, condensed, or expanded face from a font. value: see css font-stretch; animatable: ye...
textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph
size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textle...
...th-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can re
size using an <input> element of type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none...
...; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-
size="60" fill="green"> hello world! </text> </svg> first, a <rect> element is used to create and stroke a rectangle to contain the text. then <text> is used to create the text element itself, with an id of "hello". html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"...
<text> - SVG: Scalable Vector Graphics
r compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
...d to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; animatable: yes textlength a width that the text should be scaled to fit. ...
...aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specifications specification status comment scalable vector graphics (svg) 2th...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 1280425) added non-scaling-
size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes b and b path commands implementat...
...c shapes implementation status unknown svganimatedpoints.animatedpoints as alias of svganimatedpoints.points implementation status unknown auto behavior for rx and ry in <ellipse> implementation status unknown text change notes text-decoration-fill and text-decoration-stroke properties not implemented yet (bug 1303569) inline-
size attribute for <text> implementation status unknown shape-inside property inplementation status unknown shape-subtract property inplementation status unknown white-space implementation status unknown deprecated xml:space attribute implementation status unknown kerning property removed implementation status unknown path attribu...
... notes tabindex attribute implemented (bug 778654) bounding-box on pointer-events not implemented (bug 945187) load, abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <svg> element fire load events implementation status unknown re
size and scroll instead of svgre
size and svgscroll implementation status unknown domactivate removed implementation status unknown focusin and focusout instead of domfocusin and domfocusout implementation status unknown keyboard events implementation status unknown mutation events removed implementation status unknown svgzoomevent removed ...
Positions - SVG: Scalable Vector Graphics
the grid for all elements, svg uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other computer drawing routines). that is, the top left corner of the document is considered to be the point (0,0), or point of origin. ...
..." /> defines a rectangle from the upper left corner, that spans from there 100px to the right and to the bottom. what are "pixels"? in the most basic case one pixel in an svg document maps to one pixel on the output device (a.k.a. the screen). but svg wouldn't have the "scalable" in its name, if there weren't several possibilities to change this behaviour. much like absolute and relative font
sizes in css, svg defines absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers. without further specification, one user unit equals one screen unit. to explicitly change this behaviour, there are several possibilities in svg. we start with the svg root element: <svg width="100" height="100"> the above elemen...
...cification, one user unit equals one screen unit. to explicitly change this behaviour, there are several possibilities in svg. we start with the svg root element: <svg width="100" height="100"> the above element defines a simple svg canvas with 100x100px. one user unit equals one screen unit. <svg width="200" height="200" viewbox="0 0 100 100"> the whole svg canvas here is 200px by 200px in
size. however, the viewbox attribute defines the portion of that canvas to display. these 200x200 pixels display an area that starts at user unit (0,0) and spans 100x100 user units to the right and to the bottom. this effectively zooms in on the 100x100 unit area and enlarges the image to double
size. the current mapping (for a single element or the whole image) of user units to screen units is calle...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
like in the following example: var img = document.createelementns("http://www...
...like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); ...
...); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to. in this case our picture is laid out in a 100 by 100 viewport. the preserveaspectratio attribute specifies that the aspect ratio must be preserved by centering the picture in the available
size, sizing to the maximum of the height or width and then cutting off any overflow. the style attribute pins the svg element to the background of the form. related links another svg in html example: a swarm of motes working example that works in both mozilla and in internet explorer with adobe's svg viewer installed. (for inline svg to work in both firefox and internet explorer it is necessary...
panel - Archive of obsolete content
e return key, the contents of the <textarea> is sent to the main add-on code. ...
...width of the panel in pixels. optional. height number the height of the panel in pixels. optional. position object the position of the panel. optional. see panel's options for further details. focus boolean set to false to prevent taking the focus away when the panel is shown. hide() stops displaying the panel. re
size(width, height) re
sizes the panel. parameters width : number the new width of the panel in pixels. height : number the new height of the panel in pixels. on(type, listener) registers an event listener with the panel. parameters type : string the type of event to listen for. listener : function the listener function that handles the event. removelistener(type, listener) unregisters a...
ui/button/action - Archive of obsolete content
if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the actionbutton constructo...
... three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs. here you can specify a range of
sizes for your button's icon. each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path. each key must be a numeric string such as "16", or "32", which represents the
size in pixels of the corresponding image. var { actionbutton } = require('sdk/ui/button/action'); var self = require("sdk/self"); var but...
ui/button/toggle - Archive of obsolete content
if you specify multiple icons, firefox will select the best-fitting icon based on the device screen resolution and the place the icon appears. for example, in the screenshots above, firefox uses the small icon when the button is in the toolbar and the large icon when the button is in the menu panel. read more about specifying icons in the reference documentation for the togglebutton constructo...
... three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs. here you can specify a range of
sizes for your button's icon. each key-value pair specifies an icon: each value specifies an image file as a resource:// url or relative path. each key must be a numeric string such as "16", or "32", which represents the
size in pixels of the corresponding image. var { togglebutton } = require('sdk/ui/button/toggle'); var self = require("sdk/self"); var but...
package.json - Archive of obsolete content
or add-on html content) does not work. you can generate the url to your add-on icon in the data directory using the url format below, where "your-addon-name" is the value in the name field of package.json. resource://@your-addon-name/data/your-icon-name.png this value will be used as the add-on's em:iconurl element in its install.rdf. the icon may be up to 48x48 pixels in
size. a larger icon will work, but may either scaled and possibly distorted) or might break parts of firefox ui. (if you test this, please add the result here.) this can also be an object with the image
size as key and the (absolute) location of the image as value. jpm looks for the
sizes 64, 48 and 32. icon64 note: this is deprecated along with cfx; it's not available w...
... note: this is deprecated along with cfx; it's not available when using jpm. the path to an image containing the large icon for the add-on. defaults to icon64.png. if you don't provide an icon here, the same icon as specified by icon will be used. this value will be used as the add-on's em:icon64url element in its install.rdf. the icon may be up to 64x64 pixels in
size. id a globally unique identifier for the add-on. this value will be used as the add-on's em:id element in its install.rdf. see the program id documentation. lib string representing the top-level module directory provided in this add-on. defaults to "lib". note: this is deprecated along with cfx and is not available when using jpm. ...
Boxes - Archive of obsolete content
wrapping contents in html you can use a div as a container and when the div changes
size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
... wrapping contents in html you can use a div as a container and when the div changes
size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
Adding menus and submenus - Archive of obsolete content
more menu elements. ...
...up element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels: <toolbox> <menubar id="xulschoolhello-menubar"> <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;"> <menupopup> <menu id="xulschoolhello-greeting-
sizes-menu" label="&xulschoolhello.greeting
sizes.label;"> <menupopup> <menuitem label="&xulschoolhello.greet.short.label;" oncommand="xulschoolchrome.greetingdialog.greetingshort(event);" /> <menuitem label="&xulschoolhello.greet.medium.label;" oncommand="xulschoolchrome.greetingdialog.greetingmedium(event);" /> <menuitem label="&xulschoolhello.greet.long.label;" ...
XPCOM Objects - Archive of obsolete content
that these are input parameters, values that the method will use to perform its actions. when is a parameter not an in parameter? in some methods the out keyword is used for parameters that are return values in reality. this is done for certain value types that are not valid as return values in idl, such as typed arrays. ...
... here's one way to invoke this method: let childarrayobj = new object(); let childarray; this._prefservice.getchildlist("", {}, childarrayobj); // .value holds the actual array. ...
XML data - Archive of obsolete content
n> <ocean> <name>indian</name> <area>75,000</area> <depth>3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, style9.css. ...
...lock; width: 8em; font-weight: bold; font-
size: 200%; content: "oceans"; margin: -.75em 0px .25em -.25em; padding: .1em .25em; background-color: #cdf; } planet { display: block; margin: 2em 1em; border: 4px solid #cdf; padding: 0px 1em; background-color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-
size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic are...
progress - Archive of obsolete content
target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. ...
...read only. ...
Index of archived content - Archive of obsolete content
rfe to the custom controls interfaces rfe to the xforms api troubleshooting xforms forms using xforms and php xforms api reference xforms config variables xforms custom controls xforms custom controls examples xforms styling background-
size foreach beginner tutorials creating reusable content with css and xbl underscores in class and id names xml data xul user interfaces case sensitivity in class and id names creating a dynamic status bar extension creating a status bar extension ...
...s using the w3c dom using workers in extensions web standards choosing standards compliance over proprietary practices community correctly using titles with external stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly
sized list item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards ...
Images, Tables, and Mysterious Gaps - Archive of obsolete content
derneath our navbar images is gone. however, the decorative cell is still too tall, and other images are misaligned with respect to the text around them. again, we could class images, cells, or rows in order to narrow down the focus of the effect. however, the styles shown above won't overcome the problem of one-pixel images, because the line box surrounding them will be the height of the font-
size for the table cell, and so won't shrink down. the image will move to the bottom of the cell, but the cell won't "shrinkwrap" the image. in addition, any other image which is shorter than the line box is tall will still have space appear around it-- as happened with the red spacer cell. the one-pixel image in the cell is aligned with the bottom of the cell now, but the line box is back and it's th...
...or the table cell, and so won't shrink down. the image will move to the bottom of the cell, but the cell won't "shrinkwrap" the image. in addition, any other image which is shorter than the line box is tall will still have space appear around it-- as happened with the red spacer cell. the one-pixel image in the cell is aligned with the bottom of the cell now, but the line box is back and it's the
size of normal text. see, for example, figure 11, where the font-
size of the document has been raised to a large amount. the navbar images now have space appearing above them, and the red spacer got even bigger. it's difficult to avoid this, because the images are (in this approach) still inline and so still participate in the creation of a line box. if that line box gets tall enough, space will b...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
es and different paths between windows and unix explain why we need two different configuration files. there might be a way to manage those differences within a same file, but i am not very fluent in javascript :-( here is an example of a lockpref preference configuration file for unix (config_file_unix.jsc). we lock (lockpref) some preferences (imap server name, company name, cache location and
size...), others can be just set as default (defaultpref); startup.homepage... we also use ldap functions (from prefcalls.js) to get the current user (user or username) email address and common name, respectively mail and cn in ldap. [root@lugdunum /var/www/html/browser] $ more config_file_unix.jsc // functions you can use: // lockpref(name, value) user is disallowed from changing // (aka lock_pref(...
...ration ] //----------------------------------------------------------------------- config("autoadmin.refresh_interval", 1440); // auto-update every 24 hours defaultpref("browser.startup.page",1); //0=blank page, 1=homepage, 2=last visited defaultpref("browser.startup.homepage", "http://www/mci/mode-d-emploi.shtml"); lockpref("browser.cache.directory", "/tmp"); lockpref("browser.cache.memory_cache_
size", 0); lockpref("mail.server_type",1); // pop=0 imap=1 lockpref("network.hosts.imap_servers", "pop-int"); lockpref("mail.imap.server.pop-int.using_subscription",true); lockpref("mail.imap.server.pop-int.username", env_user); lockpref("mail.identity.useremail", ldap_email); lockpref("mail.identity.username", ldap_gecos); lockpref("mail.check_new_mail", false); lockpref("mail.directory", env_home+"...
Getting Started - Archive of obsolete content
he browser pops up, you probably won't be able to see much. open the preferences dialog box and take a look at all of the buttons in there. they should all be blue with white text. changing images the images used on buttons in the interface are located in the same directories as the css files. to make a change, just replace one of the images with one of your own. it should probably be of the same
size, but it doesn't have to be. if you do need to change the
size, also make sure to change any css that may be affected by that change. after you've changed the images, launch mozilla and you should see them. creating the install script getting it ready for the installation before we can package everything up for installation, we need to remove all references to classic. copy everything in \mozilla\...
...hing up for installation, we need to remove all references to classic. copy everything in \mozilla\chrome\classic\skin\classic to a directory called \myskin. skin info when switching skins in mozilla, it displays a preview image and some information about the theme. this is what we're going to create now. take a screenshot of mozilla running your theme and create an image that is 438x89 pixels in
size. place it in \myskin and call it preview.png (if it's a jpg or gif call it preview.jpg or preview.gif). make a copy of contents.rdf and place it in \myskin and open it up in your text editor. this file is a small xml database which is used to describe the skin. list all the skins being supplied by this theme <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /...
In-Depth - Archive of obsolete content
mplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
...st): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. ...
JavaScript OS.Shared - Archive of obsolete content
module os.shared contains tools to interact with the operating system (and, more generally, in c) in javascript. all these tools are designed to be used with js-ctypes. for the moment, module os.shared is accessible only from chrome workers. ...
...ule os.shared contains tools to interact with the operating system (and, more generally, in c) in javascript. all these tools are designed to be used with js-ctypes. for the moment, module os.shared is accessible only from chrome workers. ...
generateCRMFRequest() - Archive of obsolete content
are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. crmfobject = crypto.generatecrmfrequest("requesteddn", "regtoken", "authenticator", "escrowauthoritycert", "crmf generation done code", key
size1, "keyparams1", "keygenalg1", ..., key
sizen, "keyparamsn", "keygenalgn"); this method will generate a sequence of crmf requests that has n requests. one request for each key pair that is generated. the first three parameters will be applied to every request. the "escrowauthoritycert" parameter will only be used for r...
... private key being escrowed. the user will be prompted for confirmation whenever a key will be escrowed. only key exchange keys will be escrowed. if a dual use key is being generated, it will not be escrowed. the value of this argument is a base-64 encoded certificate. "crmf generation done code" this parameter is javascript to execute when the crmf generation is complete. key
sizen the
size in bits of the nth key to generate "keyparamsn" this string is an optional algorithm dependent parameter value. for diffie-hellman it is used to specify p and g parameters. for dsa, it will be used to specify pqg. if the key generation requires parameters and the value passed in is null, then the client will generate the parameters on its own. currently, this value is ign...
Venkman Introduction - Archive of obsolete content
for scripts that are not part of an actual function. clicking on a file name brings you to the top of that file, while clicking on a function name brings you to the start of that function. the line column in this view displays the line number that this function starts on. the column picker for this view (the box on the top right) can be used to display a length column. this column displays the
size of functions, in lines. both the line and length column are blank for file names. if a function has a breakpoint in it, a small red dot will show up in the function icon, as well as the parent's file icon. the local variables view the local variables view is on the left portion of the window, at the bottom. when the debugger is stopped, the local variables view displays values for the curren...
...on allows the user to type the first portion of a command, and press tab twice to see possible completions. if only one command matches, it will be auto-completed on the first tab. view customization venkman offers nearly complete control over the arrangement and display of views within the application. the debugger is built on top of an application framework that allows you to drag and drop, re
size, and toggle all the available views, and even to create new views or modules for the debugger if you choose—though this latter is an advanced topic and a subject for a future article. to remove a view from venkman, simply click the close button at the top right of that view. when the view again becomes necessary—for example, when you open a source file from the loaded scripts view and want t...
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 sid...
...om 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 of the child elements, resulting 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. see also more on box packing in the xul tutorial ...
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. ...
...rty may also be used. in this example, the preferred width of the inner hbox will be displayed at 40 pixels. the displayed width is also 40 pixels as no flexibility or alignment applies. <hbox> <hbox width="40" style="background-color: red;"> <label value="40"/> </hbox> </hbox> however, in the following example, despite that the preferred width of the box is 30 pixels, the displayed
size of the box will be larger to accommodate the larger label. <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. ...
Attribute (XUL) - Archive of obsolete content
p curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equal
size eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitl...
... ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement re
sizeafter re
sizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup
size sizemode
sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabs...
Adding Style Sheets - Archive of obsolete content
ly modified the look of the elements we have created so far. xul uses css (cascading style sheets) to customize elements. style sheets a style sheet is a file which contains style information for elements. it was originally designed for html elements but can be applied to xul elements also, or to any xml for that matter. the style sheet contains information such as the fonts, colors, borders, and
size of elements. mozilla applies a default style sheet to each xul window. in many cases, it will suffice to leave the defaults as is. other times, however, you will want to provide a custom style sheet. in general, you will associate a single style sheet with each xul file. you can place a style sheet anywhere you wish. if your xul file is stored remotely and accessed via an http url, you can store ...
...e style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... ...
List Controls - Archive of obsolete content
one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a suitable
size, but you can control the
size with the rows attribute. set it to the number of rows to display in the list box. a scroll bar will appear that the user can use to display the additional rows. the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="chocchip"...
...l label="mary ellen" /> <listcell label="candle maker" /> </listitem> <listitem> <listcell label="roger" /> <listcell label="swashbuckler" /> </listitem> </listbox> in this example, the flex attribute is used to make the column flexible. this attribute will be described in a later section, but here it allows the column to fill all of the remaining space horizontally. you can re
size the window to see that the column stretches as the window does. if you shrink the
size horizontally, the labels on the cells will crop themselves automatically using an ellipsis. you can use the crop attribute on the cells or items set to the value none to disable the ellipsis. drop-down lists drop-down lists can be created in html using the select element. the user can see a single choice in a...
Scrolling Menus - Archive of obsolete content
rolling box with arrows. the arrowscrollbox can be used anywhere a regular box can be used. you don't have to use it in menus. it is always a vertical box and may contain any elements inside it. you could use it to implement a list when you don't want it to be a drop-down. ...
...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> if you try this example, it will first open at full
size. however, if you shrink the height of the window, the scroll arrows will appear. making the window larger again will cause the arrows to disappear. you can set a css max-height property on the arrowscrollbox to limit the
size of the scrolling box and thus make the arrows appear all the time. the arrowscrollbox is mainly useful in menus and popups however. next, we'll see how to add some event han...
Skinning XUL Files by Hand - Archive of obsolete content
the following table shows the basic format for these two common types of style definitions: class id element.class { attribute: value; } element#id { attribute: value; } menu.baseline { border: 0px;...
...} in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
Tabboxes - Archive of obsolete content
s should go inside each tabpanel element. they do not go in the tab elements, as that is where the contents of the tabs along the top go. each tabpanel element becomes a page on the tabbed display. the first panel corresponds to the first tab, the second panel corresponds to the second tab, and so on. there is a one-to-one relationship between the tab and tabpanel elements. when determining the
size of the tabbox, the
size of the largest page is used. that means that if there are ten textboxes on one tab page and only one on another, the tab page will be
sized to fit the one with the ten on it as this takes up more room. the area taken up by the tab area does not change when the user switches to a new tab page. tabbox example example 1 : source view <tabbox> <tabs> <tab label="mai...
...panel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
The Box Model - Archive of obsolete content
simple rules. a box can lay out its children in one of two orientations, either horizontally or vertically. a horizontal box lines up its elements horizontally and a vertical box orients its elements vertically. you can think of a box as one row or one column from an html table. various attributes placed on the child elements in addition to some css style properties control the exact position and
size of the children. box elements the basic syntax of a box is as follows: <hbox> <!-- horizontal elements --> </hbox> <vbox> <!-- vertical elements --> </vbox> the hbox element is used to create a horizontally oriented box. each element placed in the hbox will be placed horizontally in a row. the vbox element is used to create a vertically oriented box. added elements will be placed underneath...
... orient vertically. the inner boxes orient their elements horizontally. as you see in the image below, the label and text input are placed side by side. the spacer and two buttons are also placed horizontally in their box. notice how the spacer causes the buttons to appear on the right side, because it is flexible. example so far: source view in the next section, we will look at specifying the
sizes of individual elements and how to constrain their
sizes. « previousnext » ...
Tree Box Objects - Archive of obsolete content
number to go down and a negative number to go up. the scrollbypages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. a page is equal to the number of visible rows. for example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. this is a convenient method since when the user re
sizes a flexible tree, the page
size will grow and shrink, so you don't need to calculate the page
size manually. this isn't too hard to calculate manually anyway since the tree box object also provides a getpagelength() function which returns the number of rows in a page. in the scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the get...
...bject also provides a getpagelength() function which returns the number of rows in a page. in the scrolling example above, getpagelength() would return four. note that in firefox 1.0 and mozilla 1.7 and earlier, the getpagelength() function is called getpagecount() instead. the name was changed to getpagelength() since it was confusing before since it doesn't return the number of pages, but the
size of each page. you could determine the number of pages by dividing the total number of rows by the page length. the ensurerowisvisible() function will scroll to a row just as scrolltorow() does, but does not scroll if the row is already visible. cell coordinates some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at...
XPCOM Interfaces - Archive of obsolete content
nt implements the functionality as described by interfaces. a single component might implement multiple interfaces. and multiple components might implement the same interface. let's take an example of a file component. an interface would need to be created which describes properties and functions that can be performed on files. a file would need properties for its name, modification date and its
size. functions of a file would include moving, copying and deleting it. the file interface only describes the characteristics of a file, it does not implement it. the implementation of the file interface is left to a component. the component will have code which can retrieve the file's name, date and
size. in addition, it will have code which copies and renames it. we don't care how the component i...
... the nsilocalfile interface, we can call the functions of nsilocalfile through it. the table below shows some of the properties and methods of the nsilocalfile interface. initwithpath this method is used to initialize the path and filename for the nsilocalfile. the first parameter should be the file path, such as '/usr/local/mozilla'. leafname the filename without the directory part. file
size the
size of the file. isdirectory() returns true if the nsilocalfile represents a directory. remove(recursive) deletes a file. if the recursive parameter is true, a directory and all of its files and subdirectories will also be deleted. copyto(directory,newname) copies a file to another directory, optionally renaming the file. the directory should be a nsilocalfile holding the director...
XUL Reference - Archive of obsolete content
marker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup re
sizer richlistbox richlistitem row rows rule scale script scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tabbrowser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) t...
...grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar re
sizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker da...
XUL controls - Archive of obsolete content
adio label="light" value="light"/> <radio label="heavy" value="heavy"/> <radio label="heay" value="hea"/> </radiogroup> more information about the radio element. radio reference related elements: radiogroup <richlistbox> the richlistbox displays a list of items where one or more may selected. unlike the listbox which is designed to display fixed
size rows, the richlistbox may display any type of content. <richlistbox> <richlistitem> <image src="happy.png"/> </richlistitem> <richlistitem> <image src="sad.png"/> </richlistitem> <richlistitem> <image src="angry.png"/> </richlistitem> </richlistbox> richlistbox reference related elements: richlistitem <scale> a scale displ...
...s"/> <menuitem label="open all"/> </menupopup> </toolbarbutton> more information about this type of menu toolbarbutton element. toolbarbutton reference related elements: menupopup menuitem toolbar <tree> a tree displays a hierarchy of items in multiple columns. <tree> <treecols> <treecol label="name" flex="1"/> <treecol label="
size" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="popcorn"/> <treecell label="large"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="root beer"/> <treecell label="small"/> </treerow> </treeitem> </treechildren> </tree> more information about the tree element. tr...
grid - Archive of obsolete content
nformation on css grids, you should go to our css grid layout page instead. « xul reference home [ examples | attributes | properties | methods | related ] a grid is a layout type that arranges elements in rows and columns. the grid is expected to contain both a columns element as a child which defines the structure of the columns and a rows element as child to define the rows. the
size and attributes defined on columns and rows will affect the
size and placement of elements in each cell. elements placed within both the columns and rows will be displayed, although usually only elements will be placed inside one of these. it is most common to place elements within the rows and use the columns only to define their flexibility and width. whichever of the columns and rows is last in...
...ounts"/> <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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
menupopup - Archive of obsolete content
pressing the menu key on the keyboard. more information is available in the xul tutorial and popup guide. attributes ignorekeys, left, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, position, top properties accessibletype, anchornode, popupboxobject, position, state, triggernode methods hidepopup, moveto, openpopup, openpopupatscreen, setconsumerollupevent, showpopup,
sizeto examples the following example shows how a menupopup may be attached to a menulist. <menulist> <menupopup> <menuitem label="mozilla" value="http://mozilla.org"/> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net"/> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> the following ...
..., 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 arguments offset by the desired values. the popuptype should be one of the strings popup, context, or tooltip. each type of popup is intended to be displayed only temporarily; they are not expected to be displayed permanently.
sizeto( width, height ) return type: no return value changes the current
size of the popup to the new width and height. related elements menu, menubar, menuitem, menulist, menuseparator interfaces nsiaccessibleprovider, nsidomxulpopupelement ...
separator - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] creates a small separating gap between elements. this type of separator should be used to separate parts of a dialog. it doesn't draw a bar visually, but is just a small space. it is functionally equivalent to a spacer except it defaults to a small
size (usually 1.5 ems). attributes orient style classes groove, groove-thin, thin examples <separator 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 horizontall...
...e 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. ...
spacer - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an element that takes up space but does not display anything. it is usually 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. ...
...all gap, consider using a separator instead. more information is available in the xul tutorial. ...
toolbar - Archive of obsolete content
reated and placed on the toolbar. this means that the palette now only contains items not already in the toolbar. this introduces a potential compatibility problem for extensions that depend on being able to identify all possible toolbar items by looking in the toolbarpalette. ...
...bar's grippy when the toolbar is collapsed. this would be used to label the grippy so that the user knows which toolbar it represents. height type: string (representing an integer) the preferred height of the element in pixels. the actual displayed height may be different if the element or its contents have a minimum or maximum height. the css height property may also be used. icon
size type: string indicates whether the toolbar should display large icons or small icons; this should be the string "large" or "small", respectively. these can vary from one toolbar to another within a given toolbox, whose icon
size attribute defines the default for all toolbars that don't specify an icon
size. mode not in seamonkey 1.x type: one of the values below how the toolbarbuttons o...
Gecko Compatibility Handbook - Archive of obsolete content
one of the primary vehicles web developers have for learning about the standards. due to the common nature of this error, netscape 6.2 began treating css id attributes as case-insensitive in quirks mode only. if you are invoking standards mode, you should still code your css to be consistent with respect to case. ...
...b developers have for learning about the standards. due to the common nature of this error, netscape 6.2 began treating css id attributes as case-insensitive in quirks mode only. if you are invoking standards mode, you should still code your css to be consistent with respect to case. css class names should be case-sensitive <style type="text/css"> .class1 { font-
size: 1em; } .class1 { font-
size: 2em; } </style> <div> <div class="class1"> should be font-
size: 1em; </div> <div class="class1"> should be font-
size: 2em; </div> -(example removed)- gecko implements the case sensitivity of class names correctly and will display this example correctly while internet explorer treats all css classnames's as case-insensitive and will not display this example correctly. due to the common nat...
2006-09-29 - Archive of obsolete content
termined that the generated elements from wordpress do not follow the wc3 guidelines in appendix c of xhtml 1.0. although the w3 validation accepted the generated xhtml as valid, a bug identified within the html working group ignored the invalid elements. details can be located at layout confusion refactoring the nshtmlreflowstate(computeblockboxdata, initconstraints) and nsimageframe::getdesired
size which uses ns_inrinsic
size, into the following method: /** * compute the
size that a frame will occupy. called while * constructing the nshtmlreflowstate to be used to reflow the frame, * in order to fill its mcomputedwidth and mcomputedheight member * variables. * * the |height| member of the return value may be * ns_unconstrained
size, but the |width| member must not be. ...
...of the left and right margins of the * frame, including actual values resulting from * percentages. * @param ashrinkwrap whether the frame is in a context where * non-replaced blocks should shrink-wrap (e.g., * it's floating, absolutely positioned, or * inline-block). */ virtual ns
size compute
size(nscoord aavailwidth, nscoord amargin, nscoord aborder, nscoord apadding, prbool ashrinkwrap) = 0; details can be located at refactoring some of nshtmlreflowstate. discussion on how to determine whether there is pending layout changes or reflows when using a popup. it was concluded that a frame model change is utilized within...
NPP_SetWindow - Archive of obsolete content
syntax #include <npapi.h> nperror npp_setwindow(npp instance, npwindow *window); parameters the function has the following parameters: instance pointer to the current plug-in instance. must be embedded or full-screen. window pointer to the window into which the instance draws. the window structure contains a window handle and values for top left corner, width, height, and clipping rectangle (see note on unix below). returns if successful, the function returns nperr_no_error. ...
...height, and clipping rectangle (see note on unix below). returns if successful, the function returns nperr_no_error. if unsuccessful, the plug-in is not loaded and the function returns an error code. for possible values, see error codes. description the browser calls npp_setwindow after creating the instance to allow drawing to begin. subsequent calls to npp_setwindow indicate changes in
size or position; these calls pass the same npwindow object each time, but with different values. if the window handle is set to null, the window is destroyed. in this case, the plug-in must not perform any additional graphics operations on the window and should free any associated resources. the data structure passed in npp_setwindow is an npwindow object, which contains the coordinates of the insta...
NPWindow - Archive of obsolete content
ko plugin api reference « plug-in side plug-in api summary contains information about the target into which the plug-in instance can draw. ...
...d holds a platform-specific handle to a drawable or an off-screen pixmap, as follows: windows: hdc mac os: pointer to np_port structure unix/x11: not used. (the drawable is provided in a graphicsexpose event, when the paint is requested.) description the npwindow structure represents the native window or a drawable, and contains information about coordinate position,
size, whether the plug-in is windowed or windowless, and some platform-specific information. the plug-in area is a native window element on windows and unix, or a rectangle within a native window on mac os. the x, y, height, and width coordinates of npwindow specify the position and
size of this area. the browser calls npp_setvalue whenever the drawable changes. a windowed plug-in is drawn into a na...
SSL and TLS - Archive of obsolete content
(such as 3072 or 4096 bits) if possible. as pkis using rsa keys and certificates transition to other cryptographic systems like ecc, servers should continue to support rsa. supported cipher suites for rsa cipher suites with the rsa key exchange that are commonly supported include the following: aes and sha message authentication. advanced encryption standard (aes) ciphers have a fixed block
size of 128-bits, and the keys can be either 128-bit or 256-bit. there are 3.4 x 1038 possible 128-bit keys and 1.1 x 1077 possible 256-bit keys. there are more possible keys than any other cipher, making aes the strongest cipher supported by ssl. these cipher suites are fips-compliant. triple des and sha message authentication. triple des (data encryption standard) is the second-strongest cipher sup...
...bit keys. there are more possible keys than any other cipher, making aes the strongest cipher supported by ssl. these cipher suites are fips-compliant. triple des and sha message authentication. triple des (data encryption standard) is the second-strongest cipher supported by ssl, but it is not as fast as rc4. triple des uses a key three times as long as the key for standard des. because the key
size is so large, there are approximately 3.7 * 1050 possible keys. this cipher suite is fips-compliant. rc4 and rc2 and md5 message authentication. the rc4 and rc2 ciphers have 128-bit encryption, which permits approximately 3.4 * 1038 possible keys. rc4 ciphers are faster than rc2 ciphers. rc4 can use sha message authentication as well as md5 message authentication. des and sha message authenticat...
Making sure your theme works with RTL locales - Archive of obsolete content
e is fairly easy! gecko 1.9.2 and later gecko 1.9.2 introduced the :-moz-locale-dir css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right. :-moz-locale-dir(rtl) matches if the user interface is being rendered right to left. example toolbar[icon
size="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[icon
size="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 480px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode. gecko 1.9.1 (firefox 3.5)...
...de. gecko 1.9.1 (firefox 3.5) and earlier the chromedir attribute firefox, thunderbird and seamonkey expose an attribute named chromedir on certain elements. all you have to do is add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have. that's how the default theme works, so you can use it as an example. toolbar[icon
size="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 398px 34px 360px); } toolbar[icon
size="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0px 516px 34px 478px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl. note that not all elements will have the chromedir attribute, so you may need...
-moz-stack-sizing - Archive of obsolete content
for example, moving a child of the stack far to the right will widen the stack so the child remains visible. /* keyword values */ -moz-stack-sizing: auto; -moz-stack-sizing: ignore; /* global values */ -moz-stack-sizing: inherit; -moz-stack-sizing: initial; -moz-stack-sizing: unset; if you wish to prevent the stack from resizing automatically to accommodate its children, you can set -moz-stack-sizing to ignore on the child element. the property is set not on the stack itself, but on the stack's children. ...
...-sizing to ignore on the child element. the property is set not on the stack itself, but on the stack's children. this lets you ignore certain children, but not others. note: in previous versions of gecko it was possible to work around the problem by setting very large negative bottom and right margins on the stack element and equally large positive bottom and right margins on the children whose
size you didn't want to ignore. (the problem does not affect children moved above or to the left of the stack.) initial valuestretch-to-fitapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete syntax values stretch-to-fit the child will influence the stack's
size. ignore the stack won't consider this child when calculating its
size. formal syntax ignore | stret...
::-ms-browse - Archive of obsolete content
resents the button that opens the file picker of <input type="file">. permitted properties only the following css properties can be used in a rule with ::-ms-browse in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; backgro...
::-ms-check - Archive of obsolete content
udo-element is supported only in internet explorer and microsoft edge. allowable properties only the following css properties can be used in a rule with ::-ms-check in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox...
::-ms-clear - Archive of obsolete content
put type="tel"> <input type="time"> <input type="url"> <input type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-clear example html <form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placehol...
::-ms-expand - Archive of obsolete content
r closes the drop-down menu. typically it is a triangle that points downward. allowable properties only the following css properties can be used in a rule with ::-ms-expand in its selector. other properties are ignored. ...
... ...
::-ms-fill-lower - Archive of obsolete content
responding to values less than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-lower in its selector. other properties are ignored. ...
... browser compatibility ...
::-ms-fill-upper - Archive of obsolete content
ponding to values greater than the value currently selected by the thumb. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-fill-upper in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-fill-upper specifications not part of any specifica...
::-ms-reveal - Archive of obsolete content
reveal button is usually displayed at the edge of the password field. the ::-ms-reveal pseudo-element is specific to internet explorer 10 and later. allowable properties only the following css properties can be used in a rule with ::-ms-reveal in its selector. other properties are ignored. ...
... ...
::-ms-thumb - Archive of obsolete content
user moves within the track of a slider control to alter its numerical value. a slider control is one possible representation of <input type="range">. allowable properties only the following css properties can be used in a rule with ::-ms-thumb in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-after in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
reate three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-ticks-before in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-ticks-before ...
::-ms-track - Archive of obsolete content
would create three sets of tick marks, but the best user experience is one set. to remove tick marks altogether, set the color property to transparent. allowable properties only the following css properties can be used in a rule with ::-ms-track in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-...
::-ms-value - Archive of obsolete content
css pseudo-element is a microsoft extension that applies rules to the value of a text or password <input> control or the content of a <select> control. allowable properties only the following css properties can be used in a rule with ::-ms-value in its selector. other properties are ignored. ...
...radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-
size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; f...
@set - Archive of obsolete content
ted in internet explorer 10 standards mode and in all earlier versions. the @set statement creates variables used with conditional compilation statements. syntax @set @varname = term parameters varname valid javascript variable name. must be preceded by an "@" character at all times. term zero or more unary operators followed by a constant, conditional compilation variable, or parenthe
sized expression. remarks numeric and boolean variables are supported for conditional compilation. strings are not. variables created using @set are generally used in conditional compilation statements, but can be used anywhere in javascript code. examples of variable declarations look like this: @set @myvar1 = 12 @set @myvar2 = (@myvar1 * 20) @set @myvar3 = @_jscript_version the following op...
...and boolean variables are supported for conditional compilation. strings are not. variables created using @set are generally used in conditional compilation statements, but can be used anywhere in javascript code. examples of variable declarations look like this: @set @myvar1 = 12 @set @myvar2 = (@myvar1 * 20) @set @myvar3 = @_jscript_version the following operators are supported in parenthe
sized expressions: ! ~ * / % + - << >> >>> < <= > >= == != === !== & ^ | && | | if a variable is used before it has been defined, its value is nan. nan can be checked for using the @if statement: @if (@newvar != @newvar) ... this works because nan is the only value not equal to itself. requirements supported in all versions of internet explor...
The Business Benefits of Web Standards - Archive of obsolete content
ht. improved user experience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunction with css. according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform table-based layouts into css-based layouts. typically this reduces page
size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessing multiple pages of a site over many visits the savings in bandwidth a...
...sites which are built using web standards methodologies, processes and practises perform far better for every single metric. they load faster, they are easy to find in search engines, and they package and deliver the content effectively. all these great experiences can be enjoyed by the user regardless of platform, software, operating system, or any one of a dozen other variables including screen
size, text resolution, javascript activation, or any disabilty the user may have. conclusion using web standards and separating structure from presentation brings a host of benefits for today and tomorrow. today, it means more audience, lower cost to produce new content, and becoming compliant with accessibility requirements. for tomorrow, it means reducing vendor lock-in, reducing cost of mainten...
Building up a basic demo with Babylon.js - Game development
py of the latest babylon.js engine inside your directory. opening the babylon.js documentation in a separate tab — it is useful to refer to. ...
...nd more complicated shapes available. let's start by defining the geometry for a box shape — add the following new code below your previous additions: var box = babylon.mesh.createbox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. in this case we're creating a box using the mesh.createbox method with it's own name, a
size of 2, and a declaration of which scene we want it added to. note: the
size or position values (e.g. for the box
size) are unitless, and can basically be anything you deem suitable for your scene — milimeters, meters, feet, or miles — it's up to you. if you save and refresh now, your object will look like a square, because it's facing the camera. the good thing about objects is that we can...
Tiles and tilemaps overview - Game development
tile atlas of 8 x 4 tiles: using an atlas also has the advantage of naturally assigning every tile an index. this index is perfect to use as the tile identifier when creating the tilemap object. the tilemap data structure it is common to group all the information needed to handle tilemaps into the same data structure or object. these data objects (map object example) should include: tile
size: the
size of each tile in pixels across / pixels down. image atlas: the image atlas that will be used (one or many.) map dimensions: the dimensions of the map, either in tiles across / tiles down, or pixels across / pixels down. visual grid: includes indices showing what type of tile should be placed on each position in the grid. logic grid: this can be a collision grid, a path-finding grid, ...
...be fully shown. this case is very common in arcade games like pacman, arkanoid, or sokoban. rendering static tilemaps is easy, and can be done with a nested loop iterating over columns and rows. a high-level algorithm could be: for (var column = 0; column < map.columns; column++) { for (var row = 0; row < map.rows; row++) { var tile = map.gettile(column, row); var x = column * map.tile
size; var y = row * map.tile
size; drawtile(tile, x, y); } } you can read more about this and see an example implementation in square tilemaps implementation: static maps. scrolling tilemaps scrolling tilemaps only show a small portion of the world at a time. they can follow a character — like in platformers or rpgs — or allow the player to control the camera — like in strategy or s...
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
epeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> in terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap. ...
...ne at that location has gained extra
size, so any grid item placed after that line begins at the end of the gap. the grid-gap properties are not the only thing that can cause tracks to space out. margins, padding or the use of the space distribution properties in box alignment can all contribute to the visible gap – therefore the grid-gap properties should not be seen as equal to “the gutter
size” unless you know that your design has not introduced any additional space with one of these methods. learn more property reference grid-column-gap grid-row-gap grid-gap further reading css grid layout guide: basic concepts of grid layout definition of gutters in the css grid layout specification ...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
s. ...
...e (or meaning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a large font
size to make it look like a heading (although you could style it to look like anything you wanted). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-
size: 32px; margin: 21px 0;">is this a top level heading?</span> this will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. it is therefore a good idea to use the right html element for the right job. html should be coded to represent the data that will be populated and not based on its default presentation styling. p...
Pseudo-classes and pseudo-elements - Learn web development
yntax for backwards compatibility. for example, if you wanted to select the first line of a paragraph you could wrap it in a <span> element and use an element selector; however, that would fail if the number of words you had wrapped were longer or shorter than the parent element's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-
size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will do this for you reliably — if the number of words increases and decreases it will still only select the first line. it acts as if a <span> was magically wrapped around that first formatted line, and updated each time the line length changed. you can see that this selects the first...
...pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. try editing the previous live example so it uses the following css. we are saying that we want to select the first line, of the first <p> element, which is inside an <article> element. article p:first-child::first-line { font-
size: 120%; font-weight: bold; } generating content with ::before and ::after there are a couple of special pseudo-elements, which are used along with the content property to insert content into your document using css. you could use these to insert a string of text, such as in the live example below. try changing the text value of the content property and see it change in the output. you could a...
Test your skills: Selectors - Learn web development
d use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-
size of 200%. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. gi...
...hed example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors three in this example, try making the following changes without adding to the html. style links, making the link-state orange, visited links green, and remove the underline on hover. make the first element inside the container font-
size: 150% and the first line of that element red. stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors fou...
Test your skills: sizing - Learn web development
zing items in css. note: you can try out solutions in the interactive editors below, however, it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you have two boxes. the first should be
sized so that the height will be at least 100 pixels tall, even if there is less content than would cause it to grow to that height, however, the content should not overflow if there is more content than fits in 100 pixels. test this box by removing the content from the html to make sure you still get a 100 pixel tall box even with no content. the second box should be fixed at 100 pixels tall, so tha...
...t for this task to work in your own editor or in an online editor. task two this task has a box, which contains another box. your task is to make the inner box 60% of the width of the outer box. the value of the box-sizing property is set to border-box, which means that the total width includes any padding and border. you should also give the inner box padding of 10% using the width (or inline
size) as the
size from which that percentage is calculated. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task three this task has two images in boxes. one image is smaller than the box, the other is larger and breaking ou...
Styling tables - Learn web development
{ width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default. normally, table columns tend to be
sized according to how much content they contain, which produces some strange results. with table-layout: fixed, you can
size your columns according to the width of their headings, and then deal with their content as appropriate. this is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("select the nth child that is a <th> element in a sequence, insid...
...g to the width of their headings, and then deal with their content as appropriate. this is why we've selected the four different headings with the thead th:nth-child(n) (:nth-child) selector ("select the nth child that is a <th> element in a sequence, inside a <thead> element") and given them set percentage widths. the entire column width follows the width of its heading, making for a nice way to
size your table columns. chris coyier discusses this technique in more detail in fixed table layouts. we've coupled this with a width of 100%, meaning that the table will fill any container it is put in, and be nicely responsive (although it would still need some more work to get it looking good on narrow screen widths). a border-collapse value of collapse is a standard best practice for any tab...
Test your skills: Flexbox - Learn web development
they should be laid out as a row, with an equal amount of space between each item. the finished example should look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. ...
...of space between each item. the finished example should look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. flex layout two these list items are all different
sizes, but we want them to be displayed as three equal
sized columns, no matter what content is in each item. try updating the live code below to recreate the finished example: additional questions: can you now make the first item twice the
size of the other items? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. flex layout three there are two elements in ...
CSS layout - Learn web development
of one another, or always remaining in the same place inside the browser viewport. this article explains the different position values, and how to use them. multiple-column layout the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. this article explains how to use this feature. responsive design as more diverse screen
sizes have appeared on web-enabled devices, the concept of responsive web design (rwd) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. it is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it. beginne...
...elp you understand the main techniques you need to know to master it. beginner's guide to media queries the css media query gives you a way to apply css only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". media queries are a key part of responsive web design, as they allow you to create different layouts depending on the
size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. in this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. legacy layout methods grid syste...
Getting started with CSS - Learn web development
ex.html in a folder on your machine. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph. it contains an <em>empha
sized</em> element.</p> <ul> <li>item one</li> <li>item two</li> <li>item <em>three</em></li> </ul> </body> </html> note: if you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided below to allow you to write example code right here in the page. adding css to our document the ve...
... you should find that the <em> in the third list item is now purple, but the one inside the paragraph is unchanged. something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the html. to do so place a + (an adjacent sibling combinator) between the selectors. try adding this rule to your stylesheet as well: h1 + p { font-
size: 200%; } the live example below includes the two rules above. try adding a rule to make a span red, if it is inside a paragraph. you will know if you have it right as the span in the first paragraph will be red, but the one in the first list item will not change color. note: as you can see, css gives us several ways to target elements, and we've only scratched the surface so far! we will be ...
What do common web layouts contain? - Learn web development
legal notices or contact info. these elements are quite common in all form factors, but they can be laid out different ways. here are some examples (1 represents header, 2 footer; a main content; b1, b2 things on the side): 1-column layout. especially important for mobile browsers so you don't clutter the small screen up. 2-column layout. often used to target tablets, since they have medium-
size screens. 3-column layouts. only suitable for desktops with big screens. (even many desktop-users prefer viewing things in small windows rather than full-screen.) the real fun begins when you start mixing them all together: … these are just examples and you're quite free to lay things out as you want. you may notice that, while the content can move around on the screen, we always ...
... that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. also, the main content (a) matters most, so give it most of the space. these are rules of thumb you can draw on. there are complex designs and exceptions, of course. in other articles we'll discuss how to design responsive sites (sites that change depending on the screen
size) and sites whose layouts vary between pages. for now, it's best to keep your layout consistent throughout your site. active learning there is no active learning available yet. deeper dive let's study some more concrete examples taken from well-known websites. one-column layout invision application. a typical one-column layout providing all the information linearly on one page. qu...
How to build custom form controls - Learn web development
n start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assuming 1em == 16px which is the default value in most browsers. ...
... is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assuming 1em == 16px which is the default value in most browsers. ...
Example - Learn web development
> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same
size and are properly align */ display: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same
size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmo...
...zing: 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 re
size any textarea vertically it works only on chrome, firefox and safari */ re
size: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same
size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...
Add a hitmap on top of an image - Learn web development
nly browsers, translation services). how to insert an image map, properly step 1: the image not just any image is acceptable. the image must make it clear what happens when people follow image links. alt text is mandatory, of course, but many people never see it. the image must clearly indicate where hotspots begin and end. hotspots must be large enough to tap comfortably, at any viewport
size. how large is large enough? 72 × 72 css pixels is a good minimum, with additional generous gaps between touch targets. the map of the world at 50languages.com (as of time of writing) illustrates the problem perfectly. it’s much easier to tap russia or north america than albania or estonia. you insert your image much the same way as always (with an <img> element and alt text). if the image is...
..." href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is wider than about 240px, you’ll need to make further adjustments to make your website responsive. it's not enough to re
size the image for small screens, because the coordinates stay the same and no longer match the image. if you must use image maps, you may want to look into matt stow's jquery plugin. alternatively, dudley storey demonstrates a way to use svg for an image map effect, along with a subsequent combined svg-raster hack for bitmap images. learn more <img> <map> <area> online image map editor advic...
Mozilla splash page - Learn web development
e appropriate youtube tools to generate the code. the video should be 400px wide. adding responsive images to the further info links inside the <div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-related page. ...
...t an <img> element inside each one containing appropriate src, alt, srcset and
sizes attributes. in each case (except one — which one is inherently responsive?) we want the browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise. make sure you match the correct images with the correct links! note: to properly test the srcset/
sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using browser developer tools such as the firefox network monitor. an art directed red panda inside the <div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if the ...
From object to iframe — other embedding technologies - Learn web development
nd flash — these allowed web developers to embed rich content into webpages such as videos and animations, which just weren't available through html alone. embedding these technologies was achieved through elements like <object>, and the lesser-used <embed>, and they were very useful at the time. they have since fallen out of fashion due to many problems, including accessibility, security, file
size, and more; these days most mobile devices don't support such plugins anymore, and desktop support is on the way out. finally, the <iframe> element appeared (along with other ways of embedding content, such as <canvas>, <video>, etc.) this provides a way to embed an entire web document inside another one, as if it were an <img> or other such element, and is used regularly today. with the history...
... code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="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.
Looping code - Learn web development
let output = document.queryselector('.output'); 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.
...t refused = document.queryselector('.refused'); admitted.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.va...
Making decisions in your code — conditionals - Learn web development
d="reset" type="button" value="reset"> <input id="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.va...
...e = function() { const choice = select.value; // 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.va...
Third-party APIs - Learn web development
a custom marker adding a marker (icon) at a certain point on the map is easy — you just use the l.marker() method (which seems to be documented in the related leaflet.js docs). add the following code to your example, again inside window.onload: l.marker([53.480759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true,
size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that defines the icon to display at that point. the icon is defined using an mapquest.icons.marker() method, which as you can see contains inf...
...) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that defines the icon to display at that point. the icon is defined using an mapquest.icons.marker() method, which as you can see contains information such as color and
size of marker. onto the end of the first method call we chain .bindpopup('this is manchester!'), which defines content to display when the marker is clicked. finally, we chain .addto(map) to the end of the chain to actually add the marker to the map. have a play with the other options shown in the documentation and see what you can come up with! mapquest provides some pretty advanced functionality...
Video and Audio APIs - Learn web development
this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use...
... the play button has a "play" icon displayed on it. icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow. ...
Basic math in JavaScript — numbers and operators - Learn web development
he right hand side of each expression, for example: let x = 3; // x contains the value 3 let y = 4; // y contains the value 4 x *= y; // x now contains the value 12 note: there are lots of other assignment operators available, but these are the basic ones you should learn now. active learning: sizing a canvas box in this exercise, you will manipulate some numbers and operators to change the
size of a box. the box is drawn using a browser api called the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50. open in new window in the editable code box above, there are two lines marked with a comment that we'd like ...
...d the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50. open in new window in the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain
sizes, using certain operators and/or values in each case. let's try the following: change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the box is 75px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator. change the line that calculates...
The "why" of web performance - Learn web development
your website visitors to have a good experience. in a sense, web performance can be considered a subset of web accessibility. with performance as with accessibility, you consider what device a site visitor is using to access the site and the device connection speed. as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file
size of over 22.6mb. imagine loading this on a desktop computer connected to a fibre optic network. this would seem relatively fast, and the file
size would be largely irrelevant. imagine loading that same site using tethered mobile data on a 9 year-old ipad while commuting home on public transportation. the same site will be slow to load, possibly verging on unusable depending on cell coverage. y...
...rsion, revenue, user satisfaction, and search engine ranking. performant sites have been shown to increase visitor retention and user satisfaction. slow content has been shown to lead to site abandonment, with some visitors leaving to never return. reducing the amount of data that passes between the client and the server lowers the costs to all parties. reducing html/css/javascript and media file
sizes reduces both the time to load and a site's power consumption (see performance budgets). tracking performance is important. multiple factors, including network speed and device capabilities affect performance. there is no single performance metric; and differing business objectives may mean different metrics are more relavant to the goals of the site or the organization that it supports. how the...
Introduction to client-side frameworks - Learn web development
complex, interactive websites are often referred to as web applications. the advent of modern javascript frameworks has made it much easier to build highly dynamic, interactive applications. a framework is a library that offers opinions about how software gets built. these opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous
size and still be maintainable; predictability and maintainability are essential for the health and longevity of software. javascript frameworks power much of the impressive software on the modern web – including many of the websites you likely use every day. mdn web docs, which you are currently reading this on, uses the react/reactdom framework to power its front end. what frameworks are out the...
...official names. they are not really true dsls, but they are non-standard html, so we believe they are worth highlighting. citations for this table: react browser support: official docs ember browser support: ember 3.0 release announcement ember templating language (official docs) does the framework have a strong community? this is perhaps the hardest metric to measure, because community
size does not correlate directly to easy-to-access numbers. you can check a project's number of github stars or weekly npm downloads to get an idea of its popularity, but sometimes the best thing to do is search a few forums or talk to other developers. it is not just about the community's
size, but also how welcoming and inclusive it is, and how good available documentation is. opinions on the web ...
Handling common accessibility problems - Learn web development
cture the most important quick win in semantic html is to use a structure of headings and paragraphs for your content; this is because screen reader users tend to use the headings of a document as signposts to find the content they need more quickly. if your content has no headings, all they will get is a huge wall of text with no signposts to find anything. examples of bad and good html: <font
size="7">my heading</font> <br><br> this is the first section of my document. <br><br> i'll add another paragraph here too. <br><br> <font
size="5">my subheading</font> <br><br> this is the first subsection of my document. i'd love people to be able to find this content! <br><br> <font
size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content. i think it is more interestin...
...s than html, but it can still do just as much damage to accessibility if used incorrectly. we have already mentioned a couple of accessibility tips involving css: use the correct semantic elements to mark up different content in html; if you want to create a different visual effect, use css — don't abuse an html element to get the look you want. for example, if you want bigger text, use font-
size, not an <h1> element. make sure your source order makes sense without css; you can always use css to style the page any way you want afterward. you should make sure interactive elements like buttons and links have appropriate focus/hover/active states set, to give the user visual clues as to their function. if you remove the defaults for stylistic reasons, make sure you include some replacement...
Implementing feature detection - Learn web development
like the directory you've been creating your other examples for in this article. when you are using modernizr in production, you can go to the download page you've already visited and click the plus buttons for only the features you need feature detects for. then when you click the build button, you'll download a custom build containing only those feature detects, making for a much smaller file
size. css let's have a look at how modernizr works in terms of selectively applying css. first, make a copy of supports-feature-detect.html and supports-styling.css. save them as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-c...
...rc="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, try loading your page, and you'll get an idea of how modernizr works for css features. if you look at the dom inspector of your browser's developer tools, you'll see that modernizr has updated your <html> class value like so: <html class="js no-htmlimports
sizes flash transferables applicationcache blobconstructor blob-constructor cookies cors ...and loads more values!> it now contains a large number of classes that indicate the support status of different technology features. as an example, if the browser didn't support flexbox at all, <html> would be given a class name of no-flexbox. if it did support modern flexbox, it would get a class name of flex...
Package management basics - Learn web development
lier) with the build option. run the following command: parcel build index.html you should see an output like so: ✨ built in 9.35s. dist/my-project.fb76efcf.js.map 648.58 kb 64ms dist/my-project.fb76efcf.js 195.74 kb 8.43s dist/index.html 288 b 806ms again, the destination for our production files is the dist directory. reducing your app's file
size however, as with all tools that "help" developers there's often a trade off. in this particular case it's the file
size. the javascript bundle my-project.fb76efcf.js is a whopping 195k — very large, given that all it does is print a line of text. sure there's some calculation, but we definitely don’t need 195k worth of javascript to do this!. when you use development tooling it's worth ques...
...he library would be downloaded when our example page is loaded in a browser. however, this is where development tooling has a chance to shine. whilst the tooling is on our machine, we can ask the software to inspect our use of the code and only include the functions that we're actually using in production — a process known as "tree shaking". this makes a lot of sense as we want to reduce file
size and thus make our app load as quickly as possible. different tooling will let you tree shake in different ways. although the list grows by the month, there are three main offerings for tools that generate bundles from our source code: webpack, rollup, and parcel. there will be more available than this, but these are popular ones: the rollup tool offers tree shaking and code splitting as it’...
Accessibility API cross-reference
pane, option_pane, root_pane, scroll_pane, viewport a window in an mdi applicaton internal_frame internal_frame, n/a invisible layer z-indexed to the front, for temporary content. e.g., tooltips may be drawn on the glass pane layer. glass_pane glass_pane n/a multiple adjacent panes that can be
sized relative to each other by dragging a grippy on their border split_pane split_pane n/a an object that can be drawn into and is used to trap events. n/a n/a canvas n/a <canvas> (accessible alternative richtext content may be nested inside, but the canvas itself is presentational) a dialog for picking a color n/a color_...
... attribute) for a button that is "consistent". the button is inconsistent when it will act on a group of objects (such as a list of mail messages) that are not in the same state. n/a n/a sensitive don't speak for this item, it will take care of text-to-speech on its own selfvoicing n/a n/a object can be re
sized n/a resizable resizable this object and all of its ancestors are visible n/a showing showing this text object can only contain 1 line of text n/a single_line single_line tells accessibility aid "don't add event listener - this object doesn't generate any". for example, could be used ...
Accessibility Features in Firefox
ng through many links to get there. caret browsing allows you to move through web content one letter a time. you can even select web content and copy it to the clipboard. -- all with the keyboard detailed advanced javascript control: mozilla gives you the ability to fine tune what javascript is allowed to do while you browse. for example, you can disable functions that websites use to move or re
size windows, or to remove your status bar, to disable right-click contextual menus, change the status bar text, etc. you can furthermore control javascript capabilities to remove scrollbars, toolbars or system buttons like minimize, close and maximize by editing the about:config related properties or by editing accordingly the user.js file as explained in this "disable other javascript window feature...
...ig related properties or by editing accordingly the user.js file as explained in this "disable other javascript window features" document. moving back and forward by web page (alt+left and alt+right) occurs near-instantaneously the download manager provides keyboard access to all of your recent downloads operating system "look and feel" support: mozilla's default skin will match the colors and
sizes currently being used in your desktop. mozilla can follow the system appearance whether it's high or low contrast, with large or small fonts. text files used in configuration (techies only): configuration files are easily edited with any text editor. for example, prefs.js gives access to a large number of configuration options not available in the preferences window. also, usercontent.css allows...
Lightweight themes
header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000px wide × 200px high png or jpg file format image must be no larger than 300 kb in file
size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information - as a user increases the width of the browser window, the bro...
...eep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme. select a license for your theme — decide on a copyright license for your work. read more about the types of creative common licenses. important: please be sure you have the rights to use the image in your theme! upload your image — make sure it is under 300 kb in
size and jpg or png format! select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image. submit your theme — if everything looks right, click the submit theme button and you're done! you can see all the themes you've authored on your profile page. tip: to ensure that your theme is approved for the gallery, be sure...
Choosing the right memory allocator
cators you should only use the nspr allocators within nspr or the security code located in the /security/ subtree of the source code. avoid using them elsewhere. ...
... (spidermonkey). this is the /js/ subtree of the source code. also, all consumers of the jsapi must use these routines for allocating memory they plan to pass to the javascript runtime. see jsapi reference for further information. js_malloc() js_realloc() js_free() js_strdup() arena allocators nspr exposes arena allocators that can be used to efficiently allocate lots of small, uniformly
sized objects. presshell arena nsipresshell::allocateframe() and nsprescontext::allocatefromshell() can be used to allocate memory from an arena maintained by the presshell. these should only be used to allocate objects that are guaranteed to have a shorter lifetime than the presshell in question (typically layout data structures), because the presshell destructor will wipe out the arena, leaving an...
Debugging Frame Reflow
a=8940,uc c=uc,uc cnt=885 text 02d7c130 d=0,0 block 02d7b210 d=8940,390 area 02d7afe4 d=9180,630 canvas 00b97c6c d=9180,4470 scroll 00b97ee0 d=9180,4470 scroll 00b97ee0 d=9180,4470 vp 00b97c30 d=9180,4470 the first line shows the reflow of the viewport (vp). this viewport has the address 00b97c30. it is the initial reflow: r=0. other reflow reasons are: incremental reflow re
size reflow style change reflow dirty reflow the available width is 9180 twips. the available height is 4470 twips (a=9180,4470). the computed width is 9180 twips. the computed height is 4470 twips (c=9180,4470). the line count is 856 (cnt=856). below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer ta...
...eight is 4470 twips (c=9180,4470). the line count is 856 (cnt=856). below this is a line that reads: tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 here the uc shows that on initial reflow the available height for the outer table frame is unconstrained. the table cell requires its children to compute the mes. it is reported back from the block as: block 02d7bcf8 d=300,300 me=300 the block max. element
size is 300 twips. the second table reflow is started at rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 where the previous information is used. the block has been required to compute the max. element
size only once and it reports now: block 02d7bcf8 d=1410,300 the block shows the same address as the previous one. frames with children that overflow the parent have the ns_frame_outside_children flag set.
The Firefox codebase: CSS Guidelines
ious 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 than classname. there's less chance of overwriting an existing class. only use generic selectors such as :last-child, when it is what you mean semantically. if not, using a semantic class name is more descriptive and usually better. b...
...moz-field: textbox or field background colors, also used as the background color of listboxes or trees. -moz-fieldtext: textbox or field text colors, also used as the text color of listboxes or trees. -moz-dialog: window or dialog background color. -moz-dialogtext: window or dialog text color. graytext: used on disabled items as text color. do not use it on text that is not disabled to desemph
size text, because it does not guarantee a sufficient contrast ratio for non-disabled text. threedshadow: used as border on elements. threedlightshadow: used as light border on elements. using the background/text pairs is especially important to ensure the contrast is respected in all situations. never mix custom text colors with a system background color and vice-versa. note that using system co...
Eclipse CDT Manual Setup
do when it "indexes" the source.) static analysis involves parsing the source files, so naturally it can only produce good results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file. since eclipse doesn't initially have any of this information, the code assistance that it's able to provide out of the box is pretty broken. for projects the
size and complexity of mozilla, it's impractical to manually configure eclipse when there is a valid set of defines and includes paths for each of the different parts of the source code. happily, eclipse makes manual configuration unnecessary. like some other ides, that are used with projects like mozilla that have their own build system. eclipse provides a tool that can collect the options that are p...
...n with a symbol name like there is in other ides.) select "c/c++ > editor > save actions" and deselect "ensure newline at the end of file". select "c/c++ > editor > scalability" and set "enable scalability mode when the number of lines in the file is more than:" to something larger, like 100000. select "run/debug > console" and deselect "limit console output". if you want to increase the text
size in the editor, select "general > appearance > colors and fonts", select "basic > text font", and edit the font
size. creating an eclipse project to create an eclipse project for your mozilla source tree, select "file > new > makefile project with existing code". in the "import existing code" window that opens, enter a meaningful project name that identifies your mozilla source tree, set the cod...
Error codes returned by Mozilla APIs
(0x80520004) an call was made to nsifile.create() with an invalid type. only normal_file_type and directory_type are allowed. ns_error_file_destination_not_dir (0x80520005) an attempt was made to copy or move a file to a destination that is not a directory. ns_error_file_target_does_not_exist (0x80520006) an attempt was made to reference a file that does not exist for copy/move, checking its
size, etc. ns_error_file_copy_or_move_failed (0x80520007) a call to nsifile.copyto() or nsifile.moveto() failed. ns_error_file_already_exists (0x80520008) an attempt was made to create a file that already exists. ns_error_file_invalid_path (0x80520009) this error occurs when an attempt is made to use a path that isn't valid for the platform. ns_error_file_disk_full (0x8052000a) this error will...
... badly encoded property file. try using utf-8 encoding instead. see nsistringbundle. ns_base_stream_would_block (0x80470007) this error occurs when an attempt is made to read from a non blocking stream yet there is not enough data available to read without waiting for more. document and node errors the following errors can occur when using documents, nodes and elements. ns_error_dom_index_
size_err (0x80530001) an attempt was made to adjust the value of a text node using an index that was out of range. ns_error_dom_domstring_
size_err (0x80530002) an attempt was made to create a string larger than is supported. ns_error_dom_hierarchy_request_err (0x80530003) a node was inserted into a location where it cannot go. for instance, a node cannot be inserted into a descendant of itself. ...
MozScrolledAreaChanged
this event, introduced in gecko 1.9.2, is fired whenever either or both of these values change. ...
...this event, introduced in gecko 1.9.2, is fired whenever either or both of these values change. ...
HTTP Cache
ding the content since output stream for the cache entry is again open and kept by the current writer. lifetime of an existing entry with only a partial content such a cache entry is first examined in the nsicacheentryopencallback.oncacheentrycheck callback, where it has to be checked for completeness. in this case, the content-length (or different indicator) header doesn't equal to the data
size reported by the cache entry. the consumer then indicates the cache entry needs to be revalidated by returning entry_needs_revalidation from oncacheentrycheck. this consumer, from the point of view the cache, takes a role of the writer. other parallel consumers, if any, are blocked until the writer calls setvalid on the cache entry. the consumer is then responsible to validate the partial cont...
...ently used metadata (a.k.a. disk cache memory pool) this is a description of this feature status that is currently only a patch in bug 986179. current behavior is simpler and causes a serious memory consumption regression (bug 975367). for the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. the default
size of this meta data memory pool is only 250kb and is controlled by a new browser.cache.disk.metadata_memory_limit preference. when the limit is exceeded, we purge (throw away) first expired and then least used entries to free up memory again. only cacheentry objects that are already loaded and filled with data and having the 'consumer reference == 0' (bug 942835) can be purged. the 'least used' ...
JNI.jsm
rguments. return value this function has no return value, if you try to store the return value in a variable, it will be undefined. working with arrays creating/preallocating a typed array methods cdata .get(number aindex); cdata .getelements(number astart, number alength); void .set(number aindex, cdata avalue); void .setelements(number astart, [array,
size_is(arr.length > number anynumber > 0)] in cdata avalsarray); .get() gets the value of the element in the array at given aindex. cdata get(number aindex); parameters aindex the position in the array to obtain. return value returns primitive cdata. .getelements() returns a new cdata object of the section of the array specified by astart and ending at position astart + alength. ...
...n has no return value, if you try to store the return value in a variable, it will be undefined. .setelements() sets a section of a typed array to specified values. this function starts on the position of astart in the array and sets it to the values in avalsarray. this is done by calling .set for each element with the respective value in the avalsarray. void setelements(number astart, [array,
size_is(arr.length > number anynumber > 0)] in cdata avalsarray); parameters astart the position to start setting elements of the array in. avalsarray a javascript array holding the values to set. return value this function has no return value, if you try to store the return value in a variable, it will be undefined. attributes attribute type description length ...
OS.File.Info
due to differences between operating systems, the information available depends on the platform. instances of os.file.info may be obtained by: calling global method os.file.stat() either from the main thread or from a worker thread; calling instance method stat() of os.file either from the main thread or from a worker thread. ...
...ds or processes. value an instance of os.file.info. instances of os.file.info cross-platform attributes isdir true if the file is a directory, false otherwise. issymlink true if the false is a symbolic link, false otherwise. (as of firefox 38 this is always true on all systems, this is a bug: bugzilla 1145885) (on windows this returns false for hard links)
size the number of bytes in the file. creationdate deprecated in bugzilla :: bug 807875. before deprecation, this used to be the date at which the file was created on windows and mac os x, as a javascript date object. on unix systems it was returning the last modified date and thus it was deprecated. there is talk of reinstating this with proper functionality in bugzilla :: bug 1167143.
Creating localizable web applications
et the localizers localize the format specification string. snippet 1. bad: $persona['date'] = date("n/j/y", strtotime($persona['approve'])); snippet 2. good: $persona['date'] = date(_("n/j/y"), strtotime($persona['approve'])); localize the number format you can make the number format localizable using the information returned by localeconv() in php. snippet 1. ...
... snippet 1. ...
MathML Demo: <mo> - operator, fence, separator, or accent
al, the lspace and rspace around arrows should be similar to the spacing around relations. there is an issue with the markup of "long" latex arrows in mathml. there are entities from these arrows, ⟵ ⟵ ⟶ etc. but they have no standard unicodes. they can be viewed as stretched versions of short arrows. \longleftarrow can be scripted as <mo>⟵</mo> or as <mo stretchy="true" min
size="1.8">←</mo>. a ↑ b ← c a ⇑ b ⇐ c a ↓ b → c a ⇓ b ⇒ c a ↕ b ↔ c a ⇕ b ⇔ c a ↗ b ↦ c a ↘ b ↩ c a ↙ b ↼ c a ↖ b ↽ c a ↻ b ⟵ c a ↺ b ⟸ c a ⇈ b ⟶ c a ...
...rator dictionary). hence <mo symmetric="true"> must be scripted if the intent is to emulated latex fence behavior. the commands \big, \big, \bigg and \bigg produce a discreet set of increasingly taller fences, | 1 + | 2 + | 3 + | 4 + | . | + 5 | + 6 | + 7 | + 8 | . here's the same expression in a display | 1 + | 2 + | 3 + | 4 + | . | + 5 | + 6 | + 7 | + 8 | the
size ratio is 3.0 : 2.4 : 1.8 : 1.2. fixed
sized fences are useful with nested fences as in the following example [ [ a b ] + [ b a ] ] + [ a b ] latex fences that are built into fractions (\binom, etc.) are not stretchy, but they are taller in displays. emulating this behavior in mathml would require a context sensitive transaltion. further, non-stretchy fences aren't usually desira...
Investigating leaks using DMD heap scan mode
runcate stack frames, and -a tells it to not display generic frames related to the allocator. caveat: i think block_analyzer.py does not attempt to clamp the address you pass into it, so if it is an offset from the start of the block, it won’t find it. block_analyzer.py will return a series of entries that look like this (with the [...] indicating where i have removed things): 0x7f089306b000
size = 4096 bytes at byte offset 2168 nsattrandchildarray::growby[...] nsattrandchildarray::insertchildat[...] [...] 0x7f089306b000 is the address of the block that contains $leakaddr. 144 bytes is the
size of that block. that can be useful for confirming your guess about what class the block actually is. the byte offset tells you were in the block the pointer is. this is mostly useful for larg...
...s an iterative process, where you first go through and mark off the things that are easily categorizable, and repeat until you have a small list of things to analyze. example analysis of block_analyzer.py results in one debugging session where i was investigating the leak from bug 1451985, i eventually reduced the list of entries until this was the most suspicious looking entry: 0x7f0892f29630
size = 392 bytes at byte offset 56 mozilla::dom::scriptloader::processexternalscript[...] [...] i went to that line of scriptloader::processexternalscript(), and it contained a call to scriptloader::createloadrequest(). fortunately, this method mostly just contains two calls to new, one for scriptloadrequest and one for moduleloadrequest. (this is where an unoptimized build comes in handy, as it ...
Leak-hunting strategies and tips
aked.) for example, start with bringing up the mail window and closing the window without doing anything. then go on to selecting a folder, then selecting a message, and then other activities one does while reading mail. once you've done this, and it doesn't leak much, then try the action under trace-malloc or lsan or valgrind to find the leaks of smaller graphs of objects. (when i refer to the
size of a graph of objects, i'm referring to the number of objects, not the
size in bytes. leaking many copies of a string could be a very large leak, but the object graphs are small and easy to identify using gc-based leak detection.) what leak tools do we have? tool finds platforms requires leak tools for large object graphs leak gauge windows, documents, and...
... to identify using gc-based leak detection.) what leak tools do we have? tool finds platforms requires leak tools for large object graphs leak gauge windows, documents, and docshells only all platforms any build gc and cc logs js objects, dom objects, many other kinds of objects all platforms any build leak tools for medium-
size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports or use moz_count_{ctor,dtor} all tier 1 platforms debug build (or build opt with --enable-logrefcnt) leaksoup (part of tracemalloc) all objects? (or allocations?) all tier 1 platforms build with --enable-trace-malloc leak tools for simple objects and summary stat...
Profiling with Xperf
nerated. the stock windows crt allocator is horrible about fragmentation, and causes memory usage to rise drastically even if only a small fraction of that memory is in use. however, even despite this, it's a useful way to track allocations/deallocations. capturing heap data the "-heap" option is used to set up heap tracing. firefox generates lots of events, so you may want to play with the buffer
size/minbuffers/maxbuffers options as well to ensure that you don't get dropped events. also, when recording the stack, i've found that a heap trace is often missing module information (i believe this is a bug in xperf). it's possible to get around that by doing a simultaneous capture of non-heap data. to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession...
...cording the stack, i've found that a heap trace is often missing module information (i believe this is a bug in xperf). it's possible to get around that by doing a simultaneous capture of non-heap data. to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession -heap -pidnewprocess "./firefox.exe -p test -no-remote" -stackwalk heapalloc+heaprealloc -buffer
size 512 -minbuffers 128 -maxbuffers 512 to stop a session and merge the resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl result.etl "result.etl" will contain your merged data; you can delete main.etl and heap.etl. note that it's possible to capture even more data for the non-heap profile; for example, you might want to be able to correlate heap e...
Profiling with the Firefox Profiler
during startup. then capture the profile using the add-on as usual. startup profiling does not use the settings that you configured in the add-on's panel. it uses settings that can be configured with the environment variables moz_profiler_startup_entries, moz_profiler_startup_interval and moz_profiler_startup_filters: if it looks like the buffer is not large enough, you can tweak the buffer
size with the env var moz_profiler_startup_entries. this defaults to 1000000, which is 9mb. if you want 90mb use 10000000, and 20000000 for 180mb, which are good values to debug long startups. if you'd like a coarser resolution, you can also choose a different interval using moz_profiler_startup_interval, which defaults to 1 (unit is millisecond). you can't go below 1 ms but you can use e.g. 10 ms. ...
... 2 /* = features, and number of features. */ ); ' -f ./run.js -e ' var profileobj = profiler.getprofiledata(); print(json.stringify(profileobj)); ' | tail -n 1 > run.cleo the xpcshell output all benchmark information and on its last line it output the result of the profiling, you can filter it with tail -n 1 and redirect it to a file to prevent printing it in your shell. the expected
size of the output is around 100 of mb. to add symbols to your build, you need to call ./scripts/profile-symbolicate.py available in b2g repository. $ gecko_objdir=<objdir> product_out=<objdir> target_tools_prefix= \ ./scripts/profile-symbolicate.py -o run.symb.cleo run.cleo clone cleopatra and start the server with ./run_webserver.sh. access cleopatra from your web browser by loading the pag...
TraceMalloc
842 91548 589 66478 3.67 nshtmldocument.mreferrer 177 21550 691 85460 514 63910 3.53 nshtmlvalue 139 7846 1215 68734 1076 60888 3.36 htmlcontentsink 6 4816 12 57782 6 52966 2.92 uncategorized.pl, which lists all the void* allocations (the ones that couldn't be categorized by type), sorted by
size. also, your javascript can call the following dom window methods: tracemallocdisable() - turn off tracing, first flushing any buffered log events for all log files. tracemallocenable() - turn on tracing. tracemallocopenlogfile(filename) - open a new log file and return its log file descriptor (or -1 on error). tracemallocchangelogfd(logfd) - change the current log file to the one identified...
... perl source/tools/trace-malloc/diffbloatdump.pl --depth=15 --use-address /dev/null sdleak.log > sdleak.tree.raw # frobulate trees to remove extraneous junk perl source/tools/rb/fix-macosx-stack.pl sdleak.tree.raw > sdleak.tree you can also use the leakstats program to analyze a log for shutdown leaks. it will produce a report like the following. leaks: 382739 bytes, 3465 allocations maximum heap
size: 7751799 bytes 62095212 bytes were allocated in 391091 allocations. detecting memory usage growth in a running process to do this, dump the existing allocations to a file by calling the function tracemallocdumpallocations from javascript. you can use the following web page to do so. <script type="text/javascript"> var filename = window.prompt("filename to log: "); if (filename) trac...
Anonymous Shared Memory
or extracting data from the prfilemap object. ... see the examples below. both sides should adhere strictly to the protocol for proper operation. the pseudo-code below shows the use of a file-mapped shared memory by a parent and child processes. in the examples, the server creates the file-mapped shared memory, the client attaches to it. first protocol server: fm = pr_openanonfilemap(dirname,
size, filemapprot); addr = pr_memmap(fm); attr = pr_newprocessattr(); pr_processattrsetinheritablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_destroyprocessattr(attr); ... yadda ... pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via pr_createprocess() fm = pr_getinheritedfilemap( shmname ); addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilema...
..._processattrsetinheritablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_destroyprocessattr(attr); ... yadda ... pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via pr_createprocess() fm = pr_getinheritedfilemap( shmname ); addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilemap(fm); second protocol server: fm = pr_openanonfilemap(dirname,
size, filemapprot); fmstring = pr_exportfilemapasstring( fm ); addr = pr_memmap(fm); ... application specific technique to pass fmstring to child ... yadda ... server uses his own magic to create child pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via his own magic ... application specific technique to find fmstring from parent fm = pr_importfilemapfromstring( fmstring ) a...
NSPR Types
this chapter describes the most common nspr types. other chapters describe more specialized types when describing the functions that use them. calling convention types are used for externally visible functions and globals. algebraic types of various lengths are used for integer algebra. miscellaneous types are used for representing
size, pointer difference, boolean values, and return values. for information on naming conventions for nspr types, functions, and macros, see nspr naming conventions. calling convention types these types are used to support cross-platform declarations of prototypes and implementations: pr_extern is used for declarations of external functions or variables. pr_implement is used for definitions of external functions or variables. pr_callback is used for ...
...point number type the nspr floating-point type is always 64 bits. prfloat64 native os integer types these types are most appropriate for automatic variables. they are guaranteed to be at least 16 bits, though various architectures may define them to be wider (for example, 32 or even 64 bits). these types are never valid for fields of a structure. printn pruintn miscellaneous types
size type pointer difference types boolean types status type for return values
size type pr
size pointer difference types types for pointer difference. variables of these types are suitable for storing a pointer or pointer subtraction. these are the same as the corresponding types in libc. prptrdiff pruptrdiff boolean types type and constants for boolean values. prbool prpackedboo...
PRSocketOptionData
pr_getsocketoption and pr_setsocketoption to specify options for file descriptors that represent sockets. syntax #include <prio.h> typedef struct prsocketoptiondata { prsockoption option; union { pruintn ip_ttl; pruintn mcast_ttl; pruintn tos; prbool non_blocking; prbool reuse_addr; prbool keep_alive; prbool mcast_loopback; prbool no_delay; pr
size max_segment; pr
size recv_buffer_
size; pr
size send_buffer_
size; prlinger linger; prmcastrequest add_member; prmcastrequest drop_member; prnetaddr mcast_if; } value; } prsocketoptiondata; fields the structure has the following fields: ip_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_blocking nonblock...
...p_ttl ip time-to-live. mcast_ttl ip multicast time-to-live. tos ip type-of-service and precedence. non_blocking nonblocking (network) i/o. reuse_addr allow local address reuse. keep_alive periodically test whether connection is still alive. mcast_loopback ip multicast loopback. no_delay disable nagle algorithm. don't delay send to coalesce packets. max_segment tcp maximum segment
size. recv_buffer_
size receive buffer
size. send_buffer_
size send buffer
size. linger time to linger on close if data are present in socket send buffer. add_member join an ip multicast group. drop_member leave an ip multicast group. mcast_if ip multicast interface address. description prsocketoptiondata is a name-value pair for a socket option. the option field (of enumeration type prso...
PR_CreateThread
start a pointer to the thread's root function, which is called as the root of the new thread. ...
...in this parameter. priority the initial priority of the newly created thread. scope specifies your preference for making the thread local (pr_local_thread), global (pr_global_thread) or global bound (pr_global_bound_thread). however, nspr may override this preference if necessary. state specifies whether the thread is joinable (pr_joinable_thread) or unjoinable (pr_unjoinable_thread). stack
size specifies your preference for the
size of the stack, in bytes, associated with the newly created thread. if you pass zero in this parameter, pr_createthread chooses the most favorable machine-specific stack
size. returns the function returns one of the following values: if successful, a pointer to the new thread. this pointer remains valid until the thread returns from its root function. ...
PR_GetFileInfo
gets information about a file with a specified pathname. file
size is expressed as a 32-bit integer. syntax #include <prio.h> prstatus pr_getfileinfo( const char *fn, prfileinfo *info); parameters the function has the following parameters: fn the pathname of the file to get information about. info a pointer to a file information object (see prfileinfo). on output, pr_getfileinfo writes information about the given file to the file information object. returns one of the following values: if the file information is successfully obtained, pr_success. if the file information is not successfully obtained, pr_failure. ...
...leinfo writes information about the given file to the file information object. returns one of the following values: if the file information is successfully obtained, pr_success. if the file information is not successfully obtained, pr_failure. description pr_getfileinfo stores information about the file with the specified pathname in the prfileinfo structure pointed to by info. the file
size is returned as an unsigned 32-bit integer. see also for the 64-bit version of this function, see pr_getfileinfo64. to get equivalent information on a file that's already open, use pr_getopenfileinfo. ...
PR_GetFileInfo64
syntax #include <prio.h> prstatus pr_getfileinfo64( const char *fn, prfileinfo64 *info); parameters the function has the following parameters: fn the pathname of the file to get information about. info a pointer to a 64-bit file information object (see prfileinfo64). on output, pr_getfileinfo64 writes information about the given file to the file information object. returns one of the following values: if the file information is successfully obtained, pr_success. if the file information is not successfully obtained, pr_failure. ...
...64 writes information about the given file to the file information object. returns one of the following values: if the file information is successfully obtained, pr_success. if the file information is not successfully obtained, pr_failure. description pr_getfileinfo64 stores information about the file with the specified pathname in the prfileinfo64 structure pointed to by info. the file
size is returned as an unsigned 64-bit integer. see also for the 32-bit version of this function, see pr_getfileinfo. to get equivalent information on a file that's already open, use pr_getopenfileinfo64. ...
PR_GetOpenFileInfo
gets an open file's information. file
size is expressed as a 32-bit integer. syntax #include <prio.h> prstatus pr_getopenfileinfo( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file. info a pointer to a prfileinfo object. on output, information about the given file is written into the file information object. returns the function returns one of the following values: if file information is successfully obtained, pr_success. if file information is not successfully obtained, pr_failure. ...
...nter to a prfileinfo object. on output, information about the given file is written into the file information object. returns the function returns one of the following values: if file information is successfully obtained, pr_success. if file information is not successfully obtained, pr_failure. description pr_getopenfileinfo obtains the file type (normal file, directory, or other), file
size (as a 32-bit integer), and the file creation and modification times of the open file represented by the file descriptor. see also for the 64-bit version of this function, see pr_getopenfileinfo64. to get equivalent information on a file that's not already open, use pr_getfileinfo. ...
PR_GetOpenFileInfo64
gets an open file's information. file
size is expressed as a 64-bit integer. syntax #include <prio.h> prstatus pr_getopenfileinfo64( prfiledesc *fd, prfileinfo *info); parameters the function has the following parameters: fd a pointer to a prfiledesc object for an open file. info a pointer to a prfileinfo64 object. on output, information about the given file is written into the file information object. returns the function returns one of the following values: if file information is successfully obtained, pr_success. if file information is not successfully obtained, pr_failure. description pr_getopenfileinfo64 is the 64-bit version of pr_getopenfileinfo. ...
...n about the given file is written into the file information object. returns the function returns one of the following values: if file information is successfully obtained, pr_success. if file information is not successfully obtained, pr_failure. description pr_getopenfileinfo64 is the 64-bit version of pr_getopenfileinfo. it obtains the file type (normal file, directory, or other), file
size (as a 64-bit integer), and the creation and modification times of the open file represented by the file descriptor. see also for the 32-bit version of this function, see pr_getopenfileinfo. to get equivalent information on a file that's not already open, use pr_getfileinfo64. ...
PR_dtoa
mode the type of conversion to employ. ndigits the number of digits desired in the output string. ...
...memory location where the runtime will store the offset, relative to the beginning of the output string, of the conversion's decimal point. sign a location where the runtime can store an indication that the conversion was of a negative value. *rve if not null this location is set to the address of the end of the result. buf the address of the buffer in which to store the result. bufsz the
size of the buffer provided to hold the result. results the principle output is the null-terminated string stored in buf. if rve is not null, *rve is set to point to the end of the returned value. description this function converts the specified floating point number to a string, using the method specified by mode. possible modes are: 0 shortest string that yields d when read in and rounded t...
An overview of NSS Internals
as shared libraries. the crmf library, which is used to produce certain kinds of certificate requests, is available as a library for static linking only. when dealing with certificates (x.509), file formats such as pkcs#12 (certificates and keys), pkcs#7 (signed data), and message formats as cms, we should mention asn.1, which is a syntax for storing structured data in a very efficient (small
sized) presentation. it was originally developed for telecommunication systems at times where it was critical to minimize data as much as possible (although it still makes sense to use that principle today for good performance). in order to process data available in the asn.1 format, the usual approach is to parse it and transfer it to a presentation that requires more space but is easier to work with...
...hen importing data from files. a recent development adds support for loading external pem files that contain private keys, in a software library called nss-pem, which is separately available, but should eventually become a core part of nss. looking at the code level, nss deals with blocks of raw data all the time. the common structure to store such an untyped block is secitem, which contains a
size and an untyped c pointer variable. when dealing with memory, nss makes use of arenas, which are an attempt to simplify management with the limited offerings of c (because there are no destructors). the idea is to group multiple memory allocations in order to simplify cleanup. performing an operation often involves allocating many individual data items, and the code might be required to abort a...
Cryptography functions
mxr 3.2 and later pk11_getallslotsforcert mxr 3.12 and later pk11_getbestkeylength mxr 3.2 and later pk11_getbestslot mxr 3.2 and later pk11_getbestslotmultiple mxr 3.2 and later pk11_getbestwrapmechanism mxr 3.2 and later pk11_getblock
size mxr 3.2 and later pk11_getcertfromprivatekey mxr 3.9.3 and later pk11_getcurrentwrapindex mxr 3.2 and later pk11_getdefaultarray mxr 3.8 and later pk11_getdefaultflags mxr 3.8 and later pk11_getdisabledreason mxr 3.8 and later pk11...
...reateecprivatekey mxr 3.8 and later seckey_createsubjectpublickeyinfo mxr 3.2 and later seckey_decodedersubjectpublickeyinfo mxr 3.4 and later seckey_destroyprivatekey mxr 3.2 and later seckey_ecparamstobasepointorderlen mxr 3.12 and later seckey_ecparamstokey
size mxr 3.12 and later seckey_destroypublickeylist mxr 3.4 and later seckey_destroysubjectpublickeyinfo mxr 3.2 and later seckey_getpublickeytype mxr 3.3 and later seckey_publickeystrengthinbits mxr 3.8 and later seckey_signaturelen mxr 3.11.2 and lat...
NSS 3.19.2 release notes
requires nspr 4.10.8 or newer. nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this release. notable changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum key
sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa keys, to 512 bits, and for dh keys, 1023 bits. this was done as part of a security fix for bug 1138554 / cve-2015-4000. applications that requested or attempted to use keys smaller then the minimum
size would fail. however, this ch...
...lly broke existing nss applications that need to generate or use such keys, via apis such as seckey_creatersaprivatekey or seckey_createdhprivatekey. in nss 3.19.2, this change in freebl behaviour has been reverted. the fix for bug 1138554 has been moved to libssl, and will now only affect the minimum keystrengths used in ssl/tls. note: future versions of nss may increase the minimum key
sizes required by the freebl module. consumers of nss are strongly encouraged to migrate to stronger cryptographic strengths as soon as possible. bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.
NSS 3.38 release notes
es (nss) 3.38, which is a minor release. distribution information the hg tag is nss_3_38_rtm. nss 3.38 requires nspr 4.19 or newer. nss 3.38 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_38_rtm/src/ new in nss 3.38 new functionality added support for the tls record
size limit extension. when creating a certificate request (csr) using certutil -r, an existing orphan private key can be reused. parameter -k may be used to specify the id of an existing orphan key. the available orphan key ids can be displayed using command certutil -k. when using certutil -o to print the chain for a given certificate nickname, the new parameter --simple-self-signed may be provided...
...an key ids can be displayed using command certutil -k. when using certutil -o to print the chain for a given certificate nickname, the new parameter --simple-self-signed may be provided, which can avoid ambiguous output in some scenarios. new functions in secitem.h secitem_makeitem - allocate and make an item with the requested contents new macros in ssl.h ssl_record_
size_limit - used to control the tls record
size limit extension notable changes in nss 3.38 fixed cve-2018-0495 in bug 1464971. various security fixes in the asn.1 code. nss automatically enables caching for sql database storage on linux, if it is located on a network filesystem that's known to benefit from caching. when repeatedly importing the same certificate into an...
NSS 3.48 release notes
upcoming changes in nss 3.49 the legacy dbm database, libnssdbm, will no longer be built by default. see bug 1594933 for details. ...
...tification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro performance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block
size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577803 - mark pkcs#11 token as friendly if it implements...
nss tech note4
citem version; secitem streetaddress; secitem phonenum; secitem rfc822name; secitem id; secitem maxusers; }; typedef struct _mycertextdata mycertextdata; /* template used for decoding the extension */ const sec_asn1template mycertexttemplate[] = { { sec_asn1_sequence, 0, null,
sizeof( mycertextdata ) }, { sec_asn1_integer, offsetof(mycertextdata, version) }, { sec_asn1_octet_string, offsetof( mycertextdata, streetaddress ) }, { sec_asn1_octet_string, offsetof( mycertextdata, phonenum ) }, { sec_asn1_octet_string, offsetof( mycertextdata, rfc822name ) }, { sec_asn1_octet_string, offsetof( mycertextdata...
..._string, offsetof( mycertextdata, id ) }, { sec_asn1_integer, offsetof(mycertextdata, maxusers ) }, { 0 } }; /* oid for my cert extension - replace 0xff with appropriate values*/ static const unsigned char myoid[] = { 0xff, 0xff, 0xff, 0xff, .... ...
Python binding for NSS
port. for ipv6 the a hex string must be enclosed in brackets if a port is appended to it, the bracketed hex address with appended with a port is unappropriate in some circumstances, hence the new address property to permit either the address string with a port or without a port. fix the implementation of the networkaddress.family property, it was returning bogus data due to wrong native data
size. hostentry objects now support iteration and indexing of their networkaddress members. add io.addr_family_name() function to return string representation of pr_af_* constants. modify example and test code to utilize addrinfo instead of deprecated networkaddress functionality. add address family command argument to ssl_example. fix pty import statement in test/setup_certs.py ...
...ecitem's now support indexing and slicing on their data clean up parsing and parameter validation of variable arg functions the following were added: secitem.type secitem.len secitem.data pk11symkey.key_data pk11symkey.key_length pk11symkey.slot create_context_by_sym_key param_from_iv generate_new_param get_iv_length get_block_
size get_pad_mechanism release 0.7.0 release date 2009-09-18 scm tag source download change log general modifications: add support for symmetric encryption/decryption more support for digests (hashes) the following classes added: pk11symkey pk11context the following method...
NSS tools : ssltab
48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_key_exchange) length = 64 (0x000040...
...x3fd0 } ] >-- [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_key_exchange) length = 64 (0x000040) clientkeyexchange { message = {...} } } } ] --> [ sslrecord { type = 20 (change_cipher...
NSS tools : ssltap
48 4f 7f | \.uc§l.Ç.d<paho. session id = { length = 32 contents = {..} 0: 14 11 07 a8 2a 31 91 29 11 94 40 37 57 10 a7 32 | ...¨*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { 0: 16 03 00 00 44 |....d type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { 0: 10 00 00 40 |...@ type = 16 (client_key_exchange) length = 64 (0x000040...
...x3fd0 } ] >-- [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 997 (0x3e5) handshake { type = 2 (server_hello) length = 70 (0x000046) serverhello { server_version = {3, 0} random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_key_exchange) length = 64 (0x000040) clientkeyexchange { message = {...} } } } ] --> [ sslrecord { type = 20 (change_cipher...
sslerr.html
ndicates a flaw in the nss ssl library. ssl_error_close_notify_alert -12230 "ssl peer has closed this connection." the local socket received an ssl3 alert record from the remote peer, reporting that the remote peer has chosen to end the connection. the receipt of this alert is an error only if it occurs while a handshake is in progress. ssl_error_pub_key_
size_limit_exceeded -12210 "ssl server attempted to use domestic-grade public key with export cipher suite." on a client socket, this error reports that the remote server has failed to perform an "ssl step down" for an export cipher. it has sent a certificate bearing a domestic-grade public key, but has not sent a serverkeyexchange message containing an export-grade public key for the...
...does not match your certificate. sec_error_pkcs7_bad_signature -8145 signature verification failed: no signer found, too many signers found, \ or improper or corrupted data. sec_error_unsupported_keyalg -8144 unsupported or unknown key algorithm. sec_error_decryption_disallowed -8143 cannot decrypt: encrypted using a disallowed algorithm or key
size. xp_sec_fortezza_bad_card -8142 fortezza card has not been properly initialized. xp_sec_fortezza_no_card -8141 no fortezza cards found. xp_sec_fortezza_none_selected -8140 no fortezza card selected. xp_sec_fortezza_more_info -8139 please select a personality to get more info on. xp_sec_fortezza_person_not_found -8138 perso...
NSS Tools certutil
-e check a certificate's signature during the process of validating a certificate. -f password-file specify a file that will automatically supply the password to include in a certificate or to access a certificate database. this is a plain-text file containing one password. be sure to prevent unauthorized access to this file. -g key
size set a key
size to use when generating new public and private key pairs. the minimum is 512 bits and the maximum is 8192 bits. the default is 1024 bits. any
size that is a multiple of 8 between the minimum and maximum is allowed. -h tokenname specify the name of a token to use or act on. unless specified otherwise the default token is an internal slot (spe...
...the database, instead of the default value of 65537. the available alternate values are 3 and 17. -z noise-file read a seed value from the specified binary file to use in generating a new rsa private and public key pair. this argument makes it possible to use hardware-generated seed values and unnecessary to manually create a value from the keyboard. the minimum file
size is 20 bytes. -1 add a key usage extension to a certificate that is being created or added to a database. this extension allows a certificate's key to be dedicated to supporting specific operations such as ssl server or object signing. the certificate database tool will prompt you to select a particular usage for the certificate's key. these usages are described under...
NSS Tools ssltap
*1.)..@7w.§2 10: 56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) }}]--> [sslrecord { 0: 16 03 00 00 44 ...
... server_version = {3, 0} random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) }}]--> [sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (client_key_exchange) length = ...
NSS tools : ssltap
56 6f 52 62 fe 3d b3 65 b1 e4 13 0f 52 a3 c8 f6 | vorbþ=³e±...r£È. } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } 0: 0b 00 02 c5 |...Å type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } 0: 0c 00 00 ca |.... type = 12 (server_key_exchange) length = 202 (0x0000ca) 0: 0e 00 00 00 |.... type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { ...
... random = {...} session id = { length = 32 contents = {..} } cipher_suite = (0x0003) ssl3/rsa/rc4-40/md5 } type = 11 (certificate) length = 709 (0x0002c5) certificatechain { chainlength = 706 (0x02c2) certificate {
size = 703 (0x02bf) data = { saved in file 'cert.001' } } } type = 12 (server_key_exchange) length = 202 (0x0000ca) type = 14 (server_hello_done) length = 0 (0x000000) } } ] --> [ sslrecord { type = 22 (handshake) version = { 3,0 } length = 68 (0x44) handshake { type = 16 (clie...
Small Footprint
tools most embeddings won't need any of the classes in org.mozilla.javascript.tools or any of its sub-packages. ...
... file generation and you can remove all the classes from in org.mozilla.classfile package. regular expressions the package org.mozilla.javascript.regexp can be removed. rhino will continue to run, although it will not be able to execute any regular expression matches. this change saves 47,984 bytes of class files. debug information debug information in rhino classes consumes about 25% of code
size and if you can live without that, you can recompile rhino to remove it. smalljs.jar ant build script in rhino supports smalljar target that will generate smalljs.jar that does not include tools, optimizer, javaadapter and class generation library, regular expressions, e4x implementataion and deprecated files. to build such minimalist jar without debug information, run the following command from...
JS_AlreadyHasOwnProperty
this article covers features introduced in spidermonkey 1.8 determine whether a property is already physically present on a jsobject. syntax boo js_alreadyhasownproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); boo js_alreadyhasownucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, bool *foundp); boo js_alreadyhasownpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 boo js_alreadyhasownelement(jscontext *cx, js::handleobject obj, uint32_t index, bool *foundp); name type description cx jscontext * pointer to a js context. requ...
...pointer to a js context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object to be searched. name or id const char * or const char16_t *or js::handleid (in js_alreadyhasownproperty, alreadyhasownucproperty, and js_alreadyhasownpropertybyid) the name of the property to search for. namelen
size_t (in js_alreadyhasownucproperty only) the length of name, in characters; or the special value (
size_t) -1 to indicate that name is null-terminated. index uint32_t (in js_alreadyhasownelement only) the index of the element to search for. foundp bool * out parameter. *foundp receives true if the property is found or false if it is not found. if an error occurs, the...
JS_CompileFunction
obsolete since jsapi 36this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. creates a javascript function from a text string. syntax jsfunction * js_compilefunction(jscontext *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const char *body,
size_t length, const char *filename, unsigned int lineno); jsfunction * js_compileucfunction(jscontext *cx, jsobject *obj, const char *name, unsigned int nargs, const char **argnames, const jschar *body,
size_t length, const char *filename, unsigned int lineno); name type description cx jscontext * the context in which to compile the function. requires ...
...function is associated. name const char * name to assign the newly compiled function. nargs unsigned int number of arguments to pass to the function. argnames const char ** names to assign to the arguments passed to the function. body const char * or const jschar * string containing the body of the function to compile. length
size_t the length, in characters, of body. filename const char * name of file or url containing the function. used to report filename or url in error messages. lineno unsigned int line number. used to report the offending line in the file or url if an error occurs. description js_compilefunction compiles a function from a text string, bytes, and optionally asso...
JS_CompileUCFunctionForPrincipalsVersion
this article covers features introduced in spidermonkey 1.8.5 please provide a description for this function. syntax jsfunction * js_compileucfunctionforprincipalsversion(jscontext *cx, jsobject *obj, jsprincipals *principals, const char *name, unsigned int nargs, const char **argnames, const jschar *chars,
size_t length, const char *filename, unsigned int lineno, jsversion version); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * principals jsprincipals * name const char * nargs unsigned int argnames const char ** chars const ...
...pe description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * principals jsprincipals * name const char * nargs unsigned int argnames const char ** chars const jschar * length
size_t filename const char * lineno unsigned int version jsversion description please provide a description. see also please provide a description. ...
JS_DefinePropertyWithTinyId
ince it could be removed at any time. try to avoid using it. create a new object property with a tiny id. syntax jsbool js_definepropertywithtinyid( jscontext *cx, jsobject *obj, const char *name, int8 tinyid, jsval value, jspropertyop getter, jspropertyop setter, unsigned int attrs); jsbool js_defineucpropertywithtinyid( jscontext *cx, jsobject *obj, const jschar *name,
size_t namelen, int8 tinyid, jsval value, jspropertyop getter, jspropertyop setter, unsigned int attrs); name type description cx jscontext * the context in which to define the property. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to create the new property. na...
...int attrs); name type description cx jscontext * the context in which to define the property. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to create the new property. name const char * or const jschar * name for the property to create. namelen
size_t (only in js_defineucpropertywithtinyid) the length of name in characters; or (
size_t) -1 to indicate that name is null-terminated. tinyid int8 8-bit id to aid in sharing getter and setter callbacks among properties. value jsval initial stored value for the new property. getter jspropertyop getproperty method for retrieving the current property val...
JS_DeleteProperty
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object from which to delete a property. name or id const cha...
... description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object from which to delete a property. name or id const char * or jsid or const char16_t * name of the property to delete. namelen
size_t (only in js_deleteucproperty) the length of name in characters; or -1 to indicate that name is null-terminated. result js::objectopresult & (out parameter) receives the result of the operation. description js_deleteproperty removes a specified property, name, from an object, obj. js_deletepropertybyid is the same but takes a jsid for the property name. these funct...
JS_DeleteProperty2
sers, its use is discouraged since it could be removed at any time. try to avoid using it. removes a specified property from an object. renamed to js_deleteproperty from jsapi 39. syntax bool js_deleteproperty2(jscontext *cx, js::handleobject obj, const char *name, bool *succeeded); bool js_deleteucproperty2(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, bool *succeeded); bool js_deletepropertybyid2(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must...
...ription cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object from which to delete a property. name or id const char * or const char16_t or js::handleid name of the property to delete. namelen
size_t (only in js_deleteucproperty2) the length of name in characters; or -1 to indicate that name is null-terminated. succeeded bool * out parameter. on success, *succeeded receives false if the property was not deleted because it is permanent and true otherwise. description js_deleteproperty2 removes a specified property, name, from an object, obj, and stores true or false...
JS_DumpHeap
eature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8 debug only. dump the object graph of heap-allocated things. syntax bool js_dumpheap(jsruntime *rt, file *fp, void* startthing, jsgctracekind kind, void *thingtofind,
size_t maxdepth, void *thingtoignore); name type description cx jscontext * pointer to a js context. every jscontext is permanently associated with a jsruntime; each jsruntime contains a gc heap. fp file * file for the dump output. startthing void * null or a pointer to a gc thing (use js::value::togcthing() to obtain a pointer to pass here...
... when non-null, dump only things reachable from the object indicated. startkind jsgctracekind trace kind of startthing, if startthing is not null. must be jstrace_object when startthing is null. thingtofind void * null or a pointer to a gc thing. if this is non-null, js_dumpheap only dumps paths in the object graph leading to the specified thing. maxdepth
size_t the upper bound on the number of edges to descend from the graph roots. thingtoignore void * null or a pointer to a gc thing that will be ignored during graph traversal. enum jsgctracekind { // these trace kinds have a publicly exposed, although opaque, c++ type. // note: the order here is determined by our value packing. other users // should sort alp...
JS_EncodeStringToBuffer
this article covers features introduced in spidermonkey 1.8.5 convert a javascript string to a c string. syntax
size_t js_encodestringtobuffer(jscontext *cx, jsstring *str, char *buffer,
size_t length); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str jsstring * a string to encode. buffer char * a character buffer to receive encoded string. length
size_t the
size of buffer in bytes. description js_encodestringtobuffer converts the specified javascript str to a c string (an array of 8-bit chars) and fills the specified buffer with up to length bytes of the string. it returns the length of the whole stri...
...if the returned value is greater than the length you specified, the string was truncated. to encode to utf8, use js::getdeflatedutf8stringlength and js::deflatestringtoutf8buffer instead. ...
JS_ExecuteRegExp
execute a new regexp object to given input string. syntax bool js_executeregexp(jscontext *cx, js::handleobject obj, js::handleobject reobj, char16_t *chars,
size_t length,
size_t *indexp, bool test, js::mutablehandlevalue rval); bool js_executeregexpnostatics(jscontext *cx, js::handleobject reobj, char16_t *chars,
size_t length,
size_t *indexp, bool test, js::mutablehandlevalue rval); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject a pointer to a global object. reobj js::handleobject ...
... description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject a pointer to a global object. reobj js::handleobject a pointer to a regexp object. chars const char16_t * a pointer to the string contains a input string. length
size_t the length of bytes or chars, in characters. indexp
size_t * in/out parameter. a pointer to the lastindex for the execution, and received the updated lastindex. test bool pass true to avoid creating match result array and store boolean value to rval. rval js::mutablehandlevalue out parameter. receives the result match result array or boolean value...
JS_GetLatin1StringCharsAndLength
this article covers features introduced in spidermonkey 38 get the chars and the length of a string. ...
...ced in spidermonkey 38 get the chars and the length of a string. syntax const js::latin1char * js_getlatin1stringcharsandlength(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str,
size_t *length); const char16_t * js_gettwobytestringcharsandlength(jscontext *cx, const js::autocheckcannotgc &nogc, jsstring *str,
size_t *length); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.. nogc js::autocheckcannotgc & a reference to js::autocheckcannotgc. str jsstring * a string to get characters. length
size_t * out parameter. receives the length o...
JS_GetProperty
find a specified property and retrieve its value. syntax bool js_getproperty(jscontext *cx, js::handleobject obj, const char *name, js::mutablehandlevalue vp); bool js_getucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::mutablehandlevalue vp); bool js_getpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t * or...
... in spidermonkey 1.8.1 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t * or js::handleid name of the property to look up. namelen
size_t (in js_getucproperty only) the length of name, in characters; or -1 to indicate that name is null-terminated. vp js::mutablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_getproperty examines a specified js object obj and its prototype chain for a property with the specifi...
JS_GetPropertyAttributes
. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. get the attributes of a specified property. syntax jsbool js_getpropertyattributes(jscontext *cx, jsobject *obj, const char *name, unsigned int *attrsp, jsbool *foundp); jsbool js_getucpropertyattributes(jscontext *cx, jsobject *obj, const jschar *name,
size_t namelen, unsigned int *attrsp, jsbool *foundp); name type description cx jscontext * the context in which to look up property attributes. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object that has the property to be queried. name const char * or const jschar * ...
...e description cx jscontext * the context in which to look up property attributes. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * the object that has the property to be queried. name const char * or const jschar * name of the property from which to retrieve attributes. namelen
size_t (only in js_getucpropertyattributes) the length of name in characters; or (
size_t) -1 to indicate that name is null-terminated. attrsp unsigned int * out parameter. if the specified property is found on obj, *attrsp receives its attributes. foundp jsbool * out parameter. if no error occurs, *foundp receives js_true if the specified property is found and js_false...
JS_GetPropertyAttrsGetterAndSetter
at any time. try to avoid using it. retrieve the attributes, getter, and setter of a specified property. ...
...ype description cx jscontext * the context in which to perform the property lookup. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object from which to retrieve property attributes. name or id const char * or const jschar * or jsid the name of the property to examine. namelen
size_t (only in js_getucpropertyattrsgetterandsetter) the length of name in characters; or (
size_t) -1 to indicate that name is null-terminated. attrsp unsigned int * out parameter. pointer to the storage area into which to place retrieves attributes. foundp jsbool * out parameter. flag indicating whether or not the specified property was located. getterp j...
JS_HasProperty
determine whether a javascript object has a specified property. syntax bool js_hasproperty(jscontext *cx, js::handleobject obj, const char *name, bool *foundp); bool js_hasucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, bool *vp); bool js_haspropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, bool *foundp); // added in spidermonkey 1.8.1 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t or js::handleid name of the prope...
...ded in spidermonkey 1.8.1 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t or js::handleid name of the property to look up. namelen
size_t (only in js_hasucproperty) the length of name in characters, or -1 to indicate that name is null-terminated. foundp bool * non-null pointer to a variable of type bool. on success, js_hasproperty stores true in this variable if obj has a property with the given name, and false if not. description js_hasproperty searches an object, obj, and its prototype chain, for a prope...
JS_LookupProperty
t may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. determine if a specified property exists. ...
...ription cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t *or js::handleid name of the property to look up. namelen
size_t (only in js_lookupucproperty) the length of name in characters; or -1 to indicate that name is null-terminated. flags unsigned (only in js_lookuppropertywithflags) a combination of bits requesting special search behavior. see flags below. objp js::mutablehandleobject out parameter. on success, *objp receives the object on which the property was found. this will ...
JS_NewRegExpObject
create a new regexp object. syntax jsobject * js_newregexpobject(jscontext *cx, js::handleobject obj, const char *bytes,
size_t length, unsigned flags); jsobject * js_newucregexpobject(jscontext *cx, js::handleobject obj, const char16_t *chars,
size_t length, unsigned flags); jsobject * js_newregexpobjectnostatics(jscontext *cx, char *bytes,
size_t length, unsigned flags); jsobject * js_newucregexpobjectnostatics(jscontext *cx, char16_t *chars,
size_t length, unsigned flags); name type description cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller m...
...escription cx jscontext * the context in which to create the new object. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject a pointer to a global object. bytes or chars const char * or const char16_t * a pointer to the string that contains a regular expression. length
size_t the length of bytes or chars, in characters. flags unsigned regular expression flags. see below. flags name description regexp constructor flag jsreg_fold fold uppercase to lowercase. i jsreg_glob global execution, creates array of matches. g jsreg_multiline treat ^ and $ as begin and end of line. m j...
JS_PutEscapedString
this article covers features introduced in spidermonkey 1.8.5 write a string into buffer with escaping. syntax
size_t js_putescapedstring(jscontext *cx, char *buffer,
size_t
size, jsstring *str, char quote);
size_t js_putescapedflatstring(char *buffer,
size_t
size, jsflatstring *str, char quote); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. buffer char * a pointer to char buffer to write into.
size size_t the
size of buffer in bytes. str jsstring * or jsflatstring * a string to write into the file. quote char one of 0, single quote, and double quote. ...
...f buffer in bytes. str jsstring * or jsflatstring * a string to write into the file. quote char one of 0, single quote, and double quote. description js_putescapedstring and js_putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless
size is 0. returns the length of the written output, not including the nul. thus, a return value of
size or more means that the output was truncated. if buffer is null, just returns the length of the output. if quote is not 0, it must be a single or double quote character that will quote the output. see also mxr id search for js_putescapedstring mxr id search for js_putescapedflatstring bug 6094...
JS_SET_TRACING_DETAILS
his article covers features introduced in spidermonkey 1.8 set debugging information about the next thing to be traced by a jstracer. syntax js_set_tracing_details(trc, printer, arg, index) name type description trc jstracer * the tracer whose debugging hooks are to be set. printer jstracenameprinter a callback function, described below; or null. arg void * see the description. index
size_t see the description. callback syntax typedef void (*jstracenameprinter)(jstracer *trc, char *buf,
size_t buf
size); name type description trc jstracer * the tracer. buf char * out parameter. the callback stores a string describing the reference traced in buf. buf
size size_t the
size of buf, in chars. description set debugging information about a reference to a traceable thing to ...
...when printer is not null, the arg and index arguments are available to the callback as the debugprinterarg and debugprintindex fields of trc. ...
JS_SetNativeStackQuota
this article covers features introduced in spidermonkey 17 enable or disable checks to avoid overflowing the c stack. syntax void js_setnativestackquota(jsruntime *cx,
size_t systemcodestack
size,
size_t trustedscriptstack
size = 0,
size_t untrustedscriptstack
size = 0); name type description rt jsruntime * the runtime. systemcodestack
size size_t the desired stack quota setting, in bytes. trustedscriptstack
size size_t the desired stack quota setting, in bytes for trusted script. if omitted, it uses the value of systemcodestack
size. added in spidermonkey 31 untrustedscriptstack
size size_t the desired stack quota setting, in bytes for untrusted script. if o...
...ize_t the desired stack quota setting, in bytes. trustedscriptstack
size size_t the desired stack quota setting, in bytes for trusted script. if omitted, it uses the value of systemcodestack
size. added in spidermonkey 31 untrustedscriptstack
size size_t the desired stack quota setting, in bytes for untrusted script. if omitted, it uses the value of trustedscriptstack
size. added in spidermonkey 31 description js_setnativestackquota sets the
size of the native stack that should not be exceeded. to disable stack
size checking, pass 0. spidermonkey allows for a distinction between system code (such as gcs, which may incidentally be triggered by script but are not strictly performed on behalf of such script), trusted script (as determined by js_settrustedprin...
JS_SetProperty
assign a value to a property of an object. syntax bool js_setproperty(jscontext *cx, js::handleobject obj, const char *name, js::handlevalue v); bool js_setucproperty(jscontext *cx, js::handleobject obj, const char16_t *name,
size_t namelen, js::handlevalue v); bool js_setpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue v); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handlevalue object to which the property to set belongs. name or id const...
...ption cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handlevalue object to which the property to set belongs. name or id const char * or const char16_t *or js::handleid name of the property to set. namelen
size_t (only in js_setucproperty) the length of name in characters; or -1 to indicate that name is null-terminated. v js::handlevalue in/out parameter. *vp is the value to assign to the property. ordinarily this function leaves v unchanged, but it is possible for a jsclass.addproperty hook or a non-default setter to assign to v. description js_setproperty assigns the value v ...
JS_SetPropertyAttributes
e. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. set the attributes for a specified property. syntax jsbool js_setpropertyattributes(jscontext *cx, jsobject *obj, const char *name, unsigned int attrs, jsbool *foundp); jsbool js_setucpropertyattributes(jscontext *cx, jsobject *obj, const jschar *name,
size_t namelen, unsigned int attrs, jsbool *foundp); name type description cx jscontext * the context in which to set the property attributes. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to set property attributes. name const char * or const jschar * name...
...me type description cx jscontext * the context in which to set the property attributes. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj jsobject * object for which to set property attributes. name const char * or const jschar * name of the property for which to set attributes. namelen
size_t (in js_setucpropertyattributes only) the length of name, in characters. attrs unsigned int attribute values to set. foundp jsbool * out parameter. flag indicating whether or not the specified property was located. description js_setpropertyattributes sets the attributes for a specified property, name of an object obj. js_setucpropertyattributes is the un...
JS_updateMallocCounter
description js_updatemalloccounter decrements malloc counter of gc and the zone of the context. malloc counter measures memory pressure for gc scheduling. it runs from maxmallocbytes down to zero. ...
... description js_updatemalloccounter decrements malloc counter of gc and the zone of the context. malloc counter measures memory pressure for gc scheduling. it runs from maxmallocbytes down to zero. ...
SpiderMonkey 1.8.8
the file must conform to the standard c99 <stdint.h> header interface in all respects, providing all that header's types and macro definitions. (the msstdint project includes an implementation of this header for micr...
...ible with the standard definitions or the custom implementation needed for older versions of visual studio. in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 2010. in the meantime moz_custom_stdint_h is intended to function as a bridge to always using the standard header. for more information on the fixed-
size integer types changes, see this blog post. new c apis ...list and link to new apis here... new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. ...list new c++ helpers here... obsolete apis ...list ...
SpiderMonkey 17
the file must conform to the standard c99 <stdint.h> header interface in all respects, providing all that header's types and macro definitions. (the msstdint project includes an implementation of this header for micr...
...ible with the standard definitions or the custom implementation needed for older versions of visual studio. in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 2010. in the meantime moz_custom_stdint_h is intended to function as a bridge to always using the standard header. for more information on the fixed-
size integer types changes, see this blog post. new c apis ...list and link to new apis here... new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself. ...list new c++ helpers here... obsolete apis ...list ...
SpiderMonkey 24
roducing js::rooted, js::handle, and js::mutablehandle types. these types, with the appropriate parametrizations, can roughly be substituted for plain types of gc things (values, string/object pointers, etc.). these and other changes are explained in detail below. new javascript language features javascript 24 includes significant updates to language features, yo. typedef changes the fixed-
size integer types introduced in spidermonkey 17 are defined in one of the following ways (xxx update for msvc<10 deprecation): if the environment variable moz_custom_stdint_h is set, that file will be included to provide definitions for these types. the file must conform to the standard c99 <stdint.h> header interface in all respects, providing all that header's types and macro definitions. (the...
...ble with the standard definitions or the custom implementation needed for older versions of visual studio. in the long run we anticipate removing the environment variable-based overriding when we drop support for versions of visual studio prior to 2010. in the meantime moz_custom_stdint_h is intended to function as a bridge to always using the standard header. for more information on the fixed-
size integer types changes, see this blog post. new c apis js_getarrayprototype provides access to the original value of array.prototype. new c++ helpers while jsapi remains a c api, the engine is now implemented in c++. some c++ helpers have been introduced into the api, to help embedders writing c++ projects. please note that spidermonkey reserves the js:: namespace for itself (and the js:: ...
Gecko object attributes
f roles. applied to: any role group attributes level for headings, the heading level. for outline items, the indentation level. for diagrams with levels, each item can have its level specified. the level value is 1-based. applied to: grid, heading, listitem, row, tablist exposed in aria: aria-level posinset if this item is in a group, what is the item number within the group, where the
size is defined by the set
size attribute. the first item should have posinset="1", and the last item should have a posinset value equal to the set
size. applied to: listitem, option exposed in aria: aria-posinset set
size if this item is in a group, this indicates the number of items in the group. this is useful when combined with the posinset object attribute. applied to: listitem, option exposed...
... applied to: any role exposed via aria: aria-atomic live a hint as to whether changes within the current region or subtree should be automatically presented. ...
Gecko Roles
c os x) from which menus are selected by the user. role_scrollbar represents a vertical or horizontal scroll bar, which is part of the client area or used in a control. role_grip represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. for example, a user clicks and drags a sizing grip in the lower-right corner of a window to re
size it role_sound represents a system sound, which is associated with various system events. role_cursor represents the system mouse pointer. role_caret represents the system caret. role_alert represents an alert or a condition that a user should be notified about. assistive technologies typically respond to the role by reading the entire onscreen contents of container...
...le_chrome_window frame role. a top level window with a title bar, border, menu bar, etc. it is often used as the primary window for an application. role_glass_pane a glass pane. a pane that is guaranteed to be painted on top of all panes beneath it. role_html_container a document container for html, whose children represent the document content. role_icon a small fixed
size picture, typically used to decorate components. role_label presents an icon or short string in an interface. role_layered_pane a layered pane. a specialized pane that allows its children to be drawn in layers, providing a form of stacking order. this is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window. role_op...
Frecency algorithm
(places.frecency.bookmarkvisitbonus) .... 0 (places.frecency.downloadvisitbonus) .... 0 (places.frecency.permredirectvisitbonus) .... 0 (places.frecency.tempredirectvisitbonus) .... 0 (places.frecency.defaultvisitbonus) .. determine weight, based on how recent the visit was: .... 100 (places.frecency.firstbucketweight, 4 days bucket
size, in places.frecency.firstbucketcutoff) .... 70 (places.frecency.secondbucketweight, 14 days bucket
size, in places.frecency.secondbucketcutoff) .... 50 (places.frecency.thirdbucketweight, 31 days bucket
size, in places.frecency.thirdbucketcutoff) .... 30 (places.frecency.fourthbucketweight, 90 days bucket
size, in places.frecency.fourthbucketcutoff) .... 10 (pl...
... .... 70 (places.frecency.secondbucketweight, 14 days bucket
size, in places.frecency.secondbucketcutoff) .... 50 (places.frecency.thirdbucketweight, 31 days bucket
size, in places.frecency.thirdbucketcutoff) .... 30 (places.frecency.fourthbucketweight, 90 days bucket
size, in places.frecency.fourthbucketcutoff) .... 10 (places.frecency.defaultbucketweight, bucket
size in places.frecency.defaultbucketcutoff) .. points for each sampled visit = (bonus / 100.0) * weight final frecency score for visited uri = ceiling(total visit count * sum of points for sampled visits / number of sampled visits) example this is an example of a frecency calculation for a uri that is bookmarked and has been visited twice recently (once...
Places Expiration
all of expiration uses the storage async api, that ensures i/o is in a separate thread, plus it won't block any read thanks to the use of the wal journaling system. ...
... all of expiration uses the storage async api, that ensures i/o is in a separate thread, plus it won't block any read thanks to the use of the wal journaling system. ...
nsLocalFile
« xpcom api reference summary a component implementing nsilocalfile. ...
...11d3-8c4a-000064657374 contractid @mozilla.org/file/local;1 supported interfaces nsilocalfile, nsifile remarks this component should be accessed via the xpcom component manager. ...
IAccessibleImage
nd the image itself conveys semantically significant information. the user can edit the content that includes an image and therefore the user needs to be able to review the image's position. method overview [propget] hresult description([out] bstr description ); [propget] hresult imageposition([in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); [propget] hresult image
size([out] long height, [out] long width ); methods description() returns the localized description of the image. [propget] hresult description( [out] bstr description ); parameters description the localized description of the image. return value s_false if there is nothing to return, [out] value is null. s_ok. imageposition() returns the coordinates of the image. [propget] hresult imagepositi...
...ing to return, [out] value is null. s_ok. imageposition() returns the coordinates of the image. [propget] hresult imageposition( [in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); parameters coordinatetype specifies whether the returned coordinates should be relative to the screen or the parent object. x the x coordinate. y the y coordinate. return value s_ok. image
size() returns the
size of the image in units specified by parent's coordinate system. [propget] hresult image
size( [out] long height, [out] long width ); parameters height the height of the image. width the width of the image. return value s_ok. ...
IAccessibleRelation
[propget] hresult localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok. ntargets() returns the number of targets() for this relation. [propget] hresult ntargets( [out] lo...
...essible relation target. [propget] hresult target( [in] long targetindex, [out] iunknown target ); parameters targetindex 0 based index. target return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. targets() returns multiple accessible relation targets. [propget] hresult targets( [in] long maxtargets, [out,
size_is(maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); parameters maxtargets maximum
size of the array allocated by the client. targets the array of target objects. note that this array is to be allocated by the client and freed when no longer needed. refer to @ref _arrayconsideration "special consideration when using arrays" for more details. you will need to use quer...
amIWebInstallPrompt
toolkit/mozapps/extensions/amiwebinstalllistener.idlscriptable called when installation by websites is currently disabled. ...
... auri the uri of the site that triggered the installs. ainstalls the addoninstalls that were requested. ...
inIDOMUtils
colornametorgb(in domstring acolorname); nsiarray getbindingurls(in nsidomelement aelement); nsidomnodelist getchildrenfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long long getcontentstate(in nsidomelement aelement); void getcsspropertynames([optional] in unsigned long aflags, [optional] out unsigned long acount, [retval, array,
size_is(acount)] out wstring aprops); nsisupportsarray getcssstylerules(in nsidomelement aelement, [optional] in domstring apseudo); nsidomnode getparentfornode(in nsidomnode anode, in boolean ashowinganonymouscontent); unsigned long getruleline(in nsidomcssstylerule arule); unsigned long getrulecolumn(in nsidomcssstylerule arule); unsigned long getselecto...
... in nsidomelement aelement ); parameters aelement a dom element to retrieve the content states of. return value a bitmask of one of the 6 supported content state flags specified in content state flags. getcsspropertynames() get a list of all our supported property names void getcsspropertynames( in unsigned long aflags, optional out unsigned long acount, optional [retval, array,
size_is(acount)] out wstring aprops ); parameters aflags optional shorthands can be excluded or property aliases included. see constants. acount optional count aprops properties getcssstylerules() returns an array of the css style rules on the specified element. nsisupportsarray getcssstylerules( in nsidomelement aelement, in domstring apseudo optional ); parameters aelement a ...
mozIAsyncFavicons
void getfaviconurlforpage( in nsiuri apageuri, in nsi...
...nlinkforicon/page will ignore any associated data if the favicon uri is "chrome:" and just return the same chrome uri. this function does not send out notifications that the data has changed. pages using this favicons that are visible in history or bookmarks views will keep the old icon until they have been refreshed by other means. void replacefavicondata( in nsiuri afaviconuri, [const,array,
size_is(adatalen)] in octet adata, in unsigned long adatalen, in autf8string amimetype, [optional] in prtime aexpiration); parameters afaviconuri uri of the favicon whose data is being set. adata binary contents of the favicon to save. adatalen length of binary data amimetype mime type of the data to store. this is important so that we kn...
mozIPersonalDictionary
read only. methods a...
...the word to check. lang the language of the word. note that this parameter is currently ignored. return value true if the word is in either the dictionary or the ignore list, false if it is not in either list. endsession() clears the ignore list. void endsession(); parameters none. getcorrection() gets a list of previous corrections for the word. void getcorrection( in wstring word, [array,
size_is(count)] out wstring words, out pruint32 count ); parameters word the word to get the list of corrections for. words the list of corrections. count the number of corrections in the list. ignoreword() adds a word to the ignore all list. void ignoreword( in wstring word ); parameters word the word to add to the ignore list. load() loads the dictionary. void load(); parameters none. rem...
nsIAccessNode
; parameters childnum zero-based child index. return value the nth nsiaccessnode child. exceptions thrown ns_error_failure indicates that the access node is unattached from the accessible tree. getcomputedstylecssvalue() retrieve the computed style value as nsidomcssprimitivevalue for the dom node this access node is associated with. note: the meanings of width, height and other
size measurements depend on the version of css being used. therefore, for bounds information, it is better to use nsiaccessible.getbounds(). nsidomcssprimitivevalue getcomputedstylecssvalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or empty string for general computed style information for the node. propertyname re...
...propertyname retrieve the computed style value for this property name. return value the nsidomcssprimitivevalue computed style value. exceptions thrown ns_error_failure indicates that the access node is unattached from the accessible tree. getcomputedstylevalue() retrieve the computed style value for this dom node, if it is a dom element. note: the meanings of width, height and other
size measurements depend on the version of css being used. therefore, for bounds information, it is better to use nsiaccessible.getbounds(). domstring getcomputedstylevalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or null for general computed style information for this node. propertyname retrieve the computed styl...
nsIAccessibleImage
accessible/public/nsiaccessibleimage.idlscriptable this interface allows in-process accessibility clients to retrieve information about an image. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getimageposition(in unsigned long coordtype, out long x, out long y); void getimage
size(out long width, out long height); methods getimageposition() returns the coordinates of the image accessible. this method is the same as nsiaccessible.getbounds() excepting coordinate origin parameter. void getimageposition( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype). x the x coord...
...( in unsigned long coordtype, out long x, out long y ); parameters coordtype specifies coordinates origin (for available constants refer to nsiaccessiblecoordinatetype). x the x coordinate of the image accessible position. y the y coordinate of the image accessible position. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. getimage
size() returns the
size of the image accessible. this method is the same as nsiaccessible.getbounds(). void getimage
size( out long width, out long height ); parameters width the width of the image accessible. height the height of the image accessible. exceptions thrown ns_error_failure indicates that the accessible is unattached from the accessible tree. ...
nsIApplicationCache
nstants section. all application caches with the same group id belong to a cache group. each group has one "active" cache that will service future loads. inactive caches are removed from the cache when no longer referenced. ...
... the cache. discard() discards this application cache. this removes all resources it has cached. if this is the active application cache for the group, the group is removed. void discard(); parameters none. gatherentries() returns a list of entries in the cache whose type matches one or more of the specified types. void gatherentries( in pruint32 typebits, out unsigned long count, [array,
size_is(count)] out string keys ); parameters typebits a bit field indicating the types against which to match. see constants for a list of types. count on return, indicates how many matching entries were found. keys an array of the keys matching one or more of the types indicated by typebits. getmatchingnamespace() returns the most specific namespace matching a given key. nsiapplicationcachenamesp...
nsIApplicationCacheService
note: this method should propagate the entry to other application caches with the same opportunistic namespace; however, this is not currently implemented. void cacheopportunistically( in nsiapplicationcache cache, in acstring key ); parameters ...
...siapplicationcache object for the specified client id. nsiapplicationcache getapplicationcache( in acstring clientid ); parameters clientid the client id for which to return the application cache object. return value the application cache object for the specified client id. getgroups() returns the list of application cache groups. void getgroups( out unsigned long count, optional [array,
size_is(count), retval] out string groupids ); parameters count optional the count of the application cache groups. groupids the list of application cache groups. see also offline resources in firefox nsiapplicationcache nsiapplicationcachecontainer nsiapplicationcachechannel nsiapplicationcachenamespace nsidomofflineresourcelist ...
nsIApplicationUpdateService
read only. canapplyupdates boolean true if the update service can download and install updates. indicates if the current user has access privileges to the install directory. read only.
...s none. removedownloadlistener() removes a listener that is receiving progress and state information about the update that is currently being downloaded. void removedownloadlistener( in nsirequestobserver listener ); parameters listener the listener object to remove. selectupdate() selects the best update to install from a provided list of available updates. nsiupdate selectupdate( [array,
size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount ); parameters updates an array of updates that are available to install. updatecount the number of updates in the updates array. return value an nsiupdate object indicating the most appropriate update to install. see also nsiupdate nsiupdatechecklistener nsiupdatechecker nsiupdatepatch nsiupdatemanager nsiupdateprompt nsiup...
nsIBinaryOutputStream
gh-order byte first), as this is traditional network order. inherits from: nsioutputstream last changed in gecko 1.7 method overview void setoutputstream(in nsioutputstream aoutputstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write32(in pruint32 a32); void write64(in pruint64 a64); void writeboolean(in prbool aboolean); void writebytearray([array,
size_is(alength)] in pruint8 abytes, in pruint32 alength); void writebytes(alength)] in string astring, in pruint32 alength); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); void writeutf8z(in wstring astring); void writewstringz(in wstring astring); methods setoutputstream() sets the stream to which output is directed. void s...
...n pruint64 a64 ); parameters a64 the 64-bit integer to write to the stream. writeboolean() writes a boolean value (as a byte) to the stream. void writeboolean( in prbool aboolean ); parameters aboolean the boolean value to write to the stream; the value will consist of one byte in the output stream. writebytearray() writes an opaque byte array to the stream. void writebytearray( [array,
size_is(alength)] in pruint8 abytes, in pruint32 alength ); parameters abytes the bytes to write to the stream. alength the number of bytes to write to the stream. writebytes() writes an opaque byte array to the stream. void writebytes( [
size_is(alength)] in string astring, in pruint32 alength ); parameters astring the byte array to write to the stream. alength the number of bytes to write ...
nsIBrowserHistory
g atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array,
size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); void removepagesbytimeframe(in long long abegintime, in long long aendtime); void removepagesfromhost(in autf8string ahost, in boolean aentiredomain); void removevisitsbytimeframe(in long long abegintime, in long long aendtime); void unregisteropenpage(in nsiuri auri); obsol...
...page( in nsiuri auri ); parameters auri the added page which is to be removed. removepages() removes multiple pages from history using a batch. note: if removing fewer than 10 pages, calling removepage() repeatedly is preferable over calling this, since that's about the point at which the overhead of setting up a batch operation doesn't make sense anymore. void removepages( [array,
size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify /* parameter removed in gecko 9.0 */ ); parameters auris an array of page uris to be removed from history. alength the number of pages listed in the auris array. adobatchnotify obsolete since gecko 9.0 if set to true, the beginupdatebatch and endupdatebatch events are sent; otherwise, no notification o...
nsICRLManager
security/manager/ssl/public/nsicrlmanager.idlscriptable please add a summary to this article. ...
... in unsigned long autoupdatetype, in double noofdays ); parameters info autoupdatetype noofdays return value deletecrl() delete the crl. void deletecrl( in unsigned long crlindex ); parameters crlindex getcrls() get a list of crl entries in the db. nsiarray getcrls(); parameters none. return value importcrl() import a crl into the certificate database. void importcrl( [array,
size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey ); parameters data length uri type dosilentdownload crlkey reschedulecrlautoupdate() this would reschedule the autoupdate of crls with auto update enable. void reschedulecrlautoupdate(); parameters none. updatecrlfromurl() update an existing ...
nsIClassInfo
xpcom/components/nsiclassinfo.idlscriptable provides information about a specific implementation class. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsisupports gethelperforlanguage(in pruint32 language); void getinterfaces(out pruint32 count, [array,
size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null. read only. classid nscidptr a classid through which an instance of this class can be created, or null. if the flags attribute has the singleton bit set, then the value of this attribute specifies a classid through which this class can b...
...guage. getinterfaces() this method returns an ordered list of interfaces iids that instances of the class promise to implement. note that nsisupports is an implicit member of the implemented set of interfaces and need not be included. if this method is not supported by an implementation, then it should return 0 for count and null for array. void getinterfaces( out pruint32 count, [array,
size_is(count), retval] out nsiidptr array ); parameters count the length of the resulting array. array the resulting array of nsiidptr values. remarks this interface was finalized (frozen) for gecko 0.9.6. see bug 99158 for details. from gecko 2.0 interfaces are no longer frozen. see also using nsiclassinfo ...
nsIClipboard
. ...
...oard to which this operation applies. hasdatamatchingflavors() this method provides a way to give correct ui feedback about, for instance, whether a paste should be allowed. it does not actually retrieve the data and should be a very inexpensive call. all it does is check if there is data on the clipboard matching any of the flavors in the given list. boolean hasdatamatchingflavors( [array,
size_is(alength)] in string aflavorlist, in unsigned long alength, in long awhichclipboard ); parameters aflavorlist an array of ascii strings. alength the length of the aflavorlist. awhichclipboard specifies the clipboard to which this operation applies. return value returns true, if data is present and it matches the specified flavor. otherwise it returns false. setdata() this met...
nsIContentPrefService2
void getbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); nsicontentpref getcachedbydomainandname(in astring domain, in astring name, in nsiloadcontext context); void getcachedbysubdomainandname(in astring domain, in astring name, in nsiloadcontext context, out unsigned long len, [retval,array,
size_is(len)] out nsicontentpref prefs); nsicontentpref getcachedglobal(in astring name, in nsiloadcontext context); void getglobal(in astring name, in nsiloadcontext context, in nsicontentprefcallback2 callback); void removealldomains(in nsiloadcontext context, [optional] in nsicontentprefcallback2 callback); void removeallglobals(in nsi...
...rray through the out-parameter. if a preference for a particular subdomain is known not to exist, then an object corresponding to that preference will be present in the array, and, as with getcachedbydomainandname(), its value attribute will be undefined. void getcachedbysubdomainandname( in astring domain, in astring name, in nsiloadcontext context, out unsigned long len, [retval,array,
size_is(len)] out nsicontentpref prefs ); parameters domain the preferences' domain. name the preferences' name. context the private-browsing context, if any. len the length of the returned array. prefs the array of preferences. getcachedglobal() synchronously retrieves from the in-memory cache the preference with no domain and t...
nsIContentSniffer
nt sniffer interface. components implementing this interface can determine a mime type from a chunk of bytes. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to implement this interface use net-content-sniffers category. see netwerk/build/nsnetcid.h about ns_content_sniffer_category. method overview acstring getmimetypefromcontent(in nsirequest arequest, [const,array,
size_is(alength)] in octet adata, in unsigned long alength); methods getmimetypefromcontent() given a chunk of data, determines a mime type. information from the given request may be used in order to make a better decision. note: implementations should consider the request read-only. especially, they should not attempt to set the content type property that subclasses of nsirequest might offer. a...
...tmimetypefromcontent() given a chunk of data, determines a mime type. information from the given request may be used in order to make a better decision. note: implementations should consider the request read-only. especially, they should not attempt to set the content type property that subclasses of nsirequest might offer. acstring getmimetypefromcontent( in nsirequest arequest, [const,array,
size_is(alength)] in octet adata, in unsigned long alength ); parameters arequest the request where this data came from. may be null. adata data to check. alength length of the data. return value the content type. example how to read content from adata. let charset = "iso-8859-1"; try { // this pref has been removed, see bug 910192 charset = services.pr...
nsIConverterOutputStream
/ seamonkey 1.0) implemented by: @mozilla.org/intl/converter-output-stream;1. ...
...outputstream aoutstream, in string acharset, in unsigned long abuffer
size, in prunichar areplacementcharacter); methods init() initialize this stream. must be called before any other method on this interface, or you will crash. the output stream passed to this method must not be null, or you will crash. void init( in nsioutputstream aoutstream, in string acharset, in unsigned long abuffer
size, in prunichar areplacementcharacter ); parameters aoutstream the underlying output stream to which the converted strings will be written. acharset the character set to use for encoding the characters. a null charset will be interpreted as utf-8. abuffer
size how many bytes to buffer. a value of 0 means that no bytes will be buffered. implementations not supporting buffering may ignore this par...
nsICookieStorage
ouraged since it could be removed at any time. try to avoid using it. this interface represents the storage repository for cookies. modules/plugin/base/public/nsicookiestorage.idlnot scriptable please add a summary to this article. last changed in gecko 1.7 inherits from: nsisupports method overview void getcookie(in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookie
size); void setcookie(in string acookieurl, in constvoidptr acookiebuffer, in unsigned long acookie
size); methods getcookie() retrieves a cookie from the browser's persistent cookie store. void getcookie( in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookie
size ); parameters acookieurl url string to look up cookie with.. acookiebuffer buffer large enough to accommod...
...tring acookieurl, in constvoidptr acookiebuffer, in unsigned long acookie
size); methods getcookie() retrieves a cookie from the browser's persistent cookie store. void getcookie( in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookie
size ); parameters acookieurl url string to look up cookie with.. acookiebuffer buffer large enough to accommodate cookie data. acookie
size on input,
size of the cookie buffer, on output cookie's
size. setcookie() stores a cookie in the browser's persistent cookie store. void setcookie( in string acookieurl, in constvoidptr acookiebuffer, in unsigned long acookie
size ); parameters acookieurl url string to look up cookie with.. acookiebuffer buffer containing cookie data. acookie
size specifies
size of cookie data. see a...
nsICryptoHMAC
public/nsicryptohmac.idlscriptable this interface provides hmac signature algorithms. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsikeyobject akeyobject); void reset(); void update([const, array,
size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hashing algorithms. these values are to be used by the init() method to indicate which hashing function to use. these values map onto the values defined in mozilla/security/nss/lib/softoken/pkcs11t.h and are switched to ckm_*_hmac constant. c...
...keyobjectfactory) .keyfromstring(components.interfaces.nsikeyobject.hmac, rawkeydata); exceptions thrown ns_error_invalid_arg if an unsupported algorithm type is passed. reset() reinitialize hmac context to be reused with the same settings (the key and hash algorithm) but on different set of data. void reset(); parameters none. update() void update( [const, array,
size_is(alen)] in octet adata, in unsigned long alen ); parameters adata a buffer to calculate the hash over. alen the length of the buffer adata. exceptions thrown ns_error_not_initialized if init() has not been called. updatefromstream() calculates and updates a new hash based on a given data stream. void updatefromstream( in nsiinputstream astream, in unsigned lon...
nsICryptoHash
d2, md5, sha-1, sha-256, sha-384, and sha-512. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array,
size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hash algorithms these constants are used by the init() method to indicate which hashing function to use. the values map directly onto the values defined in mozilla/security/nss/lib/cryptohi/hasht.h. constant value description ...
...withstring( in acstring aalgorithm ); parameters aalgorithm the hash algorithm type to be used as a string, such as "sha256". exceptions thrown ns_error_invalid_arg indicates that an unsupported algorithm type was passed update() adds an array of data to be hashed to the object. see computing the hash of a string for an example of using this method. void update( [const, array,
size_is(alen)] in octet adata, in unsigned long alen ); parameters adata a buffer to calculate the hash over. alen the length of the buffer adata. exceptions thrown ns_error_not_initialized indicates that init() or initwithstring() has not been called. updatefromstream() calculates and updates a new hash based on a given data stream (nsiinputstream). see computing the hash of a file...
nsIDOMHTMLTimeRanges
tmltimeranges object. read only. methods end() returns the time offset to the end of the specified time range. float end( in unsigned long index ); parameters index the index to the time range whose end time is to be returned. return value the time at which the specified range ends, in seconds measured from the beginning of the timeline represented by the object. exceptions thrown index_
size_err the specified index is not valid. start() returns the time offset to the start of the specified time range. float start( in unsigned long index ); parameters index the index to the time range whose start time is to be returned. return value the time at which the specified range starts, in seconds measured from the beginning of the timeline represented by the object. exceptions thrown i...
...the specified index is not valid. start() returns the time offset to the start of the specified time range. float start( in unsigned long index ); parameters index the index to the time range whose start time is to be returned. return value the time at which the specified range starts, in seconds measured from the beginning of the timeline represented by the object. exceptions thrown index_
size_err the specified index is not valid. ...
nsIDOMWindowInternal
if the name doesn't exist, then a new window is opened and the specified resource is loade...
...if the name doesn't exist, then a new window is opened and the specified resource is loaded into its browsing context.">open(in domstring url, i...
nsIDictionary
66 introduced gecko 1.0 obsolete gecko 1.9.1 inherits from: nsisummary last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: this interface was removed in firefox 3.5; use dict.jsm instead. see bug 668424 for further information. method overview boolean haskey(in string key); void getkeys(out pruint32 count, [retval, array,
size_is(count)] out string keys); nsisupports getvalue(in string key); void setvalue(in string key, in nsisupports value); nsisupports deletevalue(in string key); void clear(); methods haskey() check if a given key is present in the dictionary. boolean haskey( in string key ); parameters key key to check for. return value true if present, f...
...rts value); nsisupports deletevalue(in string key); void clear(); methods haskey() check if a given key is present in the dictionary. boolean haskey( in string key ); parameters key key to check for. return value true if present, false if absent. getkeys() retrieve all keys in the dictionary. void getkeys( out pruint32 count, [retval, array,
size_is(count)] out string keys ); return value array of all keys, unsorted. getvalue() find the value indicated by the key. nsisupports getvalue( in string key ); parameters key the lookup key indicating the value. return value the value associated with the specified key. if the key doesn't exist, ns_error_failure is returned. setvalue() add the key-value pair to the dictionary...
nsIDocShell
llowmetaredirects boolean attribute stating if refresh based redirects can be allowed. allowplugins boolean whether to allow plugin execution. allowsubframes boolean attribute stating if it should allow subframes (framesets/iframes) or not. allowwindowcontrol boolean specifies whether or not content is allowed to control the window (that is, to re
size or move the window). default is true, which lets content control the window. apptype unsigned long the type of application that created this window. types are defined in constants. busyflags unsigned long current busy state for docshell. valid states are defined in constants. read only. canexecutescripts boolean whether this docshell can execute scrip...
...hether error pages are enabled. zoom float set/get the document scale factor. when setting this attribute, a ns_error_not_implemented error may be returned by implementations not supporting zoom. implementations not supporting zoom should return 1.0 all the time for the get operation. 1.0 by the way is the default of zoom. this means 100% of normal scaling or in other words normal
size no zoom. constants constant value description internal_load_flags_none 0x0 used as a placeholder when you don't want to explicitly specify flags. internal_load_flags_inherit_owner 0x1 used to indicate that it may be safe to inherit the owner of a javascript: or data: url from the existing document. internal_load_flags_dont_send_referrer ...
nsIDroppedLinkHandler
boolean candroplink( in nsidomdragevent aevent, in prbool aallowsamedocument ); parameters aevent a dragenter or dragover event. aallowsamedocument if false, drops are only allowed if the document of the source of the drag is different from the destination. th...
...a dragging a chrome url for example. droplinks() given a drop event, determines the link being dragged. if non-empty links array is returned the caller can, for instance, load it. if empty links array is returned, there is no valid link to be dropped. void droplinks( in nsidomdragevent aevent, [optional] in boolean adisallowinherit, [optional] out unsigned long acount, [retval, array,
size_is(acount)] out nsidroppedlinkitem alinks ); parameters aevent a drop event. adisallowinherit acount receives the count of alinks array alinks recives an array of objects with nsidroppedlinkitem interface return value nothing. see also nsidroppedlinkitem ...
nsIEditorSpellCheck
mponents.interfaces.nsieditorspellcheck); method overview void addwordtodictionary(in wstring word); boolean canspellcheck(); void checkcurrentdictionary(); boolean checkcurrentword(in wstring suggestedword); boolean checkcurrentwordnosuggest(in wstring suggestedword); astring getcurrentdictionary(); void getdictionarylist([array,
size_is(count)] out wstring dictionarylist, out pruint32 count); wstring getnextmisspelledword(); void getpersonaldictionary(); wstring getpersonaldictionaryword(); wstring getsuggestedword(); void ignorewordalloccurrences(in wstring word); void initspellchecker(in nsieditor editor, in boolean enableselectionchecking); void removewordfromd...
...onary() returns the name of the dictionary currently in use. astring getcurrentdictionary(); parameters none. return value the name of the dictionary currently in use. typically, this is an iso language code, such as "en-us". getdictionarylist() retrieves a list of the currently available dictionaries. the strings will typically be language ids, such as "en-us". void getdictionarylist( [array,
size_is(count)] out wstring dictionarylist, out pruint32 count ); parameters dictionarylist an array into which the list of dictionary name strings are placed. count on return, contains the number of entries in the dictionarylist array. getnextmisspelledword() when interactively spell checking the document, this will return the value of the next word that is misspelled. this also ...
nsIFaviconDataCallback
toolkit/components/places/public/nsifaviconservice.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,
size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's information is available. it's up to the invoking method to state if the callback is always invoked, or called on success only. check the method documentation to ensure that. the caller will receive the most information we can gather on the icon, but it's not guaranteed that all of them will be set. for some...
...t's not guaranteed that all of them will be set. for some method we could not know the favicon's data (it could just be too expensive to get it, or the method does not require we actually have any data). it's up to the caller to check adatalen > 0 before using any data-related information like mime-type or data itself. void oncomplete( in nsiuri auri, in unsigned long adatalen, [const,array,
size_is(adatalen)] in octet adata, in autf8string amimetype ); parameters auri receives the "favicon uri" (not the "favicon link uri") associated to the requested page. this can be null if there is no associated favicon uri, or the callback is notifying a failure. adatalen
size of the icon data in bytes. notice that a value of 0 does not necessarily mean that we don't ...
nsIFrameLoader
this can be used to decide what operations may or may not be allowed on the loader's docshell. read only. docshell nsidocshell...
...mouse event to send. ax the x coordinate of the mouse. ay the y coordinate of the mouse. abutton which button was clicked, if any. aclickcount the number of clicks comprising the mouse button event, if any. amodifiers the modifier keys in effect at the time of the event. aignorerootscrollframe optional whether or not to ignore the root scroll frame. native code only!updatepositionand
size updates the position and
size of the subdocument loaded by this frameloader. void updatepositionand
size( in nsiframe aiframe ); parameters aiframe the nsiframe for the content node that owns this frameloader. see also content process event handling nsiframeloaderowner nsiframemessagelistener nsichromeframemessagemanager nsidomwindowutils ...
nsILocalFile
file open mode string, which will be passed to fopen(). return value a pointer to an ansi file type. example #include <stdio.h> #include "nserror.h" #include "nsilocalfile.h" // read the contents of a nsilocalfile... nsresult readlocalfile(nsilocalfile *alocalfile) { file *fp; nsresult rv = alocalfile->openansifiledesc("r", &fp); if (ns_failed(rv)) return rv; char buf[512];
size_t n; while ((n = fread(buf,
sizeof(buf), 1, fp)) > 0) { // do something with n-byte block of data from file... } if (ferror(fp) != 0) rv = ns_error_unexpected; fclose(fp); return rv; } native code only! opennsprfiledesc returns the result of pr_open() on the file. the caller is responsible for calling pr_close() on the result. prfiledescstar opennsprfiledesc( in...
...ile. returns a null pointer if the open failed. example #include "prio.h" #include "nserror.h" #include "nsilocalfile.h" // read the contents of a nsilocalfile... nsresult readlocalfile(nsilocalfile *alocalfile) { prfiledesc *fd; nsresult rv = alocalfile->opennsprfiledesc(pr_rdonly, 0, &fd); if (ns_failed(rv)) return rv; char buf[512]; print32 n; while ((n = pr_read(fd, buf,
sizeof(buf))) > 0) { // do something with n-byte block of data from file... } if (n < 0) rv = ns_error_unexpected; pr_close(fd); return rv; } reveal() ask the operating system to open the folder which contains this file or folder. this routine only works on platforms which support the ability to open a folder. see the note in the remarks below. void reveal(); parameters none...
nsILoginManagerPrompter
must be called before using other interfaces. void init( in nsidomwindow awindow ); parameters awindow the in which the user is doing some login-related action that is resulting in a need to prompt t...
... of multiple logins, when the caller can not determine exactly which login should be changed. if the user consents, modifylogin() will be called. note: because the caller does not know the username of the login to be changed, anewlogin.username and anewlogin.usernamefield will be set (using the user's selection) before modifylogin() is called. void prompttochangepasswordwithusernames( [array,
size_is(count)] in nsilogininfo logins, in pruint32 count, in nsilogininfo anewlogin ); parameters logins an array of existing logins. count (length of the array) anewlogin the new login. prompttosavepassword() ask the user if they want to save a login (yes, never, not now) void prompttosavepassword( in nsilogininfo alogin ); parameters alogin the login to be saved. ...
nsIMemoryReporterManager
note: it covers all heap allocations, but will miss any operating system level ones not covered by memory reporters. this reporter is special-cased because it is interesting, and is moderately difficult ...
...(for example, via malloc(), calloc(), operator new). note: it covers all heap allocations, but will miss any operating system level ones not covered by memory reporters. this reporter is special-cased because it is interesting, and is moderately difficult to compute in javascript. -1 means unknown. read only. resident print64 gets the resident
size (that is rss, physical memory used). this reporter is special-cased because it is interesting, is available on all platforms, and returns a meaningful result on all common platforms. -1 means unknown. read only. methods enumeratemultireporters() returns an enumerator for looking at the installed memory multi-reporters. nsisimpleenumerator enumeratemultireporters(); parameters n...
nsIMimeHeaders
methods extractheader() string extractheader( [const] in string headername, in boolean getallofthem ); parameters headername missing description getallofthem missing description return value missing description exceptions ...
...methods extractheader() string extractheader( [const] in string headername, in boolean getallofthem ); parameters headername missing description getallofthem missing description return value missing description exceptions thrown missing exception missing description initialize() void initialize( [const] in string allheaders, in long allheaders
size ); parameters allheaders insert the complete message content allheaders
size length of the passed in content exceptions thrown missing exception missing description remarks see also ...
nsIMsgHeaderParser
s(in astring aname, in astring aaddress); string makefulladdressstring(in string aname, in string aaddress); wstring makefulladdresswstring(in wstring name, in wstring addr); obsolete since gecko 1.9 void parseheaderaddresses(in string line, out string names, out string addresses, out pruint32 numaddresses); void parseheaderswitharray(in wstring aline, [array,
size_is(count)] out wstring aemailaddresses, [array,
size_is(count)] out wstring anames, [array,
size_is(count)] out wstring afullnames, [retval] out unsigned long count); void reformatheaderaddresses(in string line, out string reformattedaddress); wstring reformatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prb...
...er line. the addresses are separated by null-terminators. this param may be null if the caller does not want this part of the result. numaddresses the number of addresses in the header. if this is negative, there has been an error parsing the header. exceptions thrown missing exception missing description parseheaderswitharray() void parseheaderswitharray( in wstring aline, [array,
size_is(count)] out wstring aemailaddresses, [array,
size_is(count)] out wstring anames, [array,
size_is(count)] out wstring afullnames, [retval] out unsigned long count ); parameters aline the header line to parse. aemailaddresses missing description anames missing description afullnames missing description count missing description exceptions thrown missing exception missin...
nsIMsgIncomingServer
f boolean downloadsettings nsimsgdownloadsettings emptytrashonexit boolean filterscope nsmsgsearchscopevalue read only. hostname acstring hostname of the server. incomingduplicateaction long isdeferredto boolean read only. issecure boolean issecureserver boolean read only. key acstring internal pref key - guaranteed to be unique across all servers. ...
... issecure boolean issecureserver boolean read only. key acstring internal pref key - guaranteed to be unique across all servers. limitofflinemessage
size boolean localpath nsilocalfile localstoretype acstring the schema for the local mail store, such as "mailbox", "imap", or "news" used to construct uris. read only. loginatstartup boolean logonfallback boolean maxmessage
size long offlinesupportlevel long password acstring passwordpromptrequired boolean if the password for the server is available either via authentication in the current session or from password manager stored entries, return false. otherwise, return true. if password is obtained from password manager, set the password member variable. read only. performingbiff boolean port long p...
nsINavBookmarksService
endupdatebatch(); obsolete since gecko 1.9 void exportbookmarkshtml(in nsifile file); obsolete since gecko 1.9 nsiuri getbookmarkedurifor(in nsiuri auri); void getbookmarkfolderstarray(in nsiuri auri, in print64array aresult); native code only! obsolete since gecko 1.9 void getbookmarkidsforuri(in nsiuri auri, [optional] out unsigned long count, [array, retval,
size_is(count)] out long long bookmarks); note: renamed from getbookmarkfolders in gecko 1.9 void getbookmarkidsforuritarray(in nsiuri auri, in print64array aresult); native code only! obsolete since gecko 2.0 nsiuri getbookmarkuri(in long long aitemid); long long getchildfolder(in long long afolder, in astring asubfolder); obsolete since gecko 2.0 long long getfo...
...rray( in nsiuri auri, in print64array aresult ); parameters auri aresult returns an nsiuri representing the uri whose bookmark is to be retrieved. if there is no bookmarked page found, it will return null. this method retrieves the list of bookmark ids that contain the given uri. void getbookmarkidsforuri( in nsiuri auri, out unsigned long count, optional [array, retval,
size_is(count)] out long long bookmarks ); parameters auri the uri whose list of bookmark ids is to be retrieved. count the count of bookmark ids. bookmarks the list of bookmark ids. native code only!getbookmarkidsforuritarray obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discoura...
nsINavHistoryQueryResultNode
o 1.8 inherits from: nsinavhistorycontainerresultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: if you request that places not be expanded in the options that generated the node, the node will report that it has no children and will never try to populate itself. method overview void getqueries([optional] out unsigned long querycount, [retval,array,
size_is(querycount)] out nsinavhistoryquery queries); attributes attribute type description folderitemid long long for both simple folder nodes and simple-folder-query nodes, this is set to the concrete itemid of the folder. otherwise, this is set to -1. read only. queryoptions nsinavhistoryqueryoptions the options that group the node's children; only valid for result_type_query nodes. read...
...of the folder. otherwise, this is set to -1. read only. queryoptions nsinavhistoryqueryoptions the options that group the node's children; only valid for result_type_query nodes. read only. methods getqueries() returns the queries that build the node's children; only valid for result_type_query nodes. void getqueries( out unsigned long querycount, optional from gecko 2.0 [retval,array,
size_is(querycount)] out nsinavhistoryquery queries ); parameters querycount optional from gecko 2.0 the number of queries in the queries array. queries an array of nsinavhistoryquery objects describing the set of queries that build the node's children. there are querycount elements in the array. see also nsinavhistorycontainerresultnode nsinavhistoryquery ...
Component; nsIPrefBranch
getboolpref(in string aprefname, requires gecko 54 [optional] in boolean adefaultvalue); string getcharpref(in string aprefname,requires gecko 54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array,
size_is(acount), retval] out string achildarray); void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqiresult avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void lockpref(in string aprefname); boolean prefhasuservalue(in string a...
...f the root of this branch. note: this method can be called on either a default or user branch but, in effect, always operates on both. (to call from javascript use children = nsiprefbranch.getchildlist("",obj), which will fill in obj.value with the count and return an array of keys! (it is not void in javascript) void getchildlist( in string astartingat, out unsigned long acount, [array,
size_is(acount), retval] out string achildarray ); parameters astartingat the point on the branch at which to start enumerating the child preferences. pass in "" to enumerate all preferences referenced by this branch. acount optional from gecko 2.0 receives the number of elements in the array. achildarray receives the array of child preferences. getcomplexvalue() called to get the state o...
nsIPrinterEnumerator
widget/nsiprintoptions.idlscriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void displaypropertiesdlg(in wstring aprinter, in nsiprintsettings aprintsettings); void enumerateprinters(out pruint32 acount,[retval, array,
size_is(acount)] out wstring aresult); obsolete since gecko 1.9 void initprintsettingsfromprinter(in wstring aprintername, in nsiprintsettings aprintsettings); attributes attribute type description defaultprintername wstring the name of the system default printer. this name should also be present in printernamelist. this is not necessarily gecko's default printer; see nsiprint...
... methods displaypropertiesdlg() void displaypropertiesdlg( in wstring aprinter, in nsiprintsettings aprintsettings ); parameters aprinter aprintsettings enumerateprinters() obsolete since gecko 1.9 (firefox 3) returns an array of the names of all installed printers. void enumerateprinters( out pruint32 acount, [retval, array,
size_is(acount)] out wstring aresult ); parameters acount returns number of printers returned. aresult returns array of names. initprintsettingsfromprinter() initializes certain settings from the native printer into the printsettings these settings include, but are not limited to: page orientation, page
size, number of copies. void initprintsettingsfromprinter( in wstr...
nsIProcess2
3.5 / thunderbird 3.0 / seamonkey 2.0) gecko 1.9.2 note this interface was removed in gecko 1.9.2 and its method added to nsiprocess. implemented by: @mozilla.org/process/util;1. ...
...this array must have count entries. ...
nsIProfile
hasn't been used in firefox since before firefox 1.0. method overview void cloneprofile(in wstring profilename); void createnewprofile(in wstring profilename, in wstring nativeprofiledir, in wstring langcode, in boolean useexistingdir); void deleteprofile(in wstring name, in boolean candeletefiles); void getprofilelist(out unsigned long length, [retval, array,
size_is(length)] out wstring profilenames); boolean profileexists(in wstring profilename); void renameprofile(in wstring oldname, in wstring newname); void shutdowncurrentprofile(in unsigned long shutdowntype); attributes attribute type description currentprofile wstring the name of the profile currently in use. profilecount lo...
...ofile( in wstring name, in boolean candeletefiles ); parameters name the name of the profile to delete. candeletefiles if true, the profile manager will try to delete all of the profile's files and its directory. getprofilelist() returns an array of strings indicating the names of all the available profiles. void getprofilelist( out unsigned long length, [retval, array,
size_is(length)] out wstring profilenames ); parameters length on return, contains the number of profiles in the profilenames array. profilenames on return, contains an array of all of the available profiles' names. profileexists() determine whether or not a profile with the specified name exists. boolean profileexists( in wstring profilename ); parameters profilename th...
nsIPromptService
all flags are defined as unsigned long constants and can be accessed as components.interfaces.nsipromptservice.flagname from javascript and as nsipromptservice::flagname from c++. button position flags on linux and mac, button 2 is o...
...bject with its 'value' property set to a boolean (or use an empty object). return value true for ok, false for cancel select() shows a dialog box with a list box of strings from which the user may make a single selection. see also the select_example. boolean select( in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array,
size_is(acount)] in wstring aselectlist, out long aoutselection ); aparent the parent window for the dialog. if set to null the parent window will be nsiwindowwatcher.activewindow. adialogtitle text to appear in the title of the dialog. atext text to appear in the body of the dialog. acount length of the aselectlist array parameter. aselectlist list ...
nsIProperties
st changed in gecko 1.2 implemented by: @mozilla.org/file/directory_service;1. to get an instance, use: var properties = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties); method overview void get(in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result); void getkeys(out pruint32 count, [array,
size_is(count), retval] out string keys); boolean has(in string prop); void set(in string prop, in nsisupports value); void undefine(in string prop); methods get() gets the xpcom object associated with a particular name. void get( in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqiresult result ); parameters prop the property name. iid the desired interface. result the resu...
...object instance. exceptions thrown ns_error_failure if the property does not exist. ns_error_no_interface if the property exists, but does not support the requested interface. getkeys() returns an array of property names. nsmemory.h defines the macro ns_free_xpcom_allocated_pointer_array, which can be used to free akeys when it is no longer needed. void getkeys( out pruint32 count, [array,
size_is(count), retval] out string keys ); parameters count the length of the result array. keys the resulting array of keys. has() tests if a property exists. boolean has( in string prop ); parameters prop the property name. return value true if the property exists, false if the property does not exist. set() sets the xpcom object associated with a particular name. void set( in string prop,...
nsIPushSubscription
url generated by the push service. sending a post request to this url routes the message to the instance of firefox that created the subscription. a subscription also has a public key and secret; these are used to encrypt message payloads. this interface resembles pushsubscription from the push api. method overview void getkey(in domstring name, [optional] out uint32_t keylen, [array,
size_is(keylen), retval] out uint8_t key); bool quotaapplies(); bool isexpired(); attributes attribute type description endpoint domstring the subscription url. pushcount long long the total number of messages sent to this subscription. lastpush long long the last time a message was sent to this subscription, in mill...
...r can use these keys to encrypt and authenticate message payloads. the following key names are supported: p256dh the ecdh public key, used as the input keying material in the hkdf invocation during encryption. auth the shared authentication secret, used as the salt in the hkdf invocation. void getkey( in domstring name, [optional] out uint32_t keylen, [array,
size_is(keylen), retval] out uint8_t key ); parameters name the encryption key name. keylen the keying material length. key the byte array containing the keying material. keylen and key are out parameters. when called from javascript, nsipushsubscription.getkey() only takes name as a parameter, and returns key. please see method parameters in xpidl for more details on using out parameters...
nsIScriptableInputStream
3.3 / seamonkey 2.1) method overview unsigned long available(); void close(); void init(in nsiinputstream ainputstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream. note: this method should not be used to determine the total
size of a stream, even if the stream corresponds to a local file. moreover, since a stream may make available more than 2^32 bytes of data, this method is incapable of expressing the entire
size of the underlying data source. unsigned long available(); parameters none. return value the number of bytes. exceptions thrown ns_base_stream_closed if called after the stream has been closed. close...
...var scriptableinputstream = cc("@mozilla.org/scriptableinputstream;1", "nsiscriptableinputstream", "init"); var blah = { data: '', onstartrequest: function (arequest, acontext) { ...
nsISelection2
nherits from: nsiselection last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) in gecko 8.0 this interface was merged into the nsiselectionprivate interface. ...
...the type of the selection (see nsiselectioncontroller for available constants). read only. methods getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array,
size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. ...
nsISelectionPrivate
chedframeoffset(in nsiframe aframe, in print32 inoffset, in nspointref apoint); native code only! nsienumerator getenumerator(); nsframeselection getframeselection(); native code only! void getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array,
size_is(resultcount)] out nsidomrange results); void getrangesforintervalarray(in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only! void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacen...
...n(); parameters none. return value a reference to the frame selection associated with this selection. getrangesforinterval() return array of ranges intersecting with the given dom interval. void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32 resultcount, [retval, array,
size_is(resultcount)] out nsidomrange results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection. allowadjacent specifies whether the returned ranges are allowed to touch the input range rather than merely overlapping it. resultcount returns the number of ranges that overlap (or touch) the input range. ...
nsITaggingService
tagcontainericonspec autf8string retrieves the url spec for the tag container icon methods taguri() this method tags a uri with the given ...
...ri. geturisfortag() this method retrieves all uris tagged with the given tag. nsivariant geturisfortag( in astring atag ); parameters atag the tag name. return value returns array of uris tagged with atag. gettagsforuri() this method retrieves all tags set for the given uri. nsivariant gettagsforuri( in nsiuri auri, [optional] out unsigned long length, [retval, array,
size_is(length)] out wstring atags ); parameters auri the uri for which to return the tags. length optional on return, contains the number of tags returned in atags. this optional parameter was required prior to gecko 2.0. atags on return, contains an array of tags for the specified uri. return value returns array of tags (sorted by name). see also place...
nsITransferable
those that have been added to it with adddataflavor(). void getanytransferdata( out string aflavor, out nsisupports adata, out unsigned long adatalen ); parameters aflavor on return, contains the flavor of data that was retrieved. adata on return, this is the data itself, which is an instance of a class based upon nsisupportsprimitives. adatalen on return, this value contains the
size of the returned data. gettransferdata() returns the transfer data for a given flavor. void gettransferdata( in string aflavor, out nsisupports adata, out unsigned long adatalen ); parameters aflavor the flavor of data to retrieve. adata on return, this is the data itself, which is an instance of a class based upon nsisupportsprimitives. adatalen on return, this value contains ...
...the returned data. gettransferdata() returns the transfer data for a given flavor. void gettransferdata( in string aflavor, out nsisupports adata, out unsigned long adatalen ); parameters aflavor the flavor of data to retrieve. adata on return, this is the data itself, which is an instance of a class based upon nsisupportsprimitives. adatalen on return, this value contains the
size of the returned data. init() initializes a transferable object. this should be called on all transferable objects. failure to do so will result in fatal assertions in debug builds. void init( in nsiloadcontext acontext ); parameters acontext the load context associated with the transferable object. this can be set to null if a load context is not available. remarks the load context ...
nsIWebSocketListener
ebsocket/nsiwebsocketlistener.idlscriptable implement this interface to receive websocket traffic events asynchronously after calling nsiwebsocketchannel.asyncopen(). ...
...e(in nsisupports acontext, in unsigned short acode, in autf8string areason); void onstart(in nsisupports acontext); void onstop(in nsisupports acontext, in nsresult astatuscode); methods onacknowledge() called to acknowledge a message sent via nsiwebsocketchannel.sendmsg() or nsiwebsocketchannel.sendbinarymsg(). void onacknowledge( in nsisupports acontext, in pruint32 a
size ); parameters acontext user defined context. a
size number of bytes placed in os send buffer. onbinarymessageavailable() called when a binary message has been received. void onbinarymessageavailable( in nsisupports acontext, in acstring amsg ); parameters acontext user defined context. amsg the message data. onmessageavailable() called when a text message ...
nsIXPConnect
void flagsystemfilenameprefix(in string afilenameprefix, in prbool awantnativewrappers); void garbagecollect(); [noscript,notxpcom] void getcaller(out jscontex...
...orts acomobj, in short depth ); parameters acomobj missing description depth missing description exceptions thrown missing exception missing description definedomquickstubs() define quick stubs on the given object, @a proto. [noscript,notxpcom] prbool definedomquickstubs( in jscontextptr cx, in jsobjectptr proto, in pruint32 flags, in pruint32 interfacecount, [array,
size_is(interfacecount)] in nsiidptr interfacearray ); parameters cx a context. requires request. proto the (newly created) prototype object for a dom class. the js half of an xpcwrappednativeproto. flags property flags for the quick stub properties--should be either jsprop_enumerate or 0. interfacecount the number of interfaces the class implements. interfacearray the interfaces the cla...
nsIZipEntry
d in the zip file specification at zip application note support. read only. crc32 unsigned long the crc-32 hash of the file in the entry. read only. isdirectory boolean true if the name of the entry ends with '/' and false otherwise. read only. issynthetic boolean use this attribute to determine whether this item is an actual zip entry or is one synthe
sized for part of a real entry's path. a synthe
sized entry represents a directory within the zip file which has no corresponding entry within the zip file. for example, the entry for the directory foo/ in a zip containing exactly one entry for foo/bar.txt is synthetic. if the zip file contains an actual entry for a directory, this attribute will be false for the nsizipentry for that directory. it is i...
...y one entry for foo/bar.txt is synthetic. if the zip file contains an actual entry for a directory, this attribute will be false for the nsizipentry for that directory. it is impossible for a file to be synthetic. read only. lastmodifiedtime prtime the time at which this item was last modified. read only. name string read only. obsolete since gecko 1.9 real
size unsigned long the uncompressed
size of the data in the item. read only.
size unsigned long the compressed
size of the data in the item. read only. see also nsizipreader ...
nsIZipReaderCache
nsizipreader getinnerzip( in nsifile zipfile, in autf8string zipentry ); parameters zipfile the zip file. zipentry the zip entry. return value the nsizipreader for the given zip file. getzip() returns a (possibly shared) cached nsizipreader for a zip file. if th...
...otherwise the previously created nsizipreader is returned. note: if nsizipreader.close has been called on the shared nsizipreader, this method will return the closed nsizipreader nsizipreader getzip( in nsifile zipfile ); parameters zipfile the zip file. return value the nsizipreader for the given zip file. init() initializes a new zip reader cache. void init( in unsigned long cache
size ); parameters cache
size the number of released entries to maintain before beginning to throw some out. the number of outstanding entries can be much greater than this number, this is the count for those otherwise unused entries. see also nsizipreader ...
Performance
eps pages associated with the current transaction so it can roll them back, and it also keeps recently used ones so it can run faster. in the past, it flushed the cache at the end of a transaction (by default). in order to keep the cache active between transactions, you needed to have a second connection with a 'dummy' (and schema changing) transaction. that is not needed now. ...
...nsaction so it can roll them back, and it also keeps recently used ones so it can run faster. in the past, it flushed the cache at the end of a transaction (by default). in order to keep the cache active between transactions, you needed to have a second connection with a 'dummy' (and schema changing) transaction. that is not needed now. you can control the
size of the memory cache using the cache_
size pragma. this value controls the number of pages of the file that can be kept in memory at once. the page
size can be set using the page_
size pragma before any operations have been done on the file. you can see an example of setting the maximum cache
size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp. sharding the cache between connections b...
XPIDL
nsiidref const nsiid& nsiid* ? nscidref const nscid& nscid* ? n...
...(although some parts of the codebase are known to violate this, it is strictly enforced at the js<->native barrier), and also ensuring that boolean types only receive values of 0 (false) or 1 (true). representations of types additionally depend on some of the many types of properties they may have. the array property turns the parameter into an array; the parameter must also have a corresponding
size_is property whose argument is the parameter that has the
size of the array. in native code, the type gains another pointer indirection, and javascript arrays are used in script code. script code callers can ignore the value of array parameter, but implementors must still set the values appropriately. prefer using the array<t> builtin over the [array] attribute for new code. it is more ergonomic...
nsIMsgCloudFileProvider
splaying and setting provider-specific settings. this url should not point to external web content. managementurl acstring readonly: a chrome url for an xhtml page displayed within the filelink preferences dialog, used for displaying and setting provider-specific settings once the account has already been set up. this url should not point to external web content. fileupload
sizelimit long readonly: the upper
size limit in bytes for a file to be uploaded. if this value is not known, returns -1. remainingfilespace long long readonly: the remaining storage space available for this account in bytes. if this value is not known, returns -1. filespaceused long long readonly: the total amount of space used by this account. if this value is not...
...d when authorizing has failed. uploaderr 0x8055311a returned when uploading has failed for an unknown reason. uploadwouldexceedquota 0x8055311b returned when uploading has failed because the user has exceeded their storage quota. uploadexceedsfilelimit 0x8055311c returned when uploading has failed because the file being uploaded is larger than the file
size limit. uploadcanceled 0x8055311d returned when uploading has stopped because it was cancelled by the user. methods init() initializes an nsimsgcloudfileprovider to be associated with a particular account. this should probably be called immediately after instantiation. void init(in string aaccountkey); parameters uploadfile() starts a file upload for this account. ...
MailNews fakeserver
getarticle message id newsarticle object pretty self-explanatory newsarticle api name arguments returns notes [constructor] text (as a string) n/a initializes all fields headers (property) map of header (lower-case) -> value body (property) text of body messageid (property) message id ful...
... getarticle message id newsarticle object pretty self-explanatory newsarticle api name arguments returns notes [constructor] text (as a string) n/a initializes all fields headers (property) map of header (lower-case) -> value body (property) text of body messageid (property) message id fulltext (property) ful...
WebIDL bindings
tation section for more information on building this kind of structure. example interface for a pair value iterator: interface stringandlongiterable { iterable<domstring, long>; }; the bindings for this pair value iterator interface require the following methods be implemented in the c++ object: class stringandlongiterable { public: // returns the number of items in the iterable storage
size_t getiterablelength(); // returns key of pair at aindex in iterable storage nsastring& getkeyatindex(uint32_t aindex); // returns value of pair at aindex in iterable storage uint32_t& getvalueatindex(uint32_t aindex); } stringifiers named stringifiers operations in webidl will just invoke the corresponding c++ method. anonymous stringifiers in webidl will invoke the c++ method called ...
...gth() that returns the number of 32-bit ints in the array.. sequence<t> sequence<> is a type declared in bindingdeclarations.h and exported to mozilla/dom/bindingdeclarations.h that is used to represent sequence arguments. it's some kind of typed array, but which exact kind is opaque to consumers. this allows the binding code to change the exact definition (e.g., to use auto arrays of different
sizes and so forth) without having to update all the callees. callbackfunction callbackfunction is a type declared in callbackfunction.h and exported to mozilla/dom/callbackfunction.h that is used as a common base class for all the generated callback function representations. this class inherits from nsisupports, and consumers must make sure to cycle-collect it, since it keeps js objects alive. cal...
Using COM from js-ctypes
here. converted js-ctypes code here's converted code. this example uses busy loop and thus firefox won't respond until the speaking is done. if this code were used in a production add-on, then to avoid firefox locking up, run this code from a chromeworker. ...
... busy loop and thus firefox won't respond until the speaking is done. if this code were used in a production add-on, then to avoid firefox locking up, run this code from a chromeworker. ...
Standard OS Libraries
ctypes.float : ctypes.double; // 64bit its double, in 32bit its float let cgpoint = new ctypes.structtype("cgpoint", [ { "x" : cgfloat }, { "y" : cgfloat } ]); let cgeventgetlocation = coregraphics.declare("cgeventgetlocation", ctypes.default_abi, ...
...let o...
CType
name of the corresponding c type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only.
size number the
size of the type, in bytes. this is the same value as the c
sizeof. read only. note: ctypes.void_t.
size is undefined. methods available on all ctype objects array() returns a new ctype representing an array of elements of the type on which it was called. ctype array( [n] }; parameters n optional the number of elements in the declared array type. if...
... return value a ctype representing the data type "array of this type". this is the same as calling ctypes.arraytype(the_type[, n]). tosource() returns a javascript expression that evaluates to a ctype describing the same c type as this object. string tosource(); parameters none. ...
StructType
nsidered opaque and you can't access its contents directly. you can call the resulting type's define() method to assign it a non-opaque type later. see opaque structures for further explanation and an example. return value a ctype object describing the newly created struct data type. exceptions thrown typeerror the name is not a string, or one or more of the fields does not have a defined
size. rangeerror the
size of the structure, in bytes, cannot be represented both as a
size_t and as a javascript number. describing fields the fields array is comprised of field descriptors, one for each field in the structure. each field descriptor contains the field's name and its type, such as {'serialnumber': ctypes.int}. a complete field descriptor list might look like this: [ {'serialnumbe...
...name of the corresponding c type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only.
size number the
size of the type, in bytes. this is the same value as the c
sizeof. read only. note: ctypes.void_t.
size is undefined. method overview define(fields) methods inherited from ctype ctype array([n]) string tosource() string tostring() methods define() defines a previously declared opaque type's fields. this le...
Flash Activation: Browser Comparison - Plugins
the choice to allow flash just for the current session, or to remember their choice: site authoring tips if a flash element is very small, hidden, or covered by other content, users will probably not notice that flash is required and will become confused. even if the plugin element will eventually be hidden, pages should create the plugin element so that it's visible on the page, and should re
size or hide it only after the user has activated the plugin. this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object...
...it only after the user has activated the plugin. this can be done by calling a javascript function when the plugin is activated: function plugincreated() { // we don't need to see the plugin, so hide it by resizing var plugin = document.getelementbyid('myplugin'); plugin.height = 0; plugin.width = 0; plugin.callpluginmethod(); } the html, by default, specifies the flash object to be a
size that makes it visible, like this: <!-- give the plugin an initial
size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="plugincreated()"> </object> the callback parameter defined in the html can be called in flash using its flash.external.externalinterface api. using a script callbac...
Memory - Plugins
n is using at any given time. mac os the mac os browser frequently fills its memory partition with cached data that is purged only as necessary. since npn_memalloc automatically frees cached information if necessary to fulfill a request for memory, calls to npn_memalloc may succeed where direct calls to newptr fail. the npn_memalloc method has the following syntax: void *npn_memalloc (uint32
size); the
size parameter is an unsigned long integer that represents the amount of memory, in bytes, to allocate in the browser's memory space. this function returns a pointer to the allocated memory or null if not enough memory is available. the npn_memfree method deallocates a block of memory that was allocated using npn_memalloc only. npn_memfree does not free memory allocated by other means. ...
...flush to free enough memory. if npn_memflush returns a value indicating that enough memory was freed, the plug-in can call newgworld again. calling npn_memflush is particularly important to systems with small amounts of ram and with virtual memory turned off. to request that the browser free as much memory as possible, call npn_memflush repeatedly until it returns 0. uint32 npn_memflush (uint32
size); the
size parameter is an unsigned long integer that represents the amount of memory, in bytes, to free in the browser's memory space. this function returns the amount of freed memory, in bytes, or 0 if no memory could be freed. « previousnext » ...
Streams - Plugins
of the data has been processed. to avoid allocating additional buffers, the plug-in could return 4096, resulting in a call to npp_write with a buffer of up to 4k bytes. the buffer passed to npp_write may accommodate more bytes than the maximum number returned from npp_writeready . this maximum is only a promise to consume a certain amount of data from the buffer, not an upper limit on the buffer
size. in the example above, suppose that the plug-in allocates an 8k buffer and returns 8192 from npp_writeready. if the plug-in gets 10000 bytes from the browser in a subsequent call to npp_write, the plug-in should copy the first 8192 bytes from the browser's buffer into its own buffer and return 8192 (the number of bytes actually consumed) from npp_write. int32 npp_writeready(npp instance, npstrea...
... to npp_newstream, in which the plug-in requested a normal-mode stream, the browser delivers the data in the stream progressively in a series of calls to npp_writeready and npp_write. the npp_write function should return the number of bytes consumed by the instance. if this is a negative number, the browser calls npp_destroystream to destroy the stream. if the number returned is smaller than the
size of the buffer, the browser sends the remaining data in the buffer to the plug-in through repeated calls to npp_writeready and npp_write. int32 npp_write(npp instance, npstream *stream, int32 offset, int32 len, void *buf); the instance parameter is the current plug-in instance; the stream parameter specifies the current stream. the offset parameter specifies the offset, in bytes, of buf from t...
Introduction to DOM Inspector - Firefox Developer Tools
nspecting capabilities are. the following descriptions provide an overview of what these viewers are about: the dom nodes viewer shows attributes of nodes that can take them, or the text content of text nodes, comments, and processing instructions. the attributes and text contents may also be edited. the box model viewer gives various metrics about xul and html elements, including placement and
size. the xbl bindings viewer lists the xbl bindings attached to elements. if a binding extends another binding, the binding menulist will list them in descending order to to "root" binding. the css rules viewer shows the css rules that are applied to the node. alternatively, when used in conjunction with the style sheets viewer, the css rules viewer lists all recognized rules from that style sheet ...
...particular node or subtree, it presents individual nodes and their values (in the dom, attributes are subnodes of elements, typically) in an active list. you can perform actions on the individual items in this list from the context menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes. this interactivity allows you to shrink and grow element
size, change icons, and do other layout-tweaking updates—all without actually changing the dom as it is defined in the file on disk. loving the inspector the dom inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. the dom inspector not ...
Debugger.Script - Firefox Developer Tools
onvention for descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to a jsscript or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to a jsscript” and “if the instance refers to webassembly code”, respectively. if the behavior does not differ, no such empha
sized headings will appear. accessor properties of the debugger.script prototype object a debugger.script instance inherits the following accessor properties from its prototype: isgeneratorfunction true if this instance refers to a jsscript for a function defined with a function* expression or statement. false otherwise. isasyncfunction true if this instance refers to a jsscript for an async f...
...var i = function() {}; // display name: h/i f(function () {}); // display name: h/< } var s = f(function () {}); // display name: s< if the instance refers to webassembly code, throw a typeerror. url if the instance refers to a jsscript, the filename or url from which this script’s code was loaded. for scripts created by eval or the function constructor, this may be a synthe
sized filename, starting with a valid url and followed by information tracking how the code was introduced into the system; the entire string is not a valid url. for function.prototype’s script, this is null. if this debugger.script’s source property is non-null, then this is equal to source.url. if the instance refers to webassembly code, throw a typeerror. startline if the instance refers ...
Debugger.Source - Firefox Developer Tools
descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to javascript source or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to javascript source” and “if the instance refers to webassembly code”, respectively. if the behavior does not differ, no such empha
sized headings will appear. accessor properties of the debugger.source prototype object a debugger.source instance inherits the following accessor properties from its prototype: text if the instance refers to javascript source, the javascript source code, as a string. the value satisfies the program, functiondeclaration, or functionexpression productions in the ecmascript standard. if the in...
... value will be returned in this case. binary if the instance refers to webassembly code and the debugger has the allowwasmbinarysource property set, a uint8array that contains the webassembly bytecode. url if the instance refers to javascript source, the filename or url from which this script’s code was loaded. for scripts created by eval or the function constructor, this may be a synthe
sized filename, starting with a valid url and followed by information tracking how the code was introduced into the system; the entire string is not a valid url. for function.prototype’s script, this is null. source may be loaded from a url in the following ways: the url may appear as the src attribute of a <script> element in markup text. the url may be passed to the worker web wo...
Tree map view - Firefox Developer Tools
the tree map view is new in firefox 48. the tree map view provides a visual representation of the snapshot, that helps you quickly get an idea of which objects are using the most memory. a treemap displays "hierarchical (tree-structured) data as a set of nested rectangles". the
size of the rectangles corresponds to some quantitative aspect of the data. ...
... the treemaps shown in the memory tool, things on the heap are divided at the top level into four categories: objects: javascript and dom objects, such as function, object, or array, and dom types like window and htmldivelement. scripts: javascript sources loaded by the page. strings other: this includes internal spidermonkey objects. each category is represented with a rectangle, and the
size of the rectangle corresponds to the proportion of the heap occupied by items in that category. this means you can quickly get an idea of roughly what sorts of things allocated by your site are using the most memory. within top-level categories: objects is further divided by the object's type. scripts is further subdivided by the script's origin. it also includes a separate rectangle for code...
Edit Shape Paths in CSS - Firefox Developer Tools
iting. options can be accessed by activating the shape path editor with a regular click on the icon, and you can use the context menu (ctrl/cmd + click) to access additional functionality. circle() if the value of shape-outside is circle(), you are creating a circle basic shape. clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to re
size the circle or move its center. if you move or re
size the circle past the margin box, the edges become clipped by it. in the rules panel you can see the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape.
...the values for circle() change as you edit the shape. you can then copy these values back into your stylesheet to create the new, tweaked shape path. ellipse() if the value of shape-outside is ellipse() then you are using the ellipse basic shape. the ellipse() value works in much the same way as circle() in the shape path editor. an ellipse is a squashed circle and therefore has the option to re
size horizontally and vertically when you click on the shapes icon. inset() if the value of shape-outside is inset() then you are using the inset basic shape, which enables the creation of offset values pulling the content in from the margin box. each side of the rectangle can be targeted after clicking on the shapes icon to activate the shape path editor, and dragging each side will update the v...
Waterfall - Firefox Developer Tools
that apply to page elements. restyle hint a string indicating what kind of restyling is needed. the hint may be any of: self subtree latersiblings csstransitions cssanimations svgattranimations styleattribute styleattribute_animations force forcedescendants layout calculating the position and
size of page elements. this operation is sometimes called "reflow". paint drawing pixels to the screen. garbage collection garbage collection event. non-incremental gc events are labeled "(non-incremental)". reason a string indicating the reason gc was performed. non-incremental reason if the gc event wa...
...0 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow. importantly for responsiveness, the browser doesn't always have to go through every step: css animations update the page without having to run any javascript. not all css property changes cause a reflow. changing properties that can alter an object's geometry and position, such as width, display, font-
size, or top, will cause a reflow. however, changing properties that don't alter geometry or position, such as color or opacity, will not. not all css property changes cause a repaint. in particular, if you animate an element using the transform property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of ...
Toolbox - Firefox Developer Tools
d settings. ...
...e last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font
size ctrl + + cmd + + ctrl + + decrease font
size ctrl + - cmd + - ctrl + - reset font
size ctrl + 0 cmd + 0 ctrl + 0 ...
ANGLE_instanced_arrays.drawElementsInstancedANGLE() - Web APIs
render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. ...
... count a gl
sizei specifying the number of elements to be rendered. type a glenum specifying the type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the
size of the given type. primcount a gl
sizei specifying the number of instances of the set of elements to execute. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if offset is a invalid multiple of the
size of the given type, a gl.invalid_operation error is thrown. if count or primcount are negative, a gl.invalid_value error is thro...
AnalyserNode.frequencyBinCount - Web APIs
the frequencybincount read-only property of the analysernode interface is an unsigned integer half that of the analysernode.fft
size. this generally equates to the number of data values you will have to play with for the visualization. syntax var arraylength = analysernode.frequencybincount; value an unsigned integer, equal to the number of values that analysernode.getbytefrequencydata() and analysernode.getfloatfrequencydata() copy into the provided typedarray. for technical reasons related to how the fast fourier transform is defined, it is always half the value of analysernode.fft
size. therefore, it will be one of 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, and 16384. example the following example shows basic usage of an audiocontext to create an analysernode, then requestani...
...y and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...
AnalyserNode.maxDecibels - Web APIs
for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -30 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of maxdecibels or higher will be returned as +1.0 or 255, respectively. note: if a value less than or equal to analysernode.mindecibels is set, an index
sizeerror exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant c...
...y and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...
AnalyserNode.minDecibels - Web APIs
ibel value for scaling the fft analysis data, where 0 db is the loudest possible sound, -10 db is a 10th of that, etc. the default value is -100 db. when getting data from getfloatfrequencydata() or getbytefrequencydata(), any frequencies with an amplitude of mindecibels or lower will be returned as 0.0 or 0, respectively. note: if a value greater than analysernode.maxdecibels is set, an index_
size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant c...
...y and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ... ...
AnalyserNode.smoothingTimeConstant - Web APIs
means "overlap the previous and current buffer quite a lot while computing the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls. in technical terms, we apply a blackman window and smooth the values over time. the default value is good enough for most cases. note: if a value outside the range 0–1 is set, an index_
size_err exception is thrown. example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant c...
...ngtimeconstant() has, try cloning the above example and setting analyser.smoothingtimeconstant = 0; instead. you'll notice that the value changes are much more jarring. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ... ...
AnimationEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#...
... properties also inherits properties from its parent event. animationevent.anim...
AudioContext - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" ...
... properties also inherits properties from its parent interface, baseaudiocontext. audiocontext.
AudioNode.disconnect() - Web APIs
s to that computed parameter become 0 going forward once the change takes effect. if no matching connection is found, an invalidaccesserror exception is thrown. output optional an index describing which output from the current audionode is to be disconnected. the index numbers are defined according to the number of output channels (see audio channels). ...
...e defined according to the number of output channels (see audio channels). if this parameter is out-of-bound, an index
sizeerror exception is thrown. input optional an index describing which input into the specified destination audionode is to be disconnected. the index numbers are defined according to the number of input channels (see audio channels). if this parameter is out-of-bound, an index
sizeerror exception is thrown. exceptions index
sizeerror a value specified for input or output is invalid, referring to a node which doesn't exist or outside the permitted range. invalidaccesserror the node on which disconnect() was called isn't connected to the specified destination node. example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audio...
AudioWorkletProcessor.process - Web APIs
ponding audioworkletnode. in other words, every time a new block of audio is ready for your processor to manipulate, your process() function is invoked to do so. important: currently, audio data blocks are always 128 frames long—that is, they contain 128 32-bit floating-point samples for each of the inputs' channels. ...
... so. important: currently, audio data blocks are always 128 frames long—that is, they contain 128 32-bit floating-point samples for each of the inputs' channels. however, plans are already in place to revise the specification to allow the
size of the audio blocks to be changed depending on circumstances (for example, if the audio hardware or cpu utilization is more efficient with larger block
sizes). therefore, you must always check the
size of the sample array rather than assuming a particular
size. this
size may even be allowed to change over time, so you mustn't look at just the first block and assume the sample buffers will always be the same
size. syntax var isactivelyprocessing = audioworkletprocessor.process(inputs, outputs, parameters); parameters inputs an array of inp...
BaseAudioContext.createBuffer() - Web APIs
ate); parameters note: for an in-depth explanation of how audio buffers work, and what these parameters mean, read audio buffers: frames, samples and channels from our basic concepts guide. numofchannels an integer representing the number of channels this buffer should have. the default value is 1, and all user agents must support at least 32 channels. length an integer representing the
size of the buffer in sample-frames (where each sample-frame is the
size of a sample in bytes multiplied by numofchannels). to determine the length to use for a specific number of seconds of audio, use numseconds * samplerate. samplerate the sample rate of the linear audio data in sample-frames per second. all browsers must support sample rates in at least the range 8,000 hz to 96,000 hz. returns ...
...you use this call, you will get a mono buffer (one channel), that, when played back on an audiocontext running at 44100hz, will be automatically *resampled* to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames / 44100hz = 1 second. note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you re
size (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the re
sized image takes up less space. resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound). now let's look at a more complex createbuffer() example, in which we create a th...
BaseAudioContext - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7...
...4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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 javascrip...
BeforeInstallPromptEvent - Web APIs
ative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8"...
... properties inherits properties from its parent, event. beforeinstallprompteve...
BeforeUnloadEvent - Web APIs
position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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...
... 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,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",...
Blob.slice() - Web APIs
ob = blob.slice(start, end, contenttype); parameters start optional an index into the blob indicating the first byte to include in the new blob. if you specify a negative value, it's treated as an offset from the end of the blob toward the beginning. for example, -10 would be the 10th from last byte in the blob. the default value is 0. if you specify a value for start that is larger than the
size of the source blob, the returned blob has
size 0 and contains no data. end optional an index into the blob indicating the first byte that will *not* be included in the new blob (i.e. the byte exactly at this index is not included). if you specify a negative value, it's treated as an offset from the end of the blob toward the beginning. for example, -10 would be the 10th from last byte in the bl...
... contenttype optional the content type to assign to the new blob; this will be the value of its type property. the default value is an empty string. return value a new blob object containing the specified subset of the data contained within the blob on which this method was called. the original blob is not altered. ...
BluetoothDevice - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f...
...name; readonly attribute bluetoothremotegattserver? gatt; readonl...
BroadcastChannel - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7...
... properties this interface also inherits properties from its parent, eventtarget. broa...
CSSCounterStyleRule - Web APIs
ve; 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/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" st...
... csscounterstylerule.name is a domstring object that contains the serialization of the <cou...
CSSPrimitiveValue - Web APIs
ive; 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/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" str...
... cssprimitivevalue.primitivetype read only an unsigned short representing the type of the value. possible valu...
CSSValueList - Web APIs
ive; 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/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="...
... cssvaluelist.lengthread only an unsigned long representing the number of cssvalues in the list. methods cssva...
Determining the dimensions of elements - Web APIs
aren't any transforms applied to the element. in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height. as an example, if the element has width: 100px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100. ...
...these return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars. ...
CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling transformation to the canvas units horizontally and/or vertically. by default, one unit on the canvas is exactly one pixel. a scaling transformation modifies this behavior. for instance, a scaling factor of 0.5 results in a unit
size of 0.5 pixels; shapes are thus drawn at half the normal
size. similarly, a scaling factor of 2.0 increases the unit
size so that one unit becomes two pixels; shapes are thus drawn at twice the normal
size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. y scaling factor in the vertical direction. a negative value flips pixels across th...
... across the horizontal axis. a value of 1 results in no vertical scaling. examples scaling a shape this example draws a scaled rectangle. a non-scaled rectangle is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the rectangle has a specified width of 8 and a height of 20. the transformation matrix scales it by 9x horizontally and by 3x vertically. thus, its final
size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since its specified corner is (10, 10), its rendered corner becomes (90, 30). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the ident...
Basic usage of canvas - Web APIs
<canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes. indeed, the <canvas> element has only two attributes, width and height. these are both optional and can also be set using dom properties. when no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. the element can be
sized arbitrarily by css, but during rendering the image is scaled to fit its layout
size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted. note: if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using css. the id attribute isn't specific to the <canvas> element but is one of...
...e <img> element, the <canvas> element requires the closing tag (</canvas>). if this tag is not present, the rest of the document would be considered the fallback content and wouldn't be displayed. if fallback content is not needed, a simple <canvas id="foo" ...></canvas> is fully compatible with all browsers that support canvas at all. the rendering context the <canvas> element creates a fixed-
size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown. in this tutorial, we focus on the 2d rendering context. other contexts may provide different types of rendering; for example, webgl uses a 3d context based on opengl es. the canvas is initially blank. to display something, a script first needs to access the rendering context an...
Compositing and clipping - Web APIs
i only mentioned the stroke() and fill() methods, but there's a third method we can use with paths, called clip(). clip() turns the path currently being built into the current clipping path. you use clip() instead of closepath() to close a path and turn it into a clipping path instead of stroking or filling the path. by default the <canvas> element has a clipping path that's the exact same
size as the canvas itself. in other words, no clipping occurs. a clip example in this example, we'll use a circular clipping path to restrict the drawing of a set of random stars to a particular region. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillrect(0, 0, 150, 150); ctx.translate(75, 75); // create a circular clipping path ctx.beginpath(); ...
...next, we create the circular clipping path by drawing an arc and calling clip(). clipping paths are also part of the canvas save state. if we wanted to keep the original clipping path we could have saved the canvas state before creating the new one. everything that's drawn after creating the clipping path will only appear insi...
CountQueuingStrategy - Web APIs
the countqueuingstrategy interface of the the streams api provides a built-in chunk counting queuing strategy that can be used when constructing streams. constructor countqueuingstrategy() creates a new countqueuingstrategy object instance. properties none. methods countqueuingstrategy.
size() returns 1. examples const queueingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const writablestream = new writablestream({ // implement the sink write(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queueingstrategy); var
size = queueingstrategy.
size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy' in that specification. living standar...
...is behind the dom.streams.enabled preference (needs to be set to true) and the javascript.options.streams preference (needs to be set to true). ...
DOMRect - Web APIs
th: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" st...
... properties domrect inherits properties from its parent, domrectreadonly. the difference is that they are not read-only an...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ing of text composed only of spaces, tabs or line breaks (to be precise, crlf sequences, carriage returns or line feeds). these characters allow you to format your code in a way that will make it easily readable by yourself and other people. in fact, much of our source code is full of these whitespace characters, and we only tend to get rid of it in a production build step to reduce code download
sizes. html largely ignores whitespace? in the case of html, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored. take the following minimal example: <!doctype html> <h1> hello world! </h1> this source code contains a couple of line feeds after the doctype...
...xtra margin in there or something! there are a few ways of getting around this problem: use flexbox to create the horizontal list of items instead of trying an inline-block solution. this handles everything for you, and is definitely the preferred solution: ul { list-style-type: none; margin: 0; padding: 0; display: flex; } if you need to rely on inline-block, you could set the font-
size of the list to 0. this only works if your blocks are not
sized with ems (based on the font-
size, so the block
size would also end up being 0). rems would be a good choice here: ul { font-
size: 0; ... } li { display: inline-block; width: 2rem; height: 2rem; ... } or you could set negative margin on the list items: li { display: inline-block; width: 2rem; height: 2rem; marg...
EffectTiming.fill - Web APIs
elow that, another <div> serves as a button that will trigger the animation to begin. ...
...nvolved in this example, the part that really matters for our purposes is the css that styles the "box" element that we'll be animating. that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the
size, border, and color information, as well as indicate that the box should be centered both vertically and horizontally inside its container. note that there's no rotation applied. javascript content now let's check out the javascript. first we'll define the two objects that describe the keyframes and the timing configuration to use, then we'll actually see the code that triggers and runs the anim...
Element: dblclick event - Web APIs
ton) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time. dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events). ...
...yes cancelable yes interface mouseevent event handler property ondblclick examples this example toggles the
size of a card when you double click on it. javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to re
size this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification. working draft doc...
ErrorEvent - Web APIs
position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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="#d4dd...
... errorevent.message read only is a domstring containing a human-readable error message describing the problem. erro...
ExtendableEvent - Web APIs
ative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="...
...it is not available when it is a window, or the scope of another kind of worker. ...
FileSystemEntry.moveTo() - Web APIs
ide itself or one of its own child directories, or copying an item within the same directory without renaming it. fileerror.quota_exceeded_err the operation exceeded the user's storage quota, or there isn't enough storage space left to complete the operation. example this example shows how a temporary log file might be moved into a more permanent "log" directory when it exceeds a megabyte in
size. ...
...eded_err the operation exceeded the user's storage quota, or there isn't enough storage space left to complete the operation. example this example shows how a temporary log file might be moved into a more permanent "log" directory when it exceeds a megabyte in
size. workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.
size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); 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. desk...
Using FormData Objects - Web APIs
ditional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...
...lso send files using formdata. ...
GlobalEventHandlers.onanimationend - Web APIs
vent which occurred. ...
... 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 start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: fl...
GlobalEventHandlers.onanimationiteration - Web APIs
n other examples of animation events, so it may look familiar. ...
...en 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 start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: fl...
GlobalEventHandlers.onanimationstart - Web APIs
vent which occurred. ...
... 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 start animating right away. we'll add the animation style later to start animating the box. #box { width: var(--boxwidth); height: var(--boxwidth); left: 0; top: 0; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: fl...
HTMLFormControlsCollection - Web APIs
dth: 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/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...
... methods this interface inherits the methods of its parent, htmlcollection. ht...
Image() - Web APIs
is functionally equivalent to document.createelement('img'). disambiguation: image(), the css function notation. syntax var htmlimageelement = new image(width, height); parameters width the width of the image (i.e., the value for the width attribute). height the height of the image (i.e., the value for the height attribute). ...
...createelement('img'). disambiguation: image(), the css function notation. syntax var htmlimageelement = new image(width, height); parameters width the width of the image (i.e., the value for the width attribute). height the height of the image (i.e., the value for the height attribute). usage note the entire bitmap is loaded regardless of the
sizes specified in the constructor. the
size specified in the constructor is reflected through the properties htmlimageelement.width and htmlimageelement.height of the resulting instance. the intrinsic width and height of the image in css pixels are reflected through the properties htmlimageelement.naturalwidth and htmlimageelement.naturalheight. if no
size is specified in the constructor both pairs of properties have the same values. exam...
HTMLImageElement.naturalHeight - Web APIs
this natural height is corrected for the pixel density of the device on which it's being presented, unlike height. if the intrinsic height is not available—either because the image does not specify an intrinsic height or because the image data is not available in order to obtain this information, naturalheight returns 0. example this example simply displays both the natural, density-adjusted
size of an image as well as its rendered
size as altered by the page's css and other factors. html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="output"> </div> the html features a 400x398 pixel image which is placed inside a <div>. css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { padding-top: 2em; } the ma...
...: 100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%). javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural
size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed
size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed
sizes into the <div> with the class output. this is done in response to the window's load event handler, in order to ensure that the im...
HTMLImageElement.naturalWidth - Web APIs
ural width is corrected for the pixel density of the device on which it's being presented, unlike the value of width. if the intrinsic width is not available—either because the image does not specify an intrinsic width or because the image data is not available in order to obtain this information, naturalwidth returns 0. example this example simply displays both the natural, density-adjusted
size of an image as well as its rendered
size as altered by the page's css and other factors. html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="output"> </div> the html features a 400x398 pixel image which is placed inside a <div>. css .box { width: 200px; height: 200px; } .image { width: 100%; } .output { padding-top: 2em; } the ma...
...: 100%; } .output { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%). javascript let output = document.queryselector(".output"); let image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural
size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed
size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed
sizes into the <div> with the class output. this is done in response to the window's load event handler, in order to ensure that the im...
HTMLOptionsCollection - Web APIs
dth: 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/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" fil...
...you can either...
Recommended Drag Types - Web APIs
interface : function(iid) { if (iid.equals(components.interfaces.nsiflavordataprovider) || iid.equals(components.interfaces.nsisupports)) return this; throw components.results.ns_nointerface; }, getflavordata : function(atransferable, aflavor, adata, adatalen) { if (aflavor == 'application/x-moz-file-promise') { var urlprimitive = {}; var data
size = {}; atransferable.gettransferdata('application/x-moz-file-promise-url', urlprimitive, data
size); var url = urlprimitive.value.queryinterface(components.interfaces.nsisupportsstring).data; console.log("url file orignal is = " + url); var nameprimitive = {}; atransferable.gettransferdata('application/x-moz-file-promise-dest-filename', nameprimitive, data
size);...
...itive = {}; atransferable.gettransferdata('application/x-moz-file-promise-dest-filename', nameprimitive, data
size); var name = nameprimitive.value.queryinterface(components.interfaces.nsisupportsstring).data; console.log("target filename is = " + name); var dirprimitive = {}; atransferable.gettransferdata('application/x-moz-file-promise-dir', dirprimitive, data
size); var dir = dirprimitive.value.queryinterface(components.interfaces.nsilocalfile); console.log("target folder is = " + dir.path); var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.appendrelativepath(name); console.log("output final path is =" + file.path); // now you...
HashChangeEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="...
... hashchangeevent.newurl read only the new url to which the window is navigating. hashchange...
IDBCursorWithValue - Web APIs
ve; 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/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...
... properties inherits properties from its parent interface, idbcursor. idbcursorwithvalue.value read only...
IDBDatabase - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" s...
... idbdatabase.version read only a 64-bit integer that contains the ver...
IDBRequest - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" st...
... idbrequest.error read only returns a domexception in the event of an unsuccessful request, indicating what went wrong. ...
IDBTransaction - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8...
...4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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...
Using IndexedDB - Web APIs
ass="destructive" /> </div> </form> <form id="search-form"> <div class="button-pane"> <input type="button" id="search-list-button" value="list database content" /> </div> </form> <div> <div id="pub-msg"> </div> <div id="pub-viewer"> </div> <ul id="pub-list"> </ul> </div> css content body { font-
size: 0.8em; font-family: sans-serif; } form { background-color: #cccccc; border-radius: 0.3em; display: inline-block; margin-bottom: 0.5em; padding: 1em; } table { border-collapse: collapse; } input { padding: 0.3em; border-color: #cccccc; border-radius: 0.3em; } .required:after { content: "*"; color: red; } .button-pane { margin-top: 1em; } #pub-viewer { float: righ...
...d-color: #eeeeee; border-radius: 0.3em; } #pub-list li { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .note { font-
size: smaller; } .destructive { background-color: orange; } .destructive:hover { background-color: #ff8000; } .destructive:active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 16.0"], ['google chrome', ">= 24.0 (you may need to get google chrome canary), no blob storage support"] ]; var compat = $('#compat'); compat.empt...
LocalFileSystemSync - Web APIs
ing window.requestfilesystemsync() for creates new storage for your web app. for more concepts, see the counterpart article for the asynchronous api. example //taking care of the browser-specific prefix window.requestfilesystemsync = window.requestfilesystemsync || window.webkitrequestfilesystemsync; // the first parameter defines the type of storage: persistent or temporary // next, set the
size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors. var fs = requestfilesystemsync(temporary, 1024*1024 /*1mb*/); because you are using a synchronous api, you don't need success and error callbacks. method overview filesystemsync requestfilesystemsync (in unsigned short type, in long long siz...
...ser unless the user or the app expunges it. methods requestfilesystemsync() requests a file system where data should be stored. you access a sandboxed file system by requesting a localfilesystemsync object from within a web worker using this global method, window.requestfilesystemsync(). [ research ] filesystemsync requestfilesystemsync( in unsigned short type, in unsigned long long
size ); parameters type the storage type of the file system. the values can be either temporary or persistent.
size the storage space—in bytes—that you need for your app. returns filesystemsync an object that represents the file system. exceptions this method can raise an fileexception with the following code: exception description security_error the applic...
MSCandidateWindowUpdate - Web APIs
tandard this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. mscandidatewindowupdate fires after the input method editor (ime) candidate window has been identified as needing to change
size, but before any visual updates have rendered. this proprietary method is specific to internet explorer. general info synchronous no bubbles no cancelable no note windows 8.1 and windows 7 imes for certain languages on internet explorer for the desktop might not support this event. on internet explorer in the new windows ui, this event is supported in windows 8.1 imes of all languages...
...dows 8.1 imes of all languages. syntax event property object.oncandidatewindowupdate = handler; addeventlistener method object.addeventlistener("mscandidatewindowupdate", handler, usecapture) parameters pevtobj [in] type: ihtmleventobj pointer to an ihtmleventobj interface for the current event. tan ime candidate window may be identified as needing to change
size for any of the following reasons: as a result of displaying new / changed alternatives or predictions web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element). see also microsoft api extensions ime handling guide for gecko ...
MediaDevices.ondevicechange - Web APIs
dio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </div> <div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </div> <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; } h2 { margin-bottom: 4px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other ...
...ement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 30 }, audio: { samplerate: 44100, sample
size: 16, volume: 0.25 } }).then(stream => { videoelement.srcobject = stream; updatedevicelist(); }) .catch(err => log(err.name + ": " + err.message)); }, false); we set up global variables that contain references to the <ul> elements that are used to list the audio and video devices: let audiolist = document.getelementbyid("audiolist"); let videolist = document.gete...
MediaKeyMessageEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" str...
... properties inherits properties from its parent, event. mediakeymessageevent.m...
MediaKeySession.onkeystatuseschange - Web APIs
; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f...
...} specifications specification status comment encrypted media extension...
MediaKeySession.onmessage - Web APIs
; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f...
...} specifications specification status comment encrypted media extensionsthe...
MediaSource - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" s...
... properties mediasource.sourcebuffers read only returns a so...
MediaStreamConstraints.video - Web APIs
e start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-
size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.
...e start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-
size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.
MediaStreamTrack.applyConstraints() - Web APIs
onstrainable properties of the track, such as frame rate, dimensions, echo cancelation, and so forth. constraints can be used to ensure that the media meets certain guidelines you prefer. for example, you may prefer high-density video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable
sizes or ranges of
sizes. see applying constraints in capabilities, constraints, and settings for more information on how to apply your preferred constraints. syntax const appliedpromise = track.applyconstraints([constraints]) parameters constraints optional a mediatrackconstraints object listing the constraints to apply to the track's constrainable properties; any existing constraints are repl...
...if the specified constraints are too strict to find a match when attempting to configure the track. examples the following shows how to specify a basic and advanced set of constraints. it specifies that the page or web app needs a width between 640 and 1280 and a height between 480 and 720, with the later number in each pair being preferred. the advanced property further specifies that an image
size of 1920 by 1280 is the preferred or an aspect ratio of 1.333 if that is not available. note that these constraints also illustrate what the spec refers to as a backoff strategy. const constraints = { width: {min: 640, ideal: 1280}, height: {min: 480, ideal: 720}, advanced: [ {width: 1920, height: 1280}, {aspectratio: 1.333} ] }; navigator.mediadevices.getusermedia({ video: true ...
MediaStreamTrackEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" st...
... track read only a mediastrea...
MediaTrackConstraints - Web APIs
not echo cancellation is preferred and/or required. latency a constraindouble specifying the latency or range of latencies which are acceptable and/or required. noisesuppression a constrainboolean which specifies whether noise suppression is preferred and/or required. samplerate a constrainlong specifying the sample rate or range of sample rates which are acceptable and/or required. sample
size a constrainlong specifying the sample
size or range of sample
sizes which are acceptable and/or required. volume a constraindouble specifying the volume or range of volumes which are acceptable and/or required. properties of image tracks whitebalancemode a string specifying one of "none", "manual", "single-shot", or "continuous". exposuremode a string specifying one of "none", "manual"...
...r an array of facings which are acceptable and/or required. framerate a constraindouble specifying the frame rate or range of frame rates which are acceptable and/or required. height a constrainlong specifying the video height or range of heights which are acceptable and/or required. width a constrainlong specifying the video width or range of widths which are acceptable and/or required. re
sizemode a constraindomstring object specifying a mode or an array of modes the ua can use to derive the resolution of a video track. allowed values are none and crop-and-scale. none means that the user agent uses the resolution provided by the camera, its driver or the os. crop-and-scale means that the user agent can use cropping and downscaling on the camera output in order to satisfy other constr...
MediaTrackSettings - Web APIs
olean which indicates the current value of the noisesupression property, which is true if noise suppression is enabled and is false otherwise. samplerate a long integer value indicating the current value of the samplerate property, specifying the sample rate in samples per second of the audio data. standard cd-quality audio, for example, has a sample rate of 41,000 samples per second. sample
size a long integer value indicating the current value of the sample
size property, specifying the linear
size, in bits, of each audio sample. cd-quality audio, for example, is 16-bit, so this value would be 16 in that case. volume a double-precision floating point value indicating the current value of the volume property, specifying the volume level of the track. this value will be between 0.0 (sil...
... determined for any reason, the value will match the vertical sync rate of the device the user agent is running on. height a long integer value indicating the current value of the height property, specifying the height of the track's video data in pixels. width a long integer value indicating the current value of the width property, specifying the width of the track's video data in pixels. re
sizemode a domstring indicating the current value of the re
sizemode property, specifying the mode used by the user agent to derive the resolution of the track. the value will be one of: "none" the track has the resolution offered by the camera, its driver or the os. "crop-and-scale" the track's resolution might be the result of the user agent using cropping or downscaling from a higher came...
Using the Media Capabilities API - Web APIs
<ul> <li> <label for="codec">select a codec</label> <select id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="
size">select a
size</label> <select id="
size"> <option>7680x4320</option> <option>3840x2160</option> <option>2560x1440</option> <option>1920x1080</option> <option>1280x720</option> <option selected>800x600</option> <option>640x480</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="fr...
...<option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var
size = document.getelementbyid('
size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document.getelementbyid('codec').value, width:
size[0], height:
size[1], bitrate: document.getelementbyid('bitrate').value, framerate: document.getelementbyid('framerate').value, } } }, testit: function () { le...
Media Session API - Web APIs
for the media session api. ...
...d adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96',
sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128',
sizes: '128x128', type: 'image/png' }, { src: 'https://dummyimage.com/192x192',
sizes: '192x192', type: 'image/png' }, { src: 'https://dummyimage.com/256x256',
sizes: '256x256', type: 'image/png' }, { src: 'https://dummyimage.com/384x384',
sizes: '384x384', type: 'image/png' }, { src: 'https://dummyimage.com/512x512',
sizes: '512x512', type: 'image/png' }, ] }); naviga...
MessageEvent - Web APIs
tive; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><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="#d4...
... properties this interface also inherits properties from its parent, event. messageevent.data read only the data...
Metadata - Web APIs
the metadata interface is used by the file and directory entries api to contain information about a file system entry. this metadata includes the file's
size and modification date and time. this interface isn't available through the global scope; instead, you obtain a metadata object describing a filesystementry using the method filesystementry.getmetadata(). properties modificationtime read only a date object indicating the date and time the entry was modified.
size read only a 64-bit unsigned integer indicating the
size of the entry in bytes. specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the comp...
... nochrome android full support yesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yes
size experimentalnon-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera no support nosafari no support ...
Node - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#...
... node.baseuriread only returns a domstring representing the base url of the do...
PageTransitionEvent - Web APIs
position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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" stro...
... pagetransitionevent.persisted read only indicates if the document is loading from a cache.
ParentNode.replaceChildren() - Web APIs
ween parents replacechildren() enables you to easily transfer nodes between parents, without having to resort to verbose looping code. for example, say we have a simple application allowing you to choose what food you want for your party. ...
...ticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </div> <div class="buttons"> <button id="to-yes">transfer to "yes" --></button> <button id="to-no"><-- transfer to "no"</button> </div> <div> <label for="yes">yes please!</label> <select id="yes" multiple
size="10"> </select> </div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; } div { margin-right: 20px; } label, button { display: block; } .buttons { display: flex; flex-flow: column; justify-content: center; } select { width: 200px; } what we...
Performance - Web APIs
p in the browser's performance entry buffer with the given name. performance.measure() creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively). performance.now() returns a domhighrestimestamp representing the number of milliseconds elapsed since a reference instant. performance.setresourcetimingbuffer
size() sets the browser's resource timing buffer
size to the specified number of "resource" type performance entry objects. performance.tojson() is a jsonizer returning a json object representing the performance object. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface. resourcetimingbufferfull fired when th...
...getentries() interface. performance timelinethe definition of 'performance extensions' in that specification. recommendation defines getentries(), getentriesbytype() and getentriesbyname() methods. resource timing level 1the definition of 'performance extensions' in that specification. candidate recommendation defines clearresourcetimings() and setresourcetimingbuffer
size() methods and the onresourcetimingbufferfull property. user timing level 2the definition of 'performance extensions' in that specification. working draft clarifies mark(), clearmark(), measure() and clearmeasure() methods. user timingthe definition of 'performance extensions' in that specification. recommendation defines mark(), clearmark(), measure() and clearmeasur...
PerformanceLongTaskTiming - Web APIs
h: 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/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="5...
... specifications specification st...
PerformanceMark - Web APIs
h: 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/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="#...
..." 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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry...
PerformanceMeasure - Web APIs
h: 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/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...
...ext-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="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performancee...
PerformanceNavigationTiming - Web APIs
h: 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/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=...
...r="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-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows:...
PerformancePaintTiming - Web APIs
h: 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/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" ...
...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-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraini...
ProgressEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d...
... properties also inherits properties from its parent event. progressevent.lengthcom...
PromiseRejectionEvent - Web APIs
position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/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" st...
... prop...
RTCConfiguration - Web APIs
connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. see using certificates below for additional information. this configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to rtcpeerconnection.setconfiguration(). icecandidatepool
size optional an unsigned 16-bit integer value which specifies the
size of the prefetched ice candidate pool. the default value is 0 (meaning no candidate prefetching will occur). you may find in some cases that connections can be established more quickly by allowing the ice agent to start fetching ice candidates before you start trying to connect, so that they're already available for inspection whe...
...e of the prefetched ice candidate pool. the default value is 0 (meaning no candidate prefetching will occur). you may find in some cases that connections can be established more quickly by allowing the ice agent to start fetching ice candidates before you start trying to connect, so that they're already available for inspection when rtcpeerconnection.setlocaldescription() is called. changing the
size of the ice candidate pool may trigger the beginning of ice gathering. iceservers optional an array of rtciceserver objects, each describing one server which may be used by the ice agent; these are typically stun and/or turn servers. if this isn't specified, the connection attempt will be made with no stun or turn server available, which limits the connection to local peers. icetransportpolic...
RTCDTMFSender - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8"...
...#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been pla...
RTCDataChannel.bufferedAmount - Web APIs
is event may be used, for example, to implement code which queues more messages to be sent whenever there's room to buffer them. syntax var amount = adatachannel.bufferedamount; value the number of bytes of data currently queued to be sent over the data channel but have not yet been sent. ...
... over the data channel but have not yet been sent. example the snippet below includes a function which changes the contents of a block with the id "buffer
size" to a string indicating the number of bytes currently buffered on an rtcdatachannel. var dc = peerconnection.createdatachannel("file transfer"); /* ... */ function showbufferedamount(channel) { let el = document.getelementbyid("buffer
size"); el.innerhtml = channel.bufferedamount + " bytes"; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamount' in that specification. candidate recommendation initial specification. ...
RTCDataChannel.send() - Web APIs
hannel interface sends data across the data channel to the remote peer. this can be done any time except during the initial process of creating the underlying transport channel. data sent before connecting is buffered if possible (or an error occurs if it's not possible), and is also buffered if sent while the connection is closing or closed. different browsers have different limitations on the
size of the message you can send. specifications exist to define how to automatically fragment large messages, but not all browsers implement them, and those that do have various additional restrictions. this will get less complicated over time, but for now, if you have questions, see understanding message
size limits in using webrtc data channels. syntax rtcdatachannel.send(data); parameters ...
... multiple techniques for breaking up large data into smaller pieces for transfer, it's possible to encounter scenarios in which the other peer does not support the same ones. for example, if one peer is a modern browser that supports using the eor (end of record) flag to indicate when a received message is the last piece of a multi-part object sent using send(). for more information about message
size restrictions, see understanding message
size limits in using webrtc data channels. example in this example, a routine called sendmessage() is created; it accepts an object as input and sends to the remote peer, over the rtcdatachannel, a json string with the specified object and a time stamp. var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("backchannel"); function sendmessage...
RTCIceCandidatePairStats - Web APIs
cecandidatepairstats is based upon rtcstats and inherits its properties. in addition, it adds the following new properties: availableincomingbitrate optional provides an informative value representing the available inbound capacity of the network by reporting the total number of bits per second available for all of the candidate pair's incoming rtp streams. ...
... bytesreceieved optional the total number of payload bytes received (that is, the total number of bytes received minus any headers, padding, or other administrative overhead) on this candidate pair so far. ...
RTCPeerConnection() - Web APIs
connection, providing certificates for multiple algorithms may improve the odds of successfully connecting in some circumstances. see using certificates below for additional information. this configuration option cannot be changed after it is first specified; once the certificates have been set, this property is ignored in future calls to rtcpeerconnection.setconfiguration(). icecandidatepool
size optional an unsigned 16-bit integer value which specifies the
size of the prefetched ice candidate pool. the default value is 0 (meaning no candidate prefetching will occur). you may find in some cases that connections can be established more quickly by allowing the ice agent to start fetching ice candidates before you start trying to connect, so that they're already available for inspection whe...
...e of the prefetched ice candidate pool. the default value is 0 (meaning no candidate prefetching will occur). you may find in some cases that connections can be established more quickly by allowing the ice agent to start fetching ice candidates before you start trying to connect, so that they're already available for inspection when rtcpeerconnection.setlocaldescription() is called. changing the
size of the ice candidate pool may trigger the beginning of ice gathering. iceservers optional an array of rtciceserver objects, each describing one server which may be used by the ice agent; these are typically stun and/or turn servers. if this isn't specified, the connection attempt will be made with no stun or turn server available, which limits the connection to local peers. icetransportpolic...
RTCPeerConnection - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f...
...e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,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 r...
RadioNodeList - Web APIs
ive; 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/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=...
... radionodelist.value if the underlying element collection contains radio buttons, the value prope...
Range.extractContents() - Web APIs
cument.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...
...ving items between containers this example lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...
ReadableStream.cancel() - Web APIs
contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ? ...
... += result.value.length; console.log(`received ${bytesreceived} bytes of data so far`); buffer += decoder.decode(result.value, {stream: true}); // already found match & just context-gathering? if (matchfoundat === -1) { matchfoundat = (caseinsensitive ? ...
SVGLengthList - Web APIs
d into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) svglength removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code in...
... is raised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) svglength removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in svglength newitem) svglength inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with cod...
SVGPathSegList - Web APIs
s list before it is inserted into this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. a domexception with code index_
size_err is raised if index is greater than or equal to numberofitems. removeitem(in unsigned long index) svgpathseg removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified...
...ual to numberofitems. removeitem(in unsigned long index) svgpathseg removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list cannot be modified. a domexception with code index_
size_err is raised if index is greater than or equal to numberofitems. appenditem(in svgpathseg newitem) svgpathseg inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item it...
SVGPointList - Web APIs
serted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) svgpoint removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or whe...
...s. removeitem(in unsigned long index) svgpoint removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in svgpoint newitem) svgpoint inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. ...
SVGStringList - Web APIs
to this list. the inserted item is the item itself and not a copy. if the item is already in this list, note that the index of the item to replace is before the removal of the item. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) domstring removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with c...
...ised if the index number is greater than or equal to numberofitems. removeitem(in unsigned long index) domstring removes an existing item from the list. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. a domexception with code index_
size_err is raised if the index number is greater than or equal to numberofitems. appenditem(in domstring newitem) domstring inserts a new item at the end of the list. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception wit...
Using the Screen Capture API - Web APIs
include offscreen areas of the source, if there are any. none of the constraints are applied in any way until after the content to capture has been selected. the contraints alter what you see in the resulting stream. for example, if you specify a width constraint for the video, it's applied by scaling the video after the user selects the area to share. it doesn't establish a restriction on the
size of the source itself. note: constraints never cause changes to the list of sources available for capture by the screen sharing api. this ensures that web applications can't force the user to share specific content by restricting the source list until only one item is left. while display capture is in effect, the machine which is sharing screen contents will display some form of indicator so t...
...ontents. a <video> into which the captured screen contents are streamed. a <pre> block into which logged text is placed by the intercepted consolemethod. css the css is entirely cosmetic in this example. the video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). max-width is set to 860px to set an absolute upper limit on the video's
size, the error, warn, and info classes are used to style the corresponding console output types. #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; } result the final product looks like this. if your browser supports screen capture api, clicking "start capture" will present the user agent's inte...
SourceBuffer - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" ...
... sourcebuffer.appendwindowstart controls the timestamp for the start of the ...
SourceBufferList - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7...
... event handlers sourcebufferlist.onaddsourcebuffer the event ha...
SpeechSynthesisVoice.localService - Web APIs
syntax var amilocal = speechsynthesisvoiceinstance.localservice; value a boolean. ...
... syntax var amilocal = speechsynthesisvoiceinstance.localservice; value a boolean. ...
StaticRange - Web APIs
idth: 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/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"...
... properties the properties ...
StorageEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4...
...pace" 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 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...
Storage API - Web APIs
units. quotas and usage estimates the user agent determines, using whatever mechanism it chooses, the maximum amount of storage a given site can use. this maximum is the origin's quota. the amount of this space which is in use by the site is called its usage. both of these values are estimates; there are several reasons why they're not precise: user agents are encouraged to obscure the exact
size of the data used by a given origin, to prevent these values from being used for fingerprinting purposes. de-duplication, compression, and other methods to reduce the physical
size of the stored data may be used. quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help prevent overruns. user agents may use ...
...prevent these values from being used for fingerprinting purposes. de-duplication, compression, and other methods to reduce the physical
size of the stored data may be used. quotas are conservative estimates of the space available for the origin's use, and should be less than the available space on the device to help prevent overruns. user agents may use any method they choose to determine the
size of origins' quotas, and are encouraged by the specification to provide popular or frequently-used sites with extra space. to determine the estimated quota and usage values for a given origin, use the navigator.storage.estimate() method, which returns a promise that, when resolved, receives a storageestimate that contains these figures. for example: navigator.storage.estimate().then(estimate => ...
Using readable streams - Web APIs
, but sometimes you need to create a custom stream and populate it with your own chunks. the readablestream() constructor allows you to do this via a syntax that looks complex at first, but actually isn’t too bad. the generic syntax skeleton looks like this: const stream = new readablestream({ start(controller) { }, pull(controller) { }, cancel() { }, type, autoallocatechunk
size }, { highwatermark,
size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying source the data is being read from. the second object is optional, and allows you to specify a custom queuing strategy to use for your stream. you’ll rarely have to do this, so we’ll just concentrate on the first one for now. t...
...alled repeatedly until the stream’s internal queue is full. this can be used to control the stream as more chunks are enqueued. cancel() — a method that, when included, will be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to release access to the stream source. type and autoallocatechunk
size — these are used — when included — to signify that the stream is to be a bytestream. bytestreams will be covered separately in a future tutorial, as they are somewhat different in purpose and use case to regular (default) streams. they are also not implemented anywhere as yet. looking at our simple example code again, you can see that our readablestream() constructor only includes a singl...
TaskAttributionTiming - Web APIs
h: 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/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" f...
... taskattributiontiming.containersrc r...
TimeEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4...
...for this event type, indicates the r...
UIEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" ...
... properties this interface also inherits properties of its parent, event. uievent.cancelbubble is a boolean indicating w...
VTTCue - Web APIs
properties this interface also inherits properties from texttrackcue. vttcue.region a vttregion object describing the video's sub-region that the cue will be drawn onto, or 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.regi...
...eturns 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 anchored to. the default is auto. vttcue.
size returns a double representing the
size of the cue, as a percentage of the video
size. vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box. ...
ValidityState.patternMismatch - Web APIs
ord, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
...rm to the constraints set by the pattern value, the patternmismatch property will be true. examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code"
size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix"
size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number"
size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too l...
WebGL2RenderingContext.copyBufferSubData() - Web APIs
possible values: gl.array_buffer: buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data. gl.element_array_buffer: buffer used for element indices. ...
... gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. readoffset writeoffset a glintptr specifying the byte offset from which to start reading from or writing to the buffer.
size a gl
sizei in bytes specifying the
size of the data to be copied from readtarget to writetarget. return value none. examples var srcbuffer = gl.createbuffer(); var dstbuffer = gl.createbuffer(); var data = new float32array(vertices); var length = vertices.length * 4; gl.bindbuffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_...
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
render. possible values are: gl.points: draws a single dot. gl.line_strip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. ...
... count a gl
sizei specifying the number of elements to be rendered. type a glenum specifying the type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short when using the oes_element_index_uint extension: gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the
size of the given type. instancecount a gl
sizei specifying the number of instances of the set of elements to execute. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if offset is a valid multiple of the
size of the given type, a gl.invalid_operation error is thrown. if count or instancecount are negative, a gl.invalid_value error i...
WebGL2RenderingContext.drawRangeElements() - Web APIs
a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. start a gluint specifying the minimum array index contained in offset. end a gluint specifying the maximum array index contained in offset. count a gl
sizei specifying the number of elements to be rendered. type a glenum specifying the type of the values in the element array buffer. possible values are: gl.unsigned_byte gl.unsigned_short gl.unsigned_int offset a glintptr specifying an offset in the element array buffer. must be a valid multiple of the
size of the given type. return value none. exceptions if mode is not one of ...
... if count is negative, a gl.invalid_value error is thrown. ...
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
(program, uniformblockindex, pname); parameters program a webglprogram containing the active uniform block. uniformblockindex a gluint specifying the index of the active uniform block within the program. pname a glenum specifying which information to query. possible values: gl.uniform_block_binding: returns a gluint indicating the uniform buffer binding point. gl.uniform_block_data_
size: returns a gluint indicating the minimum total buffer object
size. gl.uniform_block_active_uniforms: returns a gluint indicating the number of active uniforms in the uniform block. gl.uniform_block_active_uniform_indices: returns a uint32array indicating the list of active uniforms in the uniform block. gl.uniform_block_referenced_by_vertex_shader: returns a glboolean indicating whether the...
...vertex_shader: returns a glboolean indicating whether the uniform block is referenced by the vertex shader. gl.uniform_block_referenced_by_fragment_shader: returns a glboolean indicating whether the uniform block is referenced by the fragment shader. return value depends on which information is requested using the pname parameter. if an error occurs, null is returned. examples var block
size = gl.getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_
size); specifications specification status comment webgl 2.0the definition of 'getactiveuniformblockparameter' in that specification. editor's draft initial definition for webgl. opengl es 3.0the definition of 'glgetactiveuniformblockiv' in that specificati...
WebGL2RenderingContext.texStorage3D() - Web APIs
return value none. examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 256, 256, 256); specifications specification status comment webgl 2.0the definition of 'texstorage3d' in that specification. editor's draft ...
... gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac gl.compressed_rgb8_punchthrough_alpha1_etc2 gl.compressed_srgb8_punchthrough_alpha1_etc2 width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. depth a gl
sizei specifying the depth of the texture. return value none. examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 256, 256, 256); specifications specification status comment webgl 2.0the definition of 'texstorage3d' in that specification. editor's draft initial definition for webgl. opengl es 3.0the ...
WebGLActiveInfo - Web APIs
webglactiveinfo.type the read-only type of the requested variable. ...
... webglactiveinfo.type the read-only type of the requested variable. ...
WebGLContextEvent - Web APIs
tive; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke...
... webglcontextevent.statusmessage a read-only property containing additional information a...
WebGLRenderingContext.getActiveAttrib() - Web APIs
it is generally used when querying unknown attributes either for debugging or generic library creation. syntax webglactiveinfo gl.getactiveattrib(program,index); parameters program a webglprogram containing the vertex attribute. index a gluint specifying the index of the vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_attributes). return value a webglactiveinfo object. ...
...he vertex attribute to get. this value is an index 0 to n - 1 as returned by gl.getprogramparameter(program, gl.active_attributes). return value a webglactiveinfo object. examples const numattribs = gl.getprogramparameter(program, gl.active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.getactiveattrib(program, i); console.log('name:', info.name, 'type:', info.type, '
size:', info.
size); } specifications specification status comment webgl 1.0the definition of 'getactiveattrib' in that specification. recommendation initial definition. opengl es 2.0the definition of 'glgetactiveattrib' in that specification. standard man page of the opengl api. ...
WebGLRenderingContext.getBufferParameter() - Web APIs
ne buffer object to another. gl.transform_feedback_buffer: buffer for transform feedback operations. gl.uniform_buffer: buffer used for storing uniform blocks. gl.pixel_pack_buffer: buffer used for pixel transfer operations. gl.pixel_unpack_buffer: buffer used for pixel transfer operations. pname a glenum specifying information to query. possible values: gl.buffer_
size: returns a glint indicating the
size of the buffer in bytes. gl.buffer_usage: returns a glenum indicating the usage pattern of the buffer. this is either: gl.static_draw, gl.dynamic_draw, gl.stream_draw. when using a webgl 2 context, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy,...
...g a webgl 2 context, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy. return value depends on the requested information (as specified with pname). either a glint or a glenum. examples gl.getbufferparameter(gl.array_buffer, gl.buffer_
size); specifications specification status comment webgl 1.0the definition of 'getbufferparameter' in that specification. recommendation initial definition for webgl. opengl es 2.0the definition of 'glgetbufferparameteriv' in that specification. standard man page of the (similar) opengl es 2 api. webgl 2.0the definition of 'getbufferparameter' i...
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
al format of the currently bound renderbuffer. the default is gl.rgba4. possible return values: gl.rgba4: 4 red bits, 4 green bits, 4 blue bits 4 alpha bits. gl.rgb565: 5 red bits, 6 green bits, 5 blue bits. gl.rgb5_a1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit. gl.depth_component16: 16 depth bits. gl.stencil_index8: 8 stencil bits. gl.renderbuffer_green_
size: returns a glint that is the resolution
size (in bits) for the green color. gl.renderbuffer_blue_
size: returns a glint that is the resolution
size (in bits) for the blue color. gl.renderbuffer_red_
size: returns a glint that is the resolution
size (in bits) for the red color. gl.renderbuffer_alpha_
size: returns a glint that is the resolution
size (in bits) for the alpha component. gl.rende...
...int that is the resolution
size (in bits) for the green color. gl.renderbuffer_blue_
size: returns a glint that is the resolution
size (in bits) for the blue color. gl.renderbuffer_red_
size: returns a glint that is the resolution
size (in bits) for the red color. gl.renderbuffer_alpha_
size: returns a glint that is the resolution
size (in bits) for the alpha component. gl.renderbuffer_depth_
size: returns a glint that is the resolution
size (in bits) for the depth component. gl.renderbuffer_stencil_
size: returns a glint that is the resolution
size (in bits) for the stencil component. when using a webgl 2 context, the following value is available additionally: gl.renderbuffer_samples: returns a glint indicating the number of samples of the image of the currently bound renderbuf...
WebGLRenderingContext - Web APIs
n set and query the state of the graphics machine, send data to the webgl, and execute draw commands. saving the state of the graphics machine within a single context interface is not unique to webgl. this is also done in other graphics {̣{glossary("api")}}, such as the canvas 2d rendering context. however, the properties and variables you can tweak are different for each api. effect of canvas
size on rendering with webgl with scissor() and clear() we can demonstrate how the webgl drawing buffer is affected by the
size of the canvas. the
size of the first canvas is set to the styled element
size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assign...
...the first canvas is set to the styled element
size, determined by css. this is done by assigning the width and height properties of the canvas to the values of the clientwidth and clientheight properties, respectively. in contrast, no such assignment is done for the second canvas. the internal width and height properties of the canvas remain at default values, which are different than the actual
size of the canvas element in the browser window. the effect is clearly visible when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and
size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape,
size, and position. <p>compare the two canvases.</p> <canvas>your browser does not seem to support ...
A basic 2D WebGL animation example - Web APIs
nate system. that is, (0, 0) is at the top-left corner and the bottom-right corner is at (600, 460). vertex shader first, let's take a look at the vertex shader. its job, as always, is to convert the coordinates we're using for our scene into clipspace coordinates (that is, the system by which (0, 0) is at the center of the context and each axis extends from -1.0 to 1.0 regardless of the actual
size of the context). <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 avertexposition; uniform vec2 uscalingfactor; uniform vec2 urotationvector; void main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urota...
...(currenttime) { let deltaangle = ((currenttime - previoustime) / 1000.0) * degreespersecond; currentangle = (currentangle + deltaangle) % 360; previoustime = currenttime; animatescene(); }); } the first thing that needs to be done in order to draw a frame of the animation is to clear the background to the desired color. in this case, we set the viewport based on the
size of the <canvas>, call clearcolor() to set the color to use when clearing content, then we clear the buffer with clear(). next, the current rotation vector is computed by converting the current rotation in degrees (currentangle) into radians, then setting the first component of the rotation vector to the sine of that value and the second component to the cosine. the currentrotation vector is now ...
Hello GLSL - Web APIs
ore moving on to the next. hello world program in glsl a very simple first shader program. ...
...5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-
size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_point
size = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) ret...
Hello vertex attributes - Web APIs
<p>first encounter with attributes and sending data to gpu. ...
...vas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-
size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_point
size = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getren...
Textures from code - Web APIs
h calculations done per-pixel in the fragment shader. <p>texture from code. ...
... } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-
size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_point
size = 128.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict"...
Adding 2D content to a WebGL context - Web APIs
s of shader, with the example in mind of drawing a 2d shape into the webgl context. vertex shader each time a shape is rendered, the vertex shader is run for each vertex in the shape. its job is to transform the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual
size, or any other factors. the vertex shader must perform the needed transforms on the vertex's position, make any other adjustments or calculations it needs to make on a per-vertex basis, then return the transformed vertex by saving it in a special variable provided by glsl, called gl_position. the vertex shader can, as needed, also do things like determine the coordinates within the face's textur...
... gl.depthfunc(gl.lequal); // near things obscure far things // clear the canvas before we start drawing on it. gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit); // create a perspective matrix, a special matrix that is // used to simulate the distortion of perspective in a camera. // our field of view is 45 degrees, with a width/height // ratio that matches the display
size of the canvas // and we only want to see objects between 0.1 units // and 100 units away from the camera. const fieldofview = 45 * math.pi / 180; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to...
Geometry and reference spaces in WebXR - Web APIs
of your code. everything you draw must have its coordinates mapped to fit into this space, either explicitly within your code, or by using a transform to adjust the coordinates of all vertices. the most efficient way, of course, is to design your objects and code to use the same coordinate system as webgl does. the webgl coordinates and lengths are transformed automatically at render time to the
size of the viewport in which the scene is being rendered. angles angles are specified using radians. to convert degrees to radians, simply multiply the value in degrees by π/180. the following code snippet shows two simple functions, degreestoradians() and radianstodegrees(), which convert back and forth between the two units for measuring angles. const radians_per_degree = math.pi / 180.0; let ...
...transforms that need to be performed when rendering 3d scenes: translation is the use of a matrix to shift the position of a point through the virtual space. this motion can be along any of the object's axes, or any combination of them. rotation is the application of a matrix that rotates a point around the origin of the object's coordinate system. scaling is the use of a matrix to alter the
size of an object. note that when we say that a transform applies to a point, it also, by extension, can be applied to a collection of points. since an object is represented by some number of polygons made up of a number of points in space, applying the same transform to every point that makes up the object will apply that same transform to the entire object overall. transforms can also be applied t...
Movement, orientation, and motion: A WebXR example - Web APIs
ort for each view, we handle the typical scenario in which the views for each eye are each rendered onto half of the webgl frame. the xr hardware then handles ensuring that each eye only sees the portion of that image that is intended for that eye. note: in this example, we're visually presenting the frame both on the xr device and on the screen. to ensure that the on-screen canvas is the right
size to allow us to do this, we set its width to be equal to the individual xrview width multiplied by the number of views; the canvas height is always the same as the viewport's height. the two lines of code that adjust the canvas
size are not needed in regular webxr rendering loops. applying the user inputs the applyviewercontrols() function, which is called by drawframe() before beginning to re...
...ces to eard loadtexture() loads the image at a given url and creates a webgl texture from it. if the image's dimensions aren't both powers of two (see the ispowerof2() function), mipmapping is disabled and wrapping is clamped to the edges. this is because optimized rendering of mipmapped textures only works for textures whose dimensions are powers of two in webgl 1. webgl 2 supports arbitratily-
sized textures for mipmapping. ispowerof2() returns true if the specified value is a power of two; otherwise returns false. putting it all together when you take all of this code and add in the html and the other javascript code not included above, you get what you see when you try out this example on glitch. remember: as you wander around, if you get lost, just hit the r key to reset yourself to...
Using the Web Animations API - Web APIs
we could do that by setting her animation.currenttime to 4 seconds, like so: alic...
... to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration: 8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half her
size to twice her
size over 8 seconds. then we pause her: alicechange.pause(); if we had left her paused at the beginning of her animation, she’d start at half her full
size, as if she’d drunk the entire bottle already! we want to set her animation’s “playhead” in the middle, so she’s already halfway done. we could do that by setting her animation.currenttime to 4 seconds, like so: alicechange.currenttim...
Controlling multiple parameters with ConstantSourceNode - Web APIs
n>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 { vertical-align: middle; } .right input { vertical-ali...
...ode.offset.value = volumecontrol.value; } that simple function controls the gain on both nodes. all we have to do is set the value of the constantsourcenode's offset parameter. that value becomes the node's constant output value, which is fed into all of its outputs, which are, as set above, gainnode2 and gainnode3. while this is an extremely simple example, imagine having a 32 oscillator synthe
sizer with multiple linked parameters in play across a number of patched nodes. being able to shorten the number of operations to adjust them all will prove invaluable for code
size and performance both. starting the oscillators when the user clicks the play/pause toggle button while the oscillators aren't playing, the startoscillators() function gets called. function startoscillators() { oscnode...
Window.getComputedStyle() - Web APIs
eve those styles using getcomputedstyle(), and print them into the text content of the <p>. html <p>hello</p> css p { width: 400px; margin: 0 auto; padding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-
size is ' + compstyles.getpropertyvalue('font-
size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.'; result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property. however, the two objects have different purposes: the object from getcomputedstyle is read-only, and s...
...ult = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ', result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains active values for css property longhand names. for example, border-bottom-width instead of the border-width and border shorthand property names. it is safest to query values with only longhand names like font-
size. shorthand names like font will not work with most browsers. css property values may be accessed using the getpropertyvalue(propname) api or by indexing directly into the object such as obj['z-index'] or obj.zindex. the values returned by getcomputedstyle are resolved values. these are usually the same as css 2.1’s computed values, but for some older properties like width, height, or padding,...
Window.requestFileSystem() - Web APIs
and directory entries api, requestfilesystem() is especially non-standard; only chrome implements it, and all other browser makers have decided that they will not implement it. it has even been removed from the proposed specification. do not use this method! syntax this method is prefixed with webkit in all browsers that implement it (that is, google chrome). window.requestfilesystem(type,
size, successcallback[, errorcallback]); parameters type the type of storage to request. specify window.temporary if it's acceptable for the browser to delete the files at its own discretion, such as if storage space runs low, or window.persistent if you need the files to remain in place unless the user or the web site or app explicitly permit it. persistent storage requires that the user grant t...
...k[, errorcallback]); parameters type the type of storage to request. specify window.temporary if it's acceptable for the browser to delete the files at its own discretion, such as if storage space runs low, or window.persistent if you need the files to remain in place unless the user or the web site or app explicitly permit it. persistent storage requires that the user grant the site quota.
size the amount of storage space you wish to have allocated for your app's use. successcallback a function which is invoked when the file system has been successfully obtained. the callback receives a single parameter: a filesystem object representing the file system the app has permission to use. errorcallback optional an optional parameter specifying a function which is called if an error occur...
XMLHttpRequestEventTarget - Web APIs
width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fi...
... xmlhttprequ...
Web APIs
ution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rre
size observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api interfaces this is a list of all the interfaces (that is, types of objects) that a...
... rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsensor renderingcontext report reportingobserver reportingobserveroptions request requestdestination re
sizeobserver re
sizeobserverentry response rsahashedimportparams rsahashedkeygenparams rsaoaepparams rsapssparams s svgaelement svgaltglyphdefelement svgaltglyphelement svgaltglyphitemelement svgangle svganimatecolorelement svganimateelement svganimatemotionelement svganimatetransformelement svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svg...
ARIA Test Cases - Accessibility
upon initia...
...n e.g. windows explorer: the tree item should be read as described above, and the level should be announced if it changes. as expandable items are opened and closed, the state change should be announced immediately. optionally, when opening an item, announce the number of sub items that just became available. ...
ARIA: listbox role - Accessibility
example listboxes with rearrangeable options: examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed. best practices to be keyboard ac...
...<option>blue</option> <option>violet</option> <option>periwinkle</option> </select> more examples scrollable listbox example: single-select listbox that scrolls to reveal more options, similar to html select with
size attribute greater than one. collapsible dropdown listbox example: single-select collapsible listbox that expands when activated, similar to html select with the attribute
size="1". example listboxes with rearrangeable options: examples of both single-select and multi-select listboxes with accompanying toolbars where options can be added, moved, and removed. best practices to be keyboard accessible, authors should manage focus of all descendants of this role. it is recommended that authors use different styling for the selection when the list is not focused, e.g.
Web Accessibility: Understanding Colors and Luminance - Accessibility
ubject because color is as much about the physiology of the eye and human perception as it is about light emitting from a computer screen. environment matters. perception of color in a well-lit room will be different than perception of that same color on that same computer screen in a dark room. in terms of accessibility, the use of certain color-combinations have more impact than others. font
size, font style (some fonts are so thin or fancy that they present accessibility problems on their own), background color, the
size of the background space around the text, even pixel densities and more all affect how color is delivered from the screen. (see understanding success criterion 1.4.3: contrast) a viewer's distance from the screen, the ambient background, the health of his eyes, and more ...
...third, it so happens that these "blue sensitive" cones tend to be located at the rims of our eyeballs, away from the center (fovea centralis) of the back of the eyeball, where the red and green cones tend to cluster. there is software that actually takes advantage of that fact. because we do not perceive the color "blue" as well as other colors, for example, some algorithms for compressing image
sizes remove the parts of the image with "blue" in them more heavily than other parts of an image. this fact is also used by televsion signals to allocate less bandwidth to the yellow-blue part of their signal, thus saving bandwidth. another important point to consider is the ambience of light surrounding the color. the color will appear differently if the background lighting is dark, or light. one...
Color contrast - Accessibility
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 for the aaa rating (s...
-webkit-mask-position-x - CSS: Cascading Style Sheets
percentages are calculated against the horizontal dimension of the box padding area. that means, a value of 0% means the left edge of the image is...
... the box padding area. that means, a value of 0% means the left edge of the image is aligned with the box's left padding edge and a value of 100% means the right edge of the image is aligned with the box's right padding edge. left equivalent to 0%. center equivalent to 50%. right equivalent to 100%. ...
-webkit-mask-position-y - CSS: Cascading Style Sheets
percentages are calculated against the vertical dimension of the box padding area. a value of 0% means the top edge of the image is aligned with the...
...dimension of the box padding area. a value of 0% means the top edge of the image is aligned with the box's top padding edge and a value of 100% means the bottom edge of the image is aligned with the box's bottom padding edge. top equivalent to 0%. bottom equivalent to 100%. center equivalent to 50%. ...
::cue - CSS: Cascading Style Sheets
individually, to avoid creating boxes and obscuring unexpectedly large areas of the media. ...
...s and obscuring unexpectedly large areas of the media. ...
::first-line (:first-line) - CSS: Cascading Style Sheets
/* selects the first line of a <p> */ p::first-line { color: red; } css3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-line, introduced in css2. ...
...le properties only a small subset of css properties can be used with the ::first-line pseudo-element: all font-related properties: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-
size, font-
size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-
size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-transform, and line-height text-shadow, text-decoration, text...
::marker - CSS: Cascading Style Sheets
the ::marker css pseudo-element selects the marker box of a list item, which typically contains a bullet or number. it works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements. ...
... properties the white-space property color text-combine-upright, unicode-bidi and direction properties the content property all animation and transition properties the specification states that additional css properties may be supported in future. syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-
size: 1.5em; } result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification. working draft no significant change. css lists module level 3the definition of '::marker' in that specification. working draft initial definition. ...
::placeholder - CSS: Cascading Style Sheets
note: in most browsers, the appearance of placeholder text is a translucent or light gray color by default. ...
... a label that has been programmatically associated with an input using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements. mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-
size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification. working draft initial definition. ...
additive-symbols - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
negative - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
pad - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
prefix - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
suffix - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
symbols - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
@page - CSS: Cascading Style Sheets
marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. ...
... marks adds crop and/or registration marks to the document. bleed specifies the extent beyond the page box at which the page rendering is clipped. description you can't change all css properties with @page. ...
@viewport - CSS: Cascading Style Sheets
which the document is viewed. it's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as microsoft edge). lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. this is typically based on the
size of the window on desktop browsers that aren't in full screen mode. on mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. this may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available scr...
...nitial zoom factor. min-zoom sets the minimum zoom factor. max-zoom sets the maximum zoom factor. user-zoom controls whether or not the user should be able to change the zoom factor. orientation controls the document's orientation. viewport-fit controls the display of the document on non-rectangular displays. formal syntax @viewport { <group-rule-body> } examples setting viewport
size, zoom, and orientation @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status comment css round display level 1the definition of '@viewport' in that specification. working draft defined the viewport-fit descriptor. ...
Mastering margin collapsing - CSS: Cascading Style Sheets
note that the margins of floating and absolutely positioned elements never collapse. margin collapsing occurs in three basic cases: adjacent siblings the margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats). ...
...-bottom, then its top and bottom margins collapse. some things to note: more complex margin collapsing (of more than two margins) occurs when the above cases are combined. these rules apply even to margins that are zero, so the margin of a descendant ends up outside its parent (according to the rules above) whether or not the parent's margin is zero. when negative margins are involved, the
size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin. when all margins are negative, the
size of the collapsed margin is the smallest (most negative) margin. this applies to both adjacent elements and nested elements. examples html <p>the bottom margin of this paragraph is collapsed …</p> <p>… with the top margin of this parag...
Handling Overflow in Multicol - CSS: Cascading Style Sheets
in this guide we look at how multicol deals with overflow, both inside the column boxes and in situations where there is more content than will fit into the container. overflow inside column boxes an overflow situation happens when an item's
size is larger than the column box. for example, the situation could happen when an image in a column is wider than the column-width value or the width of the column based on the number of columns declared with column-count. ...
...he column-width value or the width of the column based on the number of columns declared with column-count. in this situation, the content should visibly overflow into the next column, rather than be clipped by the column box. you can see an example of this below, with an image of the expected rendering as, at the time of writing, browsers deal with this differently. if you want an image to
size down to fit the column box, the standard responsive images solution of setting max-width: 100% will achieve that for you. more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented media context, such as print, or a continuous media context, such as a web page. in fragmented media, once a fragment (for example a page) is filled with columns, the...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
dn documentation for the visibility property. ...
...tem causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-
size stable. thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main
size, but is guaranteed to have no effect on its cross
size and won’t cause the rest of the page’s layout to "wobble". flex line wrapping is re-done after collapsing, however, so the cross-
size of a flex container with multiple lines might or might not change.” - collapsed items this behaviour is useful if you want to target flex items using javascript to show and hide content for example. the...
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
the default is auto) spec: https://drafts.csswg.org/css-flexbox/#flex-basis-property @mixin flex-basis($value: auto) { -webkit-flex-basis: $value; flex-basis: $value; } flexbox "flex" (shorthand) the flex property specifies the components of a flexible length; flex-grow factor, flex-shrink factor, and the flex-basis. when an element is a flex item, flex is consulted instead of the main
size property to determine the main
size of the element. if an element is not a flex item, flex has no effect. values: see the flex reference for values and default spec: https://drafts.csswg.org/css-flexbox/#flex-property @mixin flex($fg: 1, $fs: 0, $fb: auto) { // set a variable to be used by box-flex properties $fg-boxflex: $fg; // box-flex only supports a flex-grow value so lets gra...
...x: $fg $fs $fb; } flexbox justify content the justify-content property aligns flex items along the main axis of the current line of the flex container. this is done after any flexible lengths and any auto margins have been resolved. typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum
size. it also exerts some control over the alignment of items when they overflow the line. note: space-* values not supported in older syntaxes. values: flex-start (default) | flex-end | center | space-between | space-around spec: https://drafts.csswg.org/css-flexbox/#justify-content-property @mixin justify-content($value: flex-start) { @if $value == flex-start { -webkit-box-pack: star...
Flow Layout and Overflow - CSS: Cascading Style Sheets
this guide explains how overflow works when working with normal flow. what is overflow? giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example: the content goes into the box. once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. ...
... specify both values in which case the first is used for overflow-x and therefore the horizontal direction, and the second for overflow-y and the vertical direction. in the below example, i have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar. flow relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-
size and inline-
size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. the level 3 overflow module also includes flow relative properties for overflow - overflow-block and overflow-inline. these correspond to overflow-x and overflow-y but the mapping depends on the writing mode of the document. these properties currently do...
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
. however, replaced elements such as form controls which include text, should match the writing mode in use. logical properties and values once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. for example, if you give a box a width of 100px, in horizontal-tb that would control the
size in the inline direction. in vertical-lr it controls the
size in the block direction because it does not rotate with the text. therefore, we have new properties of block-
size and inline-
size. if we give our block an inline-
size of 100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-
size will always mean the
size in the inline direction. the css logica...
... summary in most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. this can be used to properly typeset vertical languages or for creative reasons. css is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block
size. this will be useful when creating components which can work in different writing-modes. see also writing modes external resources css writing modes, jen simmons on 24 ways ...
Grid template areas - CSS: Cascading Style Sheets
ng grid-template-areas can be especially nice as it is easy to see in the code what your element looks like. as a very simple example we can create a “media object”. this is a component with space for an image or other media on one side and content on the other. the image might be displayed on the right or left of the box. our grid is a two-column track grid, with the column for the image
sized at 1fr and the text 3fr. if you wanted a fixed width image area, then you could set the image column as a pixel width, and assign the text area 1fr. a single column track of 1fr would then take up the rest of the space. we give the image area a grid area name of img and the text area content, then we can lay those out using the grid-template-areas property. * {box-sizing: border-box;} .media...
...earlier in this guide. .wrapper { display: grid; grid-template: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) "sd sd sd main main main main main main" minmax(100px, auto) "ft ft ft ft ft ft ft ft ft" minmax(100px, auto) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ; } the first value is our grid-template-areas value but we also declare the
size of the row at the end of each row. this is what the minmax(100px, auto) is doing. then after grid-template-areas we have a forward slash, after that is an explicit track listing of column tracks. grid the grid shorthand goes a step further and also sets properties used by the implicit grid. so you will be setting: grid-template-rows grid-template-columns grid-template-areas grid-auto-row...
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
need to control the layout by row and column – use a grid content out or layout in? in addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. flexbox works from the content out. an ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. you let the
size of the content decide how much individual space each item takes up. if the items wrap onto a new line, they will work out their spacing based on their
size and the available space on that line. grid works from the layout in. when you use css grid layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to ...
... 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. ...
Subgrid - CSS: Cascading Style Sheets
line nested grid items up with the main grid. if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent. for example, if you use grid-template-columns: subgrid and the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same
size as the parent grid. gaps are inherited but can also be overridden with a different gap value. line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names. subgrid for columns in the example below i have a grid layout with nine 1fr column tracks and four rows that are a minimum of 100px tall. i place .item from column line 2 to 7, and row 2 to ...
... both. to demonstrate this, i have positioned one item in the example below using the parent lines, and one using the subgrid lines. using subgrids other than needing to take care of items that do not fit in your subgrid, a subgrid acts very similarly to any nested grid; the only difference is that the track sizing of the subgrid is set on the parent grid. as with any nested grid however, the
size of content in the subgrid can change the track sizing, assuming a track sizing method is used that allows content to affect the
size. in such a case, auto-
sized row tracks for example will grow to fit content in the main grid and content in the subgrid. as the subgrid value acts in much the same way as a regular nested grid, it is easy to switch between the two. for example, if you realise that ...
Basic Shapes - CSS: Cascading Style Sheets
y a position value. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70px. i have then set the position value to 30%. in the live example you can play with increasing or decreasing the
size of the circle by changing the
size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset(). as an additional example, if you use the keywords top left for position, you can make a quarter circle shape in the top left corner of the page. the example below uses generated content to create a quarter circle shape for text to flow around. t...
...example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. this means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. you can change these values to see how the ellipse changes. the keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the
size of the floated element reference box. polygon() the final basic shape is the most complex and enables the creation of many side shapes by way of creating a polygon(). this shape accepts three or more pairs of values (a polygon must at least draw a triangle). these values are co-ordinates drawn with reference to the reference box. in the example below i have created a shape for text to follow...
Using CSS transforms - CSS: Cascading Style Sheets
a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-
size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, ...
..., the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-
size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { 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, ...
Grid wrapper - CSS: Cascading Style Sheets
hin a central wrapper, while also allowing items to break out and align to the edge of the containing element or page when desired. requirements items placed on the grid should be able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid. ...
...e able to align to a horizontally-centered max-width wrapper and/or the outer edges of the grid. recipe download this example choices made this recipe uses the css grid minmax() function to define the grid track
sizes in the grid-template-columns property. for the central columns with a maximum width we can set a minimum value of 0 or greater and a maximum value that specifies the maximum
size the column tracks will grow to. using a numeric unit (pixels, ems, rems) will create a fixed maximum
size for the central wrapper, whereas using percentage values or viewport units will mean this wrapper grows or shrinks in response to its context. the outer two columns have a maximum
size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. us...
Layout mode - CSS: Cascading Style Sheets
there are several of them: normal flow — all elements are part of normal flow until you do something to take them out of it. normal flow includes block layout, designed for laying out boxes such as paragraphs and inline layout, which lays out inline items such as text. table layout, designed for laying out tables. float layout, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it. ...
...es. float layout, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it. positioned layout, designed for positioning elements without much interaction with other elements. multi-column layout, designed for laying content out in columns as in a newspaper. flexible box layout, designed for laying out complex pages that can be re
sized smoothly. grid layout, designed for laying out elements relative to a fixed grid. note: not all css properties apply to all layout modes. most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode. ...
Selector list - CSS: Cascading Style Sheets
the css selector list (,) selects all the matching nodes. /* selects all matching elements */ span, div { border: red 2px solid; } to reduce the
size of style sheets, one can group selectors in comma-separated lists. syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists. ...
...style sheets, one can group selectors in comma-separated lists. syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists. #main, .content, article { font-
size: 1.1em; } selector list invalidation a downside to using selector lists is that the following aren't equivalent: h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } h1, h2:maybe-unsupported, h3 { font-family: sans-serif } this is because a single unsupported selector in a selector list invalidates the whole rule. a way to remedy th...
CSS Tutorials - CSS: Cascading Style Sheets
written one single line of css? — this is for you. it explains the fundamental concepts of the language and guides you in writing basic stylesheets. using multiple backgrounds backgrounds are fundamental for nice styling: css allows you to set several of them on each box. this tutorial explains how they interact and how to achieve nice effects. scaling background images css allows you to re
size images used as an element's background. this tutorial describes how to achieve this in a simple way. media queries the
size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. media queries are the fundamental building blocks in achieving web sites that render everywhere in their best quality. understanding z-index controlling superposition of box...
... use for people without too much experience. css multi-column layouts css3 introduces a new layout allowing you to easily define multiple columns in an element. though multi-column text is not that common on devices like screens, this is particularly useful on printed pages, or for indexes. css flexible boxes layouts this new layout allow you to give boxes flexibility, allowing them to be re
sized smoothly. it is a powerful way to describe complex interfaces. ...
aspect-ratio - CSS: Cascading Style Sheets
the aspect-ratio css property sets a preferred aspect ratio for the box, which will be used in the calculation of auto
sizes and some other layout functions. this property is not yet implemented in browsers, however some browsers are implementing this internally in order to provide the aspect ratio mapping described below. syntax aspect-ratio: 1 / 1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. ...
...plemented in browsers, however some browsers are implementing this internally in order to provide the aspect ratio mapping described below. syntax aspect-ratio: 1 / 1; /* global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset; values <auto> replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio.
size calculations involving intrinsic aspect ratio always work with the content box dimensions. <ratio> the box’s preferred aspect ratio is the specified ratio of width / height.
size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing. formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table b...
background-repeat - CSS: Cascading Style Sheets
images are repeated. a background image can be repeated along the horizontal and vertical axes, or not repeated at all. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. by default, the repeated images are clipped to the
size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space). syntax /* keyword values */ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /* two-value syntax: horizontal | vertical */ background-repeat: repeat space; backgroun...
...hout clipping. the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. the background-position property is ignored unless only one image can be displayed without clipping. the only case where clipping happens using space is when there isn't enough room to display one image. round as the allowed space increases in
size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. they will then com...
border-image-source - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
box-shadow - CSS: Cascading Style Sheets
to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it. <spread-radius> this is a fourth <length> value. positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. if not specified, it will be 0 (the shadow will be the same
size as the element). <color> see <color> values for possible keywords and notations. if not specified, it defaults to currentcolor. interpolation each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. for each shadow, if both input shadows are or are not inset, then the ...
...e air, i'll rise.</q> <p>— maya angelou</p> </blockquote> css blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); } result setting zero for offset and blur when the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-
size on all sides. the shadows are drawn back to front, so the first shadow sits on top of subsequent shadows. when the border-radius is set to 0, as is the default, the corners of the shadow will be, well, corners. had we put in a border-radius of any other value, the corners would have been rounded. we added a margin the
size of the widest box-shadow to ensure the shadow doesn't overlap adjacent el...
break-inside - CSS: Cascading Style Sheets
l suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. ...
...rticle> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-
size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-
size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in that specification. candidate recommendation no change. css regions module level 1the definition of 'break-inside' in that specification. working draft ...
calc() - CSS: Cascading Style Sheets
calc() functions, in which case the inner ones are treated as simple parentheses. formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text
size, be sure that one of the values includes a relative length unit, for example: h1 { font-
size: calc(1.5rem + 3vw); } this ensures that text
size will scale if the page is zoomed. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 usage with integers when calc() is used where an <integer> is expected, the value will be r...
...xtruding past the edge of their container, while maintaining an appropriate margin. let's look at some css: input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available window width. then, to ensure that input fields retain an appropriate
size, we use calc() again to establish that they should be the width of their container minus 1em. then, the following html makes use of this css: <form> <div id="formbox"> <label>type something:</label> <input type="text"> </div> </form> nested calc() with css variables you can also use calc() with css variables. consider the following code: .foo { --widtha: 100px; --widthb: calc(v...
caret-color - CSS: Cascading Style Sheets
entage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
clip-path - CSS: Cascading Style Sheets
5,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z'); /* box and shape values combined */ clip-path: padding-box circle(50px at 0 100px); /* global values */ clip-path: inherit; clip-path: initial; clip-path: unset; the clip-path property is specified as one or a combination of the values listed below. values <clip-source> a <url> referencing an svg <clippath> element. <basic-shape> a shape whose
size and position is defined by the <geometry-box> value. if no geometry box is specified, the border-box will be used as the reference box. <geometry-box> if specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. if specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clippi...
...box uses the object bounding box as the reference box. stroke-box uses the stroke bounding box as the reference box. view-box uses the nearest svg viewport as the reference box. if a viewbox attribute is specified for the element creating the svg viewport, the reference box is positioned at the origin of the coordinate system established by the viewbox attribute and the dimension of the
size of the reference box is set to the width and height values of the viewbox attribute. none no clipping path is created. note: a computed value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1. formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs ...
column-gap (grid-column-gap) - 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. 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. ...
...p: 3px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the
size of the gap between columns, defined as a <length>. the <length> property's value must be non-negative. <percentage> the
size of the gap between columns, defined as a <percentage>. the <percentage> property's value must be non-negative. formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of...
column-width - CSS: Cascading Style Sheets
e specified value, the single column's width will be smaller than the declared column width. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property can help you create responsive designs that fit different screen
sizes. especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. in horizontal text these are width, column-width, column-gap, and column-rule-width. syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* global values */...
...olutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> css .content-box { column-width: 100px; } result specifications specification status comment css writing modes level 4the definition of 'column-width' in that specification. candidate recommendation adds intrinsic
sizes via the keywords min-content, max-content, fill-available, and fit-content. css multi-column layout modulethe definition of 'column-width' in that specification. working draft initial definition. ...
conic-gradient() - CSS: Cascading Style Sheets
stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering of color stops in css gradients follows the same rules as color stops in svg gradients. description as with any gradient, a conic gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to, or
size of the <image> is set to something other than the element
size. to create a conic gradient that repeats so as to fill a 360 degree rotation, use the repeating-conic-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. ...
...cts you can create with conic gradients. oddly, a checkerboard is one of them. by creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard. conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); background-
size: 25% 25%; and, yes, you can mix and match different angle units, but don't. the above is hard to read. accessibility concerns browsers do not provide any special information on background images to assistive technology. this is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. while it is possible to create pie...
content - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<counter-style> = <counter-style-name> | symbols()where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
cross-fade() - CSS: Cascading Style Sheets
tags> = ltr | rtl<image-src> = <url> | <string><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]...
...ize> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )<alpha-value> = <number> | <percentage><hue> = <number> | <angle>where <side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
flex-grow - CSS: Cascading Style Sheets
the flex-grow css property sets the flex grow factor of a flex item main
size. 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 /* <number> values */ flex-grow: 3; flex-grow: 0.6; /* global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; the flex-grow property is specified as a single <number>. values <number> see <number>. negative values are invalid. defaults to 0. ...
...row: 3; flex-grow: 0.6; /* global values */ flex-grow: inherit; flex-grow: initial; flex-grow: unset; the flex-grow property is specified as a single <number>. values <number> see <number>. negative values are invalid. defaults to 0. description this property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). the main
size is either width or height of the item which is dependent on the flex-direction value. the remaining space is the
size of the flex container minus the
size of all flex items'
sizes together. if all sibling items have the same flex grow factor, then all items will receive the same share of remaining space, otherwise it is distributed according to the ratio defined by the different flex grow factor...
font-family - CSS: Cascading Style Sheets
contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. values are separated by commas to indicate that they are alternatives. the browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule. it is often convenient to use the shorthand property font to set font-
size and other font related properties all at once. you should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. this lets the browser select an acceptable fallback font when necessary. the font-family property specifies a list of fonts, from highest priority to lowest. font selection does not simply stop at the first ...
...t priority to lowest. font selection does not simply stop at the first font in the list that is on the user's system. rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. (however, this doesn't work in internet explorer 6 or earlier.) when a font is only available in some styles, variants, or
sizes, those properties may also influence which font family is chosen. syntax /* a font family name and a generic family name */ font-family: gill sans extrabold, sans-serif; font-family: "goudy bookletter 1911", sans-serif; /* a generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-...
font-smooth - CSS: Cascading Style Sheets
font smoothing, typically grayscale. grayscale - render text with grayscale antialiasing, as opposed to the subpixel. switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-
size> | <length>where <absolute-
size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos. in both cases the smoothed font should look slightly lighter in weight. for those of you not on a macos system, here is a screenshot (the live v...
...the safari/chromium and firefox equivalents that turn on font-smoothing on macos. in both cases the smoothed font should look slightly lighter in weight. for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-
size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard. ...
font-synthesis - CSS: Cascading Style Sheets
the font-synthesis css property controls which missing typefaces, bold or italic, may be synthe
sized by the browser. 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 this property can take any one of the following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthe
sized. weight indicates that a bold typeface may be synthe
sized if needed. style indicates that an italic typeface may be synthe
sized if needed. description most standard western fonts includ...
...legibility of the text. in these cases, it may be desirable to switch off the browser's default font-synthesis. formal definition initial valueweight styleapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthe
size me! 站直。</em> <br/> <em class="no-syn">don't synthe
size me! 站直。</em> css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } result specifications specification status comment css fonts module level 3the definition of 'font-synthesis' in that specification. candidate recommendation initial d...
grid-column - 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. constituent properties this property is a shorthand for the following css properties: grid-column-end grid-column-start syntax this property is specified as one or two <grid-line> values. ...
...d boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
grid-row - 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. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
...positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ...
initial-letter - CSS: Cascading Style Sheets
3 lines */ initial-letter: 3.0 2; /* initial letter occupies 3 lines and sinks 2 lines */ /* global values */ initial-letter: inherit; initial-letter: initial; initial-letter: unset; syntax the keyword value normal, or a <number> optionally followed by an <integer>. values normal no special initial-letter effect. text behaves as normal. <number> defines the
size of the initial letter, in terms of how many lines it occupies. negative values are not allowed. <integer> defines the number of lines the initial letter should sink when the
size of it is given. values must be greater than zero. if omitted, it duplicates the
size value, floored to the nearest positive whole number. formal definition initial valuenormalapplies to::first-letter pseudo-elements...
...ven. values must be greater than zero. if omitted, it duplicates the
size value, floored to the nearest positive whole number. ...
mask-border-source - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
mask-border - CSS: Cascading Style Sheets
ial valueas each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to
size of the mask border imagemask-border-width: relative to width/height of the mask border image areacomputed valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made ...
...epeat'> | <'mask-border-mode'> examples setting a bitmap-based mask border in this example, we will mask an element's border with a diamond pattern. the source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally: html <div id="bitmap">this element is surrounded by a bitmap-based mask border! pretty neat, isn't it?</div> css to match the
size of a single diamond, we will use a value of 90 divided by 3, or 30, for slicing the image into corner and edge regions. a repeat value of round will make the mask slices fit evenly, i.e., without clipping or gaps. div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-bo...
mask-image - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-co...
mask-position - CSS: Cascading Style Sheets
s <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outside of the element's box. ...
...es representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outside of the element's box. ...
mask-repeat - CSS: Cascading Style Sheets
syntax one or more <repeat-style> values, separated by commas. values <repeat-style> the one-value syntax is a shorthand for the full two-value syntax: single value two-value equivalent repeat-x repeat no-repeat repeat-y no-rep...
...le without clipping. the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. the mask-position property is ignored unless only one image can be displayed without clipping. the only case where clipping happens using space is when there isn't enough room to display one image. round as the allowed space increases in
size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. they will then compress to 225px. no-repeat ...
max-height - CSS: Cascading Style Sheets
ax-height: min-content; max-height: fit-content(20em); /* global values */ max-height: inherit; max-height: initial; max-height: unset; values <length> defines the max-height as an absolute value. <percentage> defines the max-height as a percentage of the containing block's height. auto the browser will calculate and select a max-height for the specified element. none no limit on the
size of the box. max-content the intrinsic preferred max-height. min-content the intrinsic minimum max-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure oth...
...ax-height. min-content the intrinsic minimum max-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text
size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the height of the containin...
max-width - CSS: Cascading Style Sheets
ontent; max-width: min-content; max-width: fit-content(20em); /* global values */ max-width: inherit; max-width: initial; max-width: unset; values <length> defines the max-width as an absolute value. <percentage> defines the max-width as a percentage of the containing block's width. auto the browser will calculate and select a max-width for the specified element. none no limit on the
size of the box. max-content the intrinsic preferred max-width. min-content the intrinsic minimum max-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other c...
...ed max-width. min-content the intrinsic minimum max-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text
size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation typea len...
min() - CSS: Cascading Style Sheets
you can provide more than two arguments, if you have multiple constraints to apply. ...
...mber> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font
size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function). mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum
size for a label and input another use case for css functions is to set a maximum
size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks. let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px soli...
<percentage> - CSS: Cascading Style Sheets
note: only calculated values can be inherited. thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a <length> value) will be accessible on the inherited property, not the percentage value. syntax the <percentage> data type consists of a <number> followed by the percentage sign (%). optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. ...
...ined by the timing function associated with the animation. examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-
size <div style="font-
size:18px;"> <p>full-
size text (18px)</p> <p><span style="font-
size:50%;">50% (9px)</span></p> <p><span style="font-
size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification. editor's draft ...
perspective-origin - CSS: Cascading Style Sheets
an absolute length value or relative to the height of the element. the value may be negative. top, a keyword being a shortcut for the 0 length value. center, a keyword being a shortcut for the 50% percentage value. bottom, a keyword being a shortcut for the 100% percentage value. ...
..., the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-
size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { 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, ...
position - CSS: Cascading Style Sheets
sticky. it's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block. most of the time, absolutely positioned elements that have height and width set to auto are
sized so as to fit their contents. however, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). they can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto. except for the case just described (of absolutely positio...
...p and bottom are specified (technically, not auto), top wins. if both left and right are specified, left wins when direction is ltr (english, horizontal japanese, etc.) and right wins when direction is rtl (persian, arabic, hebrew, etc.). accessibility concerns ensure that elements positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text
size. mdn understanding wcag, guideline 1.4 explanations visual presentation: understanding sc 1.4.8 | understanding wcag 2.0 performance & accessibility scrolling elements containing fixed or sticky content can cause performance and accessibility issues. as a user scrolls, the browser must repaint the sticky or fixed content in a new location. depending on the content needing to be repainted, ...
repeating-linear-gradient() - CSS: Cascading Style Sheets
the length of the basic linear gradient. thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. this can be altered with repeating the first color again as the last color. as with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type. syntax /* a repeating gradient tilted 45 degrees, starting blue and f...
...e's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image
size, meaning the gradient will not repeat. <color-hint> th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. the length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. if omitted, the midpoint of the color transition is the midpoint between two color stops. note: rendering ...
scroll-snap-type - CSS: Cascading Style Sheets
inline axis only. both the scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis). mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or re
sized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. if content is added, moved, deleted or re
sized the scroll offset may be adjusted to maintain the resting on that snap point. formal definition init...
...ndatory-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) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results s...
shape-outside - CSS: Cascading Style Sheets
<string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> | <
size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3}...
...centage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] | [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<
size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> &&...
text-decoration-thickness - CSS: Cascading Style Sheets
cifies the thickness of the text decoration line as a <percentage> of 1em in the current font. a percentage inherits as a relative value, and so therefore scales with changes in the font. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font
size. ...
...es with changes in the font. the browser must use a minimum of 1 device pixel. for a given application of this property, the thickness is constant across the whole box it is applied to, even if there are child elements with a different font
size. formal definition initial valueautoapplies toall elements. ...
text-emphasis - CSS: Cascading Style Sheets
ive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the text-emphasis property is quite different from text-decoration. the text-decoration property does not inherit, and the decoration specified is applied across the whole element. however, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents. the
size of the emphasis symbol, like ruby symbols, is about 50% of the
size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks. text-emphasis doesn't reset the value of text-emphasis-position. this is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. in the very rare cases w...
... css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2> result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification. candidate recommendation initial definition ...
text-underline-offset - CSS: Cascading Style Sheets
set: initial; text-underline-offset: unset; the text-underline-offset property is specified as a single value from the list below. values auto the browser chooses the appropriate offset for underlines. <length> specifies the offset of underlines as a <length>, overriding the font file suggestion and the browser default. it is recommended to use em units so the offset scales with the font
size. <percentage> specifies the offset of underlines as a <percentage> of 1 em in the element's font. a percentage inherits as a relative value, and so therefore scales with changes in the font. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font
sizes or vertical alignment. fo...
... therefore scales with changes in the font. for a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font
sizes or vertical alignment. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font
size of the element itselfcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it. only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-underline-offset: 1em; } ...
matrix3d() - CSS: Cascading Style Sheets
; 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(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background:...
... the matrix below describes the following transformations: translates every x point by -50px translates every y point by -100px translates every z point by 0 ...
Setting up adaptive streaming media sources - Developer guides
we can support most modern browsers. mpeg-dash hls (http live streaming) in order to adaptively stream media we need to split the media up into chunks. we are required to provide several different quality files split up over several time points. the more qualities and time points there are, the more 'adaptive' your stream will be, but we will usually want to find a pragmatic balance between
size, time to encode and adaptiveness. the good news is that once we have encoded our media in the appropriate format we are pretty good to go. for adaptive streaming over http, no special server-side components are required. both mpeg-dash and hls use a playlist format to structure the component piece of media that make the possible streams. various bitrate streams are broken into segments and plac...
...saved as one or more .ts media files. apple provides tools to convert media files to the appropriate format. hls encoding tools ther are a number of useful tools available for hls encoding for hls live stream encoding adobe provide a media encoder for mac. the stream segmenter — provided by apple for mac platforms — takes a media stream from a local network and splits media into equally
sized media files together with an index file. apple also provides a file segmenter for mac — which takes a suitably encoded file, splits it up and produces a index file, in a similar fashion to the stream segmenter. note: you can find more details about these tools at using http live streaming. index files (playlists) the hls index file (much like mpeg-dash's .mpd file) contains the informat...
Rich-Text Editing in Mozilla - Developer guides
=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-
size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odo...
..."p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('font
size',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc(...
Making content editable - Developer guides
=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-
size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odo...
..."p">paragraph <p></option> <option value="pre">preformatted <pre></option> </select> <select onchange="formatdoc('fontname',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- font -</option> <option>arial</option> <option>arial black</option> <option>courier new</option> <option>times new roman</option> </select> <select onchange="formatdoc('font
size',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>-
size -</option> <option value="1">very small</option> <option value="2">a bit small</option> <option value="3">normal</option> <option value="4">medium-large</option> <option value="5">big</option> <option value="6">very big</option> <option value="7">maximum</option> </select> <select onchange="formatdoc(...
A hybrid approach - Developer guides
ems with responsive design by incorporating server-side techniques. for example, an often-criticized point about responsive web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway. one such technique for dealing with this issue uses server-side user-agent detection along with the wurfl device capability library to send a properly
sized image for the user’s device. a range of products are also emerging which provide this as a service. of course, this technique suffers from all the downsides associated with user-agent detection. but even if it does not work, it is no worse with respect to performance than only using fluid images. by combining the techniques listed above, we can get a mobile web development strategy that is bo...
...f resolutions, being built with responsive design in mind. future plans include exploring serving images based on user-agent. so far there is not much to see for mobile, since things are still in the formative stages of development, but you can always watch the new mozilla.org grow up on github. subscribe to the mozilla webdev blog for updates about our progress. summary no approach is a one-
size-fits-all solution. web applications that want to heavily modify the content or user flow for mobile users should probably go for a separate mobile site. content-oriented pages that don’t need to modify their content for mobile users will be satisfied with responsive design. if you need to slightly alter the site’s message for mobile users, but want to reap the benefits of a responsive design,...
Mobile-friendliness - Developer guides
what is mobile friendliness? mobile friendliness can mean a multitude of things, depending on who you’re talking to. it can be helpful to think of it in terms of three goals for improving your site’s user experience: presentation, content, and performance. ...
......
HTML attribute: multiple - HTML: Hypertext Markup Language
on>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown. ...
...cerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other relevant information. when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting
size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expand on focus, harming usability. don't do that. if you do change the appearance of a select, and even if you don't, make sure to inform the user that more than one option can be selected by another method. ...
<a>: The Anchor element - HTML: Hypertext Markup Language
tion. skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious. webaim: "skip navigation" links how-to: use skip navigation links mdn / understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1
size and proximity
size interactive elements, like links, should provide an area large enough that it is easy to activate them. this helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. a minimum
size of 44×44 css pixels is recommended. text-only links in prose content are exempt from this requirement, but it’s still a good ...
...e them. this helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. a minimum
size of 44×44 css pixels is recommended. text-only links in prose content are exempt from this requirement, but it’s still a good idea to make sure enough text is hyperlinked to be easily activated. understanding success criterion 2.5.5: target
size target
size and 2.5.5 quick test: large touch targets proximity interactive elements, like links, placed in close visual proximity should have space separating them. spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content. spacing may be created using css properties like margin. hand tremors and the giant-button-problem spec...
<big>: The Bigger Text element - HTML: Hypertext Markup Language
the obsolete html big element (<big>) renders the enclosed text at a font
size one level larger than the surrounding text (medium becomes large, for example). the
size is capped at the browser's maximum permitted font
size. usage note: as it was purely presentational, this element has been removed in html5 and shouldn't be used anymore. instead web developers should use the css font-
size property to adjust the font
size. attributes this element has no other attributes than the global attributes, common to all elements. examples here we see examples showing the use of <big> followed by an example showing how to accomplish the same results using modern css syntax instead. using <big> this example uses the obsolete <big> element to increase the
size of some text. html <p> this is...
...mon to all elements. examples here we see examples showing the use of <big> followed by an example showing how to accomplish the same results using modern css syntax instead. using <big> this example uses the obsolete <big> element to increase the
size of some text. html <p> this is the first sentence. <big>this whole sentence is in bigger letters.</big> </p> result using css font-
size this example uses the css font-
size property to increase the font
size by one level. css .bigger { font-
size: larger; } html <p> this is the first sentence. <span class="bigger">this whole sentence is in bigger letters.</span> </p> result dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmls...
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
de the <canvas> block. that content will be rendered both on older browsers that don't support canvas and in browsers with javascript disabled. providing a useful fallback text or sub dom helps to make the the canvas more accessible. required </canvas> tag unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). ...
...ith javascript disabled. providing a useful fallback text or sub dom helps to make the the canvas more accessible. required </canvas> tag unlike the <img> element, the <canvas> element requires the closing tag (</canvas>). sizing the canvas using css versus html the displayed
size of the canvas can be changed using css, but if you do this the image is scaled during rendering to fit the styled
size, which can make the final graphics rendering end up being distorted. it is better to specify your canvas dimensions by setting the width and height attributes directly on the <canvas> elements, either directly in the html or by using javascript. maximum canvas
size the maximum
size of a <canvas> element is very large, but the exact
size depends on the browser. the following is some data we've ...
<font> - HTML: Hypertext Markup Language
usage note: do not use this element! though once normalized in html 3.2, it was deprecated in html 4.01, at the same time as all elements related to styling only, then made obsolete in html5. starting with html 4, html does not convey styling information anymore (outside the <style> element or the style attribute of each element). for any new web development, styling should be written using css only. the former behavior of the <font> element can be achieved, and even better controlled using the css fonts css properties. attributes like all other html elements, this element supports the global attributes. ...
...named color or a color specified in the hexadecimal #rrggbb format. face this attribute contains a comma-separated list of one or more font names. the document text in the default style is rendered in the first font face that the client's browser supports. if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system.
size this attribute specifies the font
size as either a numeric or relative value. numeric values range from 1 to 7 with 1 being the smallest and 3 the default. it can be defined using a relative value, like +2 or -3, which set it relative to the value of the
size attribute of the <basefont> element, or relative to 3, the default value, if none does exist. dom interface this element implements the...
<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
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 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> <hr> <p> this is the second paragraph of text. this is the second paragraph of t...
... 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 ...
<input type="datetime-local"> - HTML: Hypertext Markup Language
selectable in the time picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make saturdays selectable). however, this does not seem to work effectively in any implementation at the time of writing. controlling input
size <input type="datetime-local"> doesn't support form control sizing attributes such as
size. you'll have to resort to css for customizing the
sizes of these elements. setting timezones one thing the datetime-local input type doesn't provide is a way to set the time zone and/or locale of the date/time control. this was available in the datetime input type, but this type is now obsolete, having be...
...ding your hardware to x86_64 or ia64. if you are stuck with other hardware, you can try to emulate 64-bit hardware inside a 32-bit virtual machine, but most vms don't support this kind of virtualization, stability may suffer, and performance will definately suffer greatly. the y10k problem (often client-side) in many servers, dates are stored as numbers instead of as strings--numbers of a fixed
size and agnostic of format (aside from endianness). after the year 10,000, those numbers will just be a little bit bigger than before, so many servers will not see issues with forms submitted after the year 10,000. the problem is with the client side of things: parsing of dates with more than 4 digits in the year. <!--midnight of january 1st, 10000: the exact time of y10k--> <input type="datetime-l...
Standard metadata names - HTML: Hypertext Markup Language
nt="dark light"> this works at the document level in the same way that the css color-scheme property lets individual elements specify their preferred and accepted color schemes. your styles can adapt to the current color scheme using the prefers-color-scheme css media feature. the css device adaptation specification defines the following metadata name: viewport: gives hints about the
size of the initial
size of the viewport. used by mobile devices only. values for the content of <meta name="viewport"> value possible subvalues description width a positive integer number, or the text device-width defines the pixel width of the viewport that you want the web site to be rendered at. height a positive i...
... viewport that you want the web site to be rendered at. height a positive integer, or the text device-height defines the height of the viewport. not used by any browser. initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport
size. maximum-scale a positive number between 0.0 and 10.0 defines the maximum amount to zoom in. it must be greater or equal to the minimum-scale or the behaviour is undefined. browser settings can ignore this rule and ios10+ ignores it by default. minimum-scale a positive number between 0.0 and 10.0 defines the minimum zoom level. it must be smaller ...
<slot> - HTML: Hypertext Markup Language
no role permitted dom interface htmlslotelement attributes this element includes the global attributes. name the slot's name. a named slot is a <slot> element with a name attribute. ...
...te id="element-details-template"> <style> details {font-family: "open sans light", helvetica, arial, sans-serif } .name {font-weight: bold; color: #217ac0; font-
size: 120% } h4 { margin: 10px 0 -8px 0; background: #217ac0; color: white; padding: 2px 6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-
size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </summary> <div class="attributes"> <h4>attributes</h4> <slot name="attributes"><p>none</p></slot> </div> </det...
<small>: the side comment element - HTML: Hypertext Markup Language
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. ...
...flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. examples basic usage <p>this is the first sentence. <small>this whole sentence is in small letters.</small> </p> css alternative <p>this is the first sentence. <span style="font-
size:0.8em">this whole sentence is in small letters.</span> </p> specifications specification status comments html living standardthe definition of '<small>' in that specification. living standard html5the definition of '<small>' in that specification. recommendation html 4.01 specificationthe definition of '<small>' in that specificat...
<spacer> - HTML: Hypertext Markup Language
acer> no longer supported by any major browser and the same effects can now be achieved using simple css. firefox, which is the descendant of netscape's browsers, removed support for <spacer> in version 4. attributes like all other html elements, this element supports the global attributes. type this attribute determines type of spacer. possible values are horizontal, vertical and block.
size this attribute can be used for defining
size of spacer in pixels when type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when type is block. height this attribute can be used for defining height of spacer in pixels when type is block. align this attribute determines alignment of spacer. possible values are left, right and center. examp...
...pixels when type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when type is block. height this attribute can be used for defining height of spacer in pixels when type is block. align this attribute determines alignment of spacer. possible values are left, right and center. example <span>just a text node</span> <spacer type="horizontal"
size="10"></spacer> <span>just another text node</span> <spacer type="block" width="10" height="10"></spacer> specification not part of any specification. ...
itemprop - HTML: Hypertext Markup Language
he itemscope attribute on the element that declares the property. each value is either a string or a group of name-value pairs (i.e. an item). an outer item representing a person, and an inner one representing a band <div itemscope> <p>name: <span itemprop="name">amanda</span></p> <p>band: <span itemprop="band" itemscope> <span itemprop="name">jazz band</span> (<span itemprop="
size">12</span> players)</span></p> </div> the outer item above has two properties, "name" and "band". the "name" is "amanda", and the "band" is an item in its own right, with two properties, "name" and "
size". the "name" of the band is "jazz band", and the "
size" is "12". the outer item in this example is a top-level microdata item. items that are not part of others are called top-level microda...
...ata items. all the properties separated from their items this example is the same as the previous one, but all the properties are separated from their items <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span></p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span></p> <p>
size: <span itemprop="
size">12</span> players</p> </div> this gives the same result as the previous example. the first item has two properties, "name", set to "amanda", and "band", set to another item. that second item has two further properties, "name", set to "jazz band", and "
size", set to "12". an item can have multiple properties with the same name and different values. ice cream with two f...
Link types - HTML: Hypertext Markup Language
e hyperlink leads to a resource giving further help about the page as a whole. <a>, <area>, <form>, <link> none. icon defines a resource for representing the page in the user interface, usually an icon (auditory or visual). in the browser, it is usually referred to as the favicon. ...
...instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. ...
Compression in HTTP - HTTP
over the years, algorithms also got more efficient, and new ones are supported by clients and servers. in practice, web developers don't need to implement compression mechanisms, both browsers and servers have it implemented already, but they have to be sure that the server is configured adequately. ...
...uired quality. there are numerous tools that are specialized for this. lossy compression algorithms are usually more efficient than loss-less ones. as compression works better on a specific kind of files, it usually provides nothing to compress them a second time. in fact, this is often counter productive as the cost of the overhead (algorithms usually need a dictionary that add to the initial
size) can be higher than the extra gain in compression resulting in a larger file. do not use the two following techniques for files in a compressed format. end-to-end compression for compression, end-to-end compression is where the largest performance improvements of web sites reside. end-to-end compression refers to a compression of the body of a message that is done by the server and will last u...
Connection management in HTTP/1.x - HTTP
d the header is no longer needed (but it is often added as a defensive measure against cases requiring a fallback to http/1.0). http pipelining http pipelining is not activated by default in modern browsers: buggy proxies are still common and these lead to strange and erratic behaviors that web developers cannot foresee and diagnose easily. pipelining is complex to implement correctly: the
size of the resource being transferred, the effective rtt that will be used, as well as the effective bandwidth, have a direct incidence on the improvement provided by the pipeline. without knowing these, important messages may be delayed behind unimportant ones. the notion of important even evolves during page layout! http pipelining therefore brings a marginal improvement in most cases only. pipeli...
...s, this can result in significant delay before the next request is seen by the server. pipelining is the process to send successive requests, over the same persistent connection, without waiting for the answer. this avoids latency of the connection. theoretically, performance could also be improved if two http requests were to be packed into the same tcp message. the typical mss (maximum segment
size), is big enough to contain several simple requests, although the demand in
size of http requests continues to grow. not all types of http requests can be pipelined: only idempotent methods, that is get, head, put and delete, can be replayed safely: should a failure happen, the pipeline content can simply be repeated. today, every http/1.1-compliant proxy and server should support pipelining, th...
Feature Policy - HTTP
ess or modify the browser's default behavior for certain features. examples of what you can do with feature policy: change the default behavior of autoplay on mobile and third party videos. restrict a site from using sensitive apis like camera or microphone. allow iframes to use the fullscreen api. block the use of outdated apis like synchronous xhr and document.write(). ensure images are
sized properly and are not too big for the viewport. concepts and usage feature policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. essentially, you write a policy, which is an allowed list of origins for each feature. for every feature controlled by feature policy, the feature is only enabled in the current document or frame if its ...
...ce. to avoid breaking existing web content, the default for such policy-controlled features is to allow the functionality to be used by all origins. best practices are then enforced by using policies that disable the policy-controlled features. for more details see "enforcing best practices for good user experiences". the features include: layout-inducing animations legacy image formats over
sized images synchronous scripts synchronous xmlhttprequest unoptimized images un
sized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused. in some cases, you may wish to strictly limit how such functionality is used on a website. there are policy-controlled features to allow functionality to be enabled/disabled ...
CSP: report-uri - HTTP
urity-policy: default-src https:; report-uri /csp-violation-report-endpoint/ /csp-violation-report-endpoint/ could for example run a php something like the following that logs the json detailing the violation and, if the violation is the first one added to the log file, sends an email to an administrator: <?php // start configure $log_file = dirname(__file__) . '/csp-violations.log'; $log_file_
size_limit = 1000000; // bytes - once exceeded no further entries are added $email_address = 'admin@example.com'; $email_subject = 'content-security-policy violation'; // end configuration $current_domain = preg_replace('/www\./i', '', $_server['server_name']); $email_subject = $email_subject . ' on ' . $current_domain; http_response_code(204); // http 204 no content $json_data = file_get_contents(...
...tent-security-policy violation occurred on " . $current_domain . ":\n\n" . $json_data . "\n\nfurther cps violations will be logged to the following log file, but no further email notifications will be sent until this log file is deleted:\n\n" . $log_file; mail($email_address, $email_subject, $message, 'content-type: text/plain;charset=utf-8'); } else if (file
size($log_file) > $log_file_
size_limit) { exit(0); } file_put_contents($log_file, $json_data, file_append | lock_ex); } specifications specification status comment content security policy level 3the definition of 'report-uri' in that specification. working draft no changes. content security policy level 2the definition of 'report-uri' in that specifi...
HTTP headers - HTTP
ndicates the layout viewport width in css pixels. the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if viewport-width occurs in a message more than once, the last value overrides all previous occurrences. width the width request header field is a number that indicates the desired resource width in physical pixels (i.e. intrinsic
size of an image). the provided pixel value is a number rounded to the smallest following integer (i.e. ceiling value). if the desired resource width is not known at the time of the request or the resource does not have a display width, the width header field can be omitted. if width occurs in a message more than once, the last value overrides all previous occurrences conditionals last-...
...nt expresses the user's tracking preference. tk indicates the tracking status of the corresponding response. downloads content-disposition indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the browser should present a “save as” dialog. message body information content-length the
size of the resource, in decimal number of bytes. content-type indicates the media type of the resource. content-encoding used to specify the compression algorithm. content-language describes the human language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. content-location indicates an alternate location for the returned...
431 Request Header Fields Too Large - HTTP
to help those running into this error, indicate which of the two is the problem in the response body — ideally, also include which headers are too large. ...
...to help those running into this error, indicate which of the two is the problem in the response body — ideally, also include which headers are too large. ...
HTTP response status codes - HTTP
eld. 414 uri too long the uri requested by the client is longer than the server is willing to interpret. 415 unsupported media type the media format of the requested data is not supported by the server, so the server is rejecting the request. 416 range not satisfiable the range specified by the range header field in the request can't be fulfilled; it's possible that the range is outside the
size of the target uri's data. 417 expectation failed this response code means the expectation indicated by the expect request header field can't be met by the server. 418 i'm a teapot the server refuses the attempt to brew coffee with a teapot. 421 misdirected request the request was directed at a server that is not able to produce a response. this can be sent by a server that is not configured...
... puts it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict. 429 too many requests the user has sent too many requests in a given amount of time ("rate limiting"). 431 request header fields too large the server is unwilling to process the request because its header fields are too large. the request may be resubmitted after reducing the
size of the request header fields. 451 unavailable for legal reasons the user-agent requested a resource that cannot legally be provided, such as a web page censored by a government. server error responses 500 internal server error the server has encountered a situation it doesn't know how to handle. 501 not implemented the request method is not supported by the server and cannot be handled.
A re-introduction to JavaScript (JS tutorial) - JavaScript
= {}; these are semantically equivalent; the second is called object literal syntax and is more convenient. this syntax is also the core of json format and should be preferred at all times. object literal syntax can be used to initialize an object in its entirety: var obj = { name: 'carrot', for: 'max', // 'for' is a reserved word, use '_for' instead. details: { color: 'orange',
size: 12 } }; attribute access can be chained together: obj.details.color; // orange obj['details']['
size']; // 12 the following example creates an object prototype(person) and an instance of that prototype(you). function person(name, age) { this.name = name; this.age = age; } // define an object var you = new person('you', 24); // we are creating a new person named "you" aged 24. once...
...vgarray([2, 3, 4, 5]); // 3.5 but it would be nice to be able to reuse the function that we've already created. luckily, javascript lets you call a function with an arbitrary array of arguments, using the apply() method of any function object. avg.apply(null, [2, 3, 4, 5]); // 3.5 the second argument to apply() is the array to use as arguments; the first will be discussed later on. this empha
sizes the fact that functions are objects too. you can achieve the same result using the spread operator in the function call. for instance: avg(...numbers) javascript lets you create anonymous functions. var avg = function() { var sum = 0; for (var i = 0, j = arguments.length; i < j; i++) { sum += arguments[i]; } return sum / arguments.length; }; this is semantically equivalent to...
JavaScript data types and data structures - JavaScript
it masking also tends to make the code more difficult to read, understand, and maintain. it may be necessary to use such techniques in very constrained environments, like when trying to cope with the limitations of local storage, or in extreme cases (such as when each bit over the network counts). this technique should only be considered when it is the last measure that can be taken to optimize
size. bigint type the bigint type is a numeric primitive in javascript that can represent integers with arbitrary precision. with bigints, you can safely store and operate on large integers even beyond the safe integer limit for numbers. a bigint is created by appending n to the end of an integer or by calling the constructor. you can obtain the safest value that can be incremented with numbers by...
...s. for example, indexof (searching a value in the array) or push (adding an element to the array), and so on. this makes arrays a perfect candidate to represent lists or sets. typed arrays are new to javascript with ecmascript 2015, and present an array-like view of an underlying binary data buffer. ...
Iterators and generators - JavaScript
eturn {done: true}. the most common iterator in javascript is the array iterator, which simply returns each value in the associated array in sequence. while it is easy to imagine that all iterators could be expressed as arrays, this is not true. arrays must be allocated in their entirety, but iterators are consumed only as necessary. because of this, iterators can express sequences of unlimited
size, such as the range of integers between 0 and infinity. here is an example which can do just that. it allows creation of a simple range iterator which defines a sequence of integers from start (inclusive) to end (exclusive) spaced step apart. its final return value is the
size of the sequence it created, tracked by the variable iterationcount. function makerangeiterator(start = 0, end = infinity...
...if you need to do this, use iterables. generator functions while custom iterators are a useful tool, their creation requires careful programming due to the need to explicitly maintain their internal state. generator fun...
JavaScript modules - JavaScript
. returns an object containing the canvas's 2d context and the wrapper's id. createreportlist() — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into. returns the list's id. square.js — contains: name — a constant containing the string 'square'. draw() — draws a square on a specified canvas, with a specified
size, position, and color. returns an object containing the square's
size, position, and color. reportarea() — writes a square's area to a specific report list, given its length. reportperimeter() — writes a square's perimeter to a specific report list, given its length. aside — .mjs versus .js throughout this article, we've used .js extensions for our module files, but in other re...
...t function provided by a module, and also helps javascript modules to interoperate with existing commonjs and amd module systems (as explained nicely in es6 in depth: modules by jason orendorff; search for "default exports"). let's look at an example as we explain how it works. in our basic-modules square.js you can find a function called randomsquare() that creates a square with a random color,
size, and position. we want to export this as our default, so at the bottom of the file we write this: export default randomsquare; note the lack of curly braces. we could instead prepend export default onto the function and define it as an anonymous function, like this: export default function(ctx) { ... } over in our main.js file, we import the default function using this line: import random...
RangeError: repeat count must be less than infinity - JavaScript
the javascript exception "repeat count must be less than infinity" occurs when the string.prototype.repeat() method is used with a count argument that is infinity. message rangeerror: argument out of range (edge) rangeerror: repeat count must be less than infinity and not overflow maximum string
size (firefox) rangeerror: invalid count value (chrome) error type rangeerror what went wrong? the string.prototype.repeat() method has been used. it has a count parameter indicating the number of times to repeat the string. it must be between 0 and less than positive infinity and cannot be a negative number. the range of allowed values can be described like this: [0, +∞). the resulting string can also not be larger than the maximum string
size, which can differ in javascript engines. in fir...
...en used. it has a count parameter indicating the number of times to repeat the string. it must be between 0 and less than positive infinity and cannot be a negative number. the range of allowed values can be described like this: [0, +∞). the resulting string can also not be larger than the maximum string
size, which can differ in javascript engines. in firefox (spidermonkey) the maximum string
size is 228 -1 (0xfffffff). examples invalid cases 'abc'.repeat(infinity); // rangeerror 'a'.repeat(2**28); // rangeerror valid cases 'abc'.repeat(0); // '' 'abc'.repeat(1); // 'abc' 'abc'.repeat(2); // 'abcabc' 'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) ...
Array.prototype.slice() - JavaScript
'orange', 'lemon', 'apple', 'mango'] // citrus contains ['orange','lemon'] using slice> in the following example, slice creates a new array, newcar, from mycar. both include a reference to the object myhonda. when the color of myhonda is changed to purple, both arrays reflect the change. // using slice, create newcar from mycar. let myhonda = { color: 'red', wheels: 4, engine: { cylinders: 4,
size: 2.2 } } let mycar = [myhonda, 2, 'cherry condition', 'purchased 1997'] let newcar = mycar.slice(0, 2) // display the values of mycar, newcar, and the color of myhonda // referenced from both arrays. console.log('mycar = ' + json.stringify(mycar)) console.log('newcar = ' + json.stringify(newcar)) console.log('mycar[0].color = ' + mycar[0].color) console.log('newcar[0].color = ' + newcar[0].colo...
...car[0].color = ' + newcar[0].color) // change the color of myhonda. myhonda.color = 'purple' console.log('the new color of my honda is ' + myhonda.color) // display the color of myhonda referenced from both arrays. console.log('mycar[0].color = ' + mycar[0].color) console.log('newcar[0].color = ' + newcar[0].color) this script writes: mycar = [{color: 'red', wheels: 4, engine: {cylinders: 4,
size: 2.2}}, 2, 'cherry condition', 'purchased 1997'] newcar = [{color: 'red', wheels: 4, engine: {cylinders: 4,
size: 2.2}}, 2] mycar[0].color = red newcar[0].color = red the new color of my honda is purple mycar[0].color = purple newcar[0].color = purple array-like objects slice method can also be called to convert array-like objects/collections to a new array. you just bind the method t...
RegExp.prototype.exec() - JavaScript
result[1] === "brown" result[2] === "jumps" index the 0-based index of the match in the string. 4 input the original string that was matched against. "the quick brown fox jumps over the lazy dog" re lastindex the index at...
...ig; let result = re.exec('the quick brown fox jumps over the lazy dog'); the following table shows the results for this script: object property/index description example result [0] the full string of characters matched "quick brown fox jumps" [1], ...[n] the parenthe
sized substring matches, if any. the number of possible parenthe
sized substrings is unlimited. result[1] === "brown" result[2] === "jumps" index the 0-based index of the match in the string. 4 input the original string that was matched against. "the quick brown fox jumps over the lazy dog" re lastindex the index at which to start the next match. if g is absent, this will always...
String.prototype.big() - JavaScript
splayed in a big font. usage note: the <big> element has been removed in html5 and shouldn't be used anymore. instead web developers should use css properties. syntax str.big() return value a string containing a <big> html element. description the big() method embeds a string in a <big> tag: "<big>str</big>". ...
... a <big> html element. description the big() method embeds a string in a <big> tag: "<big>str</big>". examples using big() the following example uses string methods to change the
size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.font
size(7)); // <font
size=7>hello, world</font
size> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.font
size = '2em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.big' in that specification. ...
String.prototype.codePointAt() - JavaScript
eproperty` on dom elements try { var object = {}; var $defineproperty = object.defineproperty; var result = $defineproperty(object, object, object) && $defineproperty; } catch(error) {} return result; }()); var codepointat = function(position) { if (this == null) { throw typeerror(); } var string = string(this); var
size = string.length; // `tointeger` var index = position ? number(position) : 0; if (index != index) { // better `isnan` index = 0; } // account for out-of-bounds indices: if (index < 0 || index >=
size) { return undefined; } // get the first code unit var first = string.charcodeat(index); var second; if ( // check if i...
... index) { // better `isnan` index = 0; } // account for out-of-bounds indices: if (index < 0 || index >=
size) { return undefined; } // get the first code unit var first = string.charcodeat(index); var second; if ( // check if it’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate
size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { d...
String.prototype.repeat() - JavaScript
nd us a pull request. syntax str.repeat(count) parameters count an integer between 0 and +infinity, indicating the number of times to repeat the string. return value a new string containing the specified number of copies of the given string. exceptions rangeerror: repeat count must be non-negative. rangeerror: repeat count must be less than infinity and not overflow maximum string
size. polyfill this method has been added to the ecmascript 2015 specification and may not be available in all javascript implementations yet. however, you can polyfill string.prototype.repeat() with the following snippet: if (!string.prototype.repeat) { string.prototype.repeat = function(count) { 'use strict'; if (this == null) throw new typeerror('can\'t convert ' + this + ' to o...
... count = math.floor(count); if (str.length == 0 || count == 0) return ''; // ensuring count is a 31-bit integer allows us to heavily optimize the // main part. ...
String.prototype.small() - JavaScript
the small() method creates a <small> html element that causes a string to be displayed in a small font. syntax str.small() return value a string containing a <small> html element. description the small() method embeds a string in a <small> tag: "<small>str</small>". ...
...tml element. description the small() method embeds a string in a <small> tag: "<small>str</small>". examples using small() the following example uses string methods to change the
size of a string: var worldstring = 'hello, world'; console.log(worldstring.small()); // <small>hello, world</small> console.log(worldstring.big()); // <big>hello, world</big> console.log(worldstring.font
size(7)); // <font
size="7">hello, world</font
size> with the element.style object you can get the element's style attribute and manipulate it more generically, for example: document.getelementbyid('yourelemid').style.font
size = '0.7em'; specifications specification ecmascript (ecma-262)the definition of 'string.prototype.small' in that specification. ...
String - JavaScript
deprecated. avoid these methods. they are of limited use, as they provide only a subset of the available html tags and attributes. ...
...oid these methods. they are of limited use, as they provide only a subset of the available html tags and attributes. string.prototype.anchor() <a name="name"> (hypertext target) string.prototype.big() <big> string.prototype.blink() <blink> string.prototype.bold() <b> string.prototype.fixed() <tt> string.prototype.fontcolor() <font color="color"> string.prototype.font
size() <font
size="
size"> string.prototype.italics() <i> string.prototype.link() <a href="url"> (link to url) string.prototype.small() <small> string.prototype.strike() <strike> string.prototype.sub() <sub> string.prototype.sup() <sup> examples string conversion it's possible to use string as a more reliable tostring() alternative, as it works when used on null, undefined, and on symbols. for exam...
WebAssembly.Table() constructor - JavaScript
syntax new webassembly.table(tabledescriptor); parameters tabledescriptor an object that can contain the following members: element a string representing the type of value to be stored in the table. at the moment this can only have a value of "anyfunc" (functions). initial the initial number of elements of the webassembly table. maximum optional the maximum number of elements the webassembly table is allowed to grow to. exceptions if tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. ...
...f elements the webassembly table is allowed to grow to. exceptions if tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial
size of 2 elements. we then print out the table length and contents of the two indexes (retrieved via table.prototype.get() to show that the length is two and both elements are null. var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); // "2" console.log(tbl.get(0)); // "null" console.log(tbl.get(1)); // "null" we then create an import object that contains the...
Destructuring assignment - JavaScript
destructuring assignment allows you to unpack the parts out of this array easily, ignoring the full match if it is not needed. function parseprotocol(url) { const parsedurl = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedurl) { return false; } console.log(parsedurl); // ["https://developer.mozilla.org/web/javascript", "https", "develope...
... lastname: 'doe' } }; function userid({id}) { return id; } function whois({displayname, fullname: {firstname: name}}) { return `${displayname} is ${name}`; } console.log(userid(user)); // 42 console.log(whois(user)); // "jdoe is john" this unpacks the id, displayname and firstname from the user object and prints them. setting a function parameter's default value function drawchart({
size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { console.log(
size, coords, radius); // do some chart drawing } drawchart({ coords: {x: 18, y: 30}, radius: 30 }); in the function signature for drawchart above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: {
size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}. you could have also wri...
JavaScript typed arrays - JavaScript
that to read and write the contents of the buffer. typed array views typed array views have self-descriptive names and provide views for all the usual numeric types like int8, uint32, float64 and so forth. there is one special typed array view, the uint8clampedarray. it clamps the values between 0 and 255. this is useful for canvas data processing, for example. ...
... a buffer, here with a fixed length of 16-bytes: let buffer = new arraybuffer(16); at this point, we have a chunk of memory whose bytes are all pre-initialized to 0. there's not a lot we can do with it, though. we can confirm that it is indeed 16 bytes long, and that's about it: if (buffer.bytelength === 16) { console.log("yes, it's 16 bytes."); } else { console.log("oh no, it's the wrong
size!"); } before we can really work with this buffer, we need to create a view. let's create a view that treats the data in the buffer as an array of 32-bit signed integers: let int32view = new int32array(buffer); now we can access the fields in the array just like a normal array: for (let i = 0; i < int32view.length; i++) { int32view[i] = i * 2; } this fills out the 4 entries in the array ...
icons - Web app manifests
yes the icons member specifies an array of objects representing image files that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. ...
...iles that can serve as application icons for different contexts. for example, they can be used to represent the web application amongst a list of other applications, or to integrate the web application with an os's task switcher and/or system preferences. examples "icons": [ { "src": "icon/lowres.webp", "
sizes": "48x48", "type": "image/webp" }, { "src": "icon/lowres", "
sizes": "48x48" }, { "src": "icon/hd_hi.ico", "
sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "
sizes": "72x72" } ] values image objects may contain the following values: member description
sizes a string containing space-separated image dimensions. src the path to the image file. if src is a relative url, the bas...
Web app manifests
gnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "
sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "
sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "
sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "
sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "
sizes": "168...
... "
sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "
sizes": "96x96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "
sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "
sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "
sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is spe...
Using images in HTML - Web media technologies
<picture> the html <picture> element contains zero or more <source> elements and one <img> element which provides versions of an image for different display/device scenarios. the browser considers each child <source> element and chooses the best match among them. css object-fit the object-fit css property sets how the content of a replaced element, such as an <img> or <video>, should be re
sized to fit its container. object-position the object-position css property specifies the alignment of content in a selected replaced element within the element's box. areas of the box which aren't covered by the replaced element's object will show the element's background. background-image the background-image css property sets one or more background images for an element. guides these ar...
...ual use cases, capabilities, and compatibility factors. additionally, this article provides guidance for selecting the best image file type for a given situation. mapping the width and height attributes of media container elements to their aspect-ratio this changes how browsers load images so their aspect ratios are calculated by the browser early on and can later be used to correct the display
size of an image before it's loaded. other topics related topics that may be of interest. learn html: responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen
sizes, resolutions, and other such features — and look at what tools html provides to help implement them. ...
Animation performance and frame rate - Web Performance
uding <canvas> and webgl, css animation, <video>, animated gifs and even animated pngs and other image types. the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate. for animated media, such as video and animated gifs, the main performance concern is file
size - downloading the file
size fast enough to not negatively impact performance is the greatest issue. code based animations, be it css, svg, <canvas>, webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small. these animations can consume cpu and/or cause jank. while performance is sensitive to the particular system and its load, performance tools ...
...reen isn't updated until it is complete. css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint. left max-width border-width margin-left font-
size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is trig...
Lazy loading - Web Performance
(non-critical) and load these only when needed. it's a way to shorten the length of the critical rendering path, which translates into reduced page load times. lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation. overview as the web has evolved, we have come to see huge increases in the number and
size of assets sent to users. between 2011 and 2019, the median resource weight increased from ~100kb to ~400kb for desktop and ~50kb to ~350kb for mobile. while image
size has increased from ~250kb to ~900kb on desktop and ~100kb to ~850kb on mobile. one of the methods we can use to tackle this problem is to shorten the critical rendering path length by lazy loading resources that are not critical ...
...ill include this polyfill to provide support for older and currently incompatible browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the browser’s viewport. event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, re
size or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...
Optimizing startup performance - Web Performance
ding jpeg files and turning them into raw texture data for later use by webgl), that's great to do in workers. when dealing with data supported by the browser (for example, decoding image data), use the decoders built into the browser or device rather than rolling your own or using one from the original codebase. the provided one is almost certainly significantly faster, and will reduce your app
size to boot. in addition, the browser may automatically parallelize these decoders. any data processing that can be done in parallel should be. don't do one chunk of data after another; do them all at once when possible! don't include scripts or stylesheets that don't participate in the critical path in your startup html file. load them only when needed. reduce the side of your javascript files. t...
...rver as possible. you should also consider gzipping your data to make it as small as you can. gpu factors compiling shaders and uploading textures to the gpu can take time, especially for really intricate games. while this happens with native (non-web) games too, it can still be pretty annoying. avoid doing this without keeping the user apprised that the game is in fact still starting up. data
size do your best to optimize the
size of your game data; smaller level files will download and be processed faster than larger ones. subjective factors anything you can do to help keep the user engaged during the startup process will help make the time seem to go by faster. for games, consider having background music playing or a nice splash screen displayed. in between calculations, update your p...
Understanding latency - Web Performance
s that there are no or almost no delays. high latency implies that there are many delays. one of the main aims of improving performance is to reduce latency. the latency associated with a single asset, especially a basic html page, may seem trivial. but websites generally involve multiple requests: the html includes requests for multiple css, scripts, and media files. the greater the number and
size of these requests, the greater the impact of high latency on user experience. on a connection with low latency, requested resources will appear almost immediately. on a connection with high latency, there will be a discernible delay between the time that a request is sent, and the resources are returned. we can determine the amount of latency by measuring the speed with which the data moves from...
...te its response. disk latency used to be the main area of performance concern. however server performance has improved as computer memory, or cpu, has improved. depending on the complexity of what is needed from the server, this can still be an issue. receiving is the time it takes to download the asset. the receiving time is determined by a combination of the network capacity and the asset file
size. if the image been cached, this would have been nearly instantaneous. had we throttled, receiving could have been 43seconds! measuring latency network latency is the time it takes for a data request to get from the computer making the request, to the computer responding. including the time it takes for a byte of data to make it from the responding computer back to the requesting computer. it i...
Web Performance
butes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. this article looks in detail at how html can be used to ensure maximum performance. multimedia: images and video the lowest hanging fruit of web performance is often media optimization. serving different media files based on each user agent's capability,
size, and pixel density is possible. additional tips like removing audio tracks from background videos can improve performance even further. in this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible. css performance features css may be a less important optimization focus for improved performance, but ther...
... trees, traces, flame charts , and allocations in your browser developer tools will help you understand waterfall and flame charts in other performance tools. alternative media formats when it comes to images and videos, there are more formats than you're likely aware of. some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file
size. in this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. analyzing javascript bundles no doubt, javascript is a big part of modern web development. while you should always strive to reduce the amount of javascript you use in your...
SVG Event Attributes - SVG: Scalable Vector Graphics
supports that as an event attribute, following the same requirements as for html event attributes. the global event attributes are available on all svg elements. other event attributes are available on a case by case basis for each elements. all event attribute are not animatable. ...
...ragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onre
size, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...
color-rendering - SVG: Scalable Vector Graphics
...
...te tradeoffs to balance speed and quality, but quality shall be given more importance than speed. optimizespeed indicates that the user agent shall empha
size rendering speed over quality. for rgb display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device rgb color space. optimizequality indicates that the user agent shall empha
size quality over rendering speed. ...
direction - SVG: Scalable Vector Graphics
it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. ...
...for further information. as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <textpath>, <text>, <tref>, and <tspan>. html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-
size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification. proposed recommendation definition in css scalable v...
fx - SVG: Scalable Vector Graphics
candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fx' ...
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fx' in that specification. recommendation initial definition ...
fy - SVG: Scalable Vector Graphics
candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fy' ...
... candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'fy' in that specification. recommendation initial definition ...
patternContentUnits - SVG: Scalable Vector Graphics
ern> element. note: that this attribute has no effect if attribute viewbox is specified on the <pattern> element. only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space. ...
...te user space. note that the
size of the tile is computed against the bounding box of the target element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are computed against the bounding box of the target element. ...
shape-rendering - SVG: Scalable Vector Graphics
| optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges. optimizespeed this value indicates that the user agent shall empha
size rendering speed over geometric precision and crisp edges. this option will sometimes cause the user agent to turn off shape anti-aliasing. crispedges this value indicates that the user agent shall attempt to empha
size the contrast between clean edges of artwork over rendering speed and geometric precision. to achieve crisp edges, the user agent might turn off anti-aliasing for all lines and cur...
...an edges of artwork over rendering speed and geometric precision. to achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. also, the user agent might adjust line positions and line widths to align edges with device pixels. geometricprecision indicates that the user agent shall empha
size geometric precision over speed and crisp edges. specifications specification status comment scalable vector graphics (svg) 2the definition of 'shape-rendering' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'shape-rendering' in that specification. recommendation init...
stroke-dasharray - SVG: Scalable Vector Graphics
t, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same
size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different
sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of various
sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <...
...30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different
sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and gaps of various
sizes with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various
sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none animatable yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps...
text-rendering - SVG: Scalable Vector Graphics
imizespeed | optimizelegibility | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision. optimizespeed this value indicates that the user agent shall empha
size rendering speed over legibility and geometric precision. this option will sometimes cause some user agents to turn off text anti-aliasing. optimizelegibility this value indicates that the user agent shall empha
size legibility over rendering speed and geometric precision. the user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most...
...this option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data. ...
units-per-em - SVG: Scalable Vector Graphics
note: this value is almost always necessary as nearly every other attribute requires the definition of a design grid. ...
... note: this value is almost always necessary as nearly every other attribute requires the definition of a design grid. ...
vector-effect - SVG: Scalable Vector Graphics
ote: as a presentation attribute, vector-effect can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-
size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e. the default rendering behaviour is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint. non-scaling-stroke this value modifies the way an object is stroked...
...t is stroked. normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). the resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level. non-scaling-
size this value specifies a special user coordinate system used by the element and its descendants. the scale of that user coordinate system does not change in spite of any transformation changes from a host coordinate space. however, it does not specify the suppression of rotation and skew. also, it does not specify the origin of the user coordinate system. since this value suppresses scaling of the...
viewBox - SVG: Scalable Vector Graphics
ers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated svg element (not the browser viewport). ...
...the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual
size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- t...
<feComposite> - SVG: Scalable Vector Graphics
translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twobluetriangles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="verdana" font-
size="40" shape-rendering="crispedges"> <desc>render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-
size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-s...
..."translate(0,325)" enable-background="new"> <desc>render the examples using the filters that do not obliterate the background, thus sometimes causing the background to continue to appear in some cases, and in other cases the background image blends into itself ("double-counting").</desc> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-
size="27">(without feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-
size="27">(without feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overnoflood)" /> <use xlink:href="#red50" filter="url(#overnoflood)" /> <text x="5" y="275">over</text> </...
<feMorphology> - SVG: Scalable Vector Graphics
/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetica, sans-serif; font-
size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p i...
... working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<femorphology>' in that specification. recomme...
<tref> - SVG: Scalable Vector Graphics
ourcesrequired specific attributes xlink:href dom interface this element implements the svgtrefelement interface. ...
...nt implements the svgtrefelement interface. example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-
size="45" > inline character data </text> <text x="100" y="200" font-
size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification. rec...
<view> - SVG: Scalable Vector Graphics
svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="half
sizeview" viewbox="0 0 1200 400"/> <view id="normal
sizeview" viewbox="0 0 600 200"/> <view id="double
sizeview" viewbox="0 0 300 100"/> <a xlink:href="#half
sizeview"> <text x="5" y="20" font-
size="20">half
size</text> </a> <a xlink:href="#normal
sizeview"> <text x="5" y="40" font-
size="20">normal
size</text> </a> <a xlink:href="#double
sizeview"> <text x="5" y="60" font-
size="2...
... specifications specification status comment scalable vector graphics (svg) 2the definition of '<view>' in that specification. ...
Basic shapes - SVG: Scalable Vector Graphics
« previousnext » there are several basic shapes used for most svg drawing. the purpose of these shapes is fairly obvious from their names. some of the parameters that determine their position and
size are given, but an element reference would probably contain more accurate and complete descriptions along with other properties that won't be covered in here. however, since they're used in most svg documents, it's necessary to give them some sort of introduction. basic shapes to insert a shape, you create an element in the document. different elements correspond to different shapes and take different parameters to describe the
size and position of those shapes. some are slightly redundant in that they can be created by other shapes, but they're all there for your convenience a...
...x position of the top left corner of the rectangle. y the y position of the top left corner of the rectangle. width the width of the rectangle height the height of the rectangle rx the x radius of the corners of the rectangle ry the y radius of the corners of the rectangle circle the <circle> element draws a circle on the screen. it takes 3 basic parameters to determine the shape and
size of the element. <circle cx="25" cy="75" r="20"/> r the radius of the circle. cx the x position of the center of the circle. cy the y position of the center of the circle. ellipse an <ellipse> is a more general form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately. <ellipse cx=...
SVG and CSS - SVG: Scalable Vector Graphics
<path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> </g> </g> </svg> make a new css file, style8.css. ...
...,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> </g> </g> </svg> make a new css file, style8.css. ...
SVG: Scalable Vector Graphics
svg is, essentially, to graphics what html is to text. ...
...ntially, to graphics what html is to text. svg images and their related behaviors are defined in xml text files, which means they can be searched, indexed, scripted, and compressed. additionally, this means they can be created and edited with any text editor or with drawing software. compared to classic bitmapped image formats such as jpeg or png, svg-format vector images can be rendered at any
size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. with proper libraries, svg files can even be localized on-the-fly. svg has been developed by the world wide web consortium (w3c) since 1999. documentation svg element reference details about each svg element. svg attribute reference details about each sv...
Tutorials
ebpage. css basics takes you through what you need to get started. we'll answer questions like: how do i make my text black or red? how do i make my content show up in such-and-such a place on the screen? how do i decorate my webpage with background images and colors? css first steps css (cascading style sheets) is used to style and lay out web pages — for example, to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've...
...e viewport, and one another. we have covered the necessary prerequisites so can now dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox. css reference complete reference to css, with details on support by firefox and other browsers. fluid grids design layouts that fluidly re
size with the browser window, while still using a typographic grid. css challenges flex your css skills, and see where you need more practice. advanced level using css transforms apply rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the chan...
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
xslt elements, exslt functions, xpath functions, xpath axes the <xsl:number> element counts things sequentially. it can also be used to quickly format a number. syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression format=format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-
size=number /> required attributes none. optional attributes count specifies what in the source tree should be numbered sequentially. it uses an xpath expression. level defines how levels of the source tree should be considered in generating sequential numbers. it has three valid values: single, multiple, and any. the default value is single: single numbers sibling nodes sequen...
...uences that use letters. some languages have more than one numbering system that use letters. if both systems begin with the same token, ambiguity can arise. this attribute can have the value "alphabetic" or "traditional". the default is "alphabetic". grouping-separator specifies what character should be used as the group (e.g. thousands) separator. the default is the comma (,). grouping-
size indicates the number of digits that make up a numeric group. the default value is "3". type instruction, appears within a template. defined xslt, section 7.7 gecko support partial support. see comments above. ...
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
n using an <?xml-stylesheet?> processing instruction (pi) there used to be no way to provide parameters. to solve this two new pis are implemented in firefox 2 (see supported versions below for details), <?xslt-param?> and <?xslt-param-namespace?>. both pis can contain "pseudo attributes" the same way that the xml-stylesheet pi does. the following document passes the two parameters "color" and "
size" to the stylesheet "style.xsl". <?xslt-param name="color" value="blue"?> <?xslt-param name="
size" select="2"?> <?xml-stylesheet type="text/xsl" href="style.xsl"?> note that these pis have no effect when transformation is done using the xsltprocessor object in javascript. processing instructions the attributes in the xslt-param and xslt-param-namespace pis are parsed using the rules defined i...
...aram name="show-toc" select="true()"?> the select attribute context the following context is used to parse and evaluate the expression in the select attribute. the context node is the node used as initial current node used when executing the stylesheet. the context position is the position of the context node in the initial current node list used when executing the stylesheet. the context
size is the
size of the initial current node list used when executing the stylesheet. no variables are available. the function library is the standard xpath function library. the namespace declarations are determined by the xslt-param-namespace pis, see below. if the select attribute fails to parse or execute, the pi is ignored (in particular, it does not fall back to the value attribute). xslt-...
Using the WebAssembly JavaScript API - WebAssembly
ow and worker contexts using postmessage(), and used in multiple places. in javascript, a memory instance can be thought of as a resizable arraybuffer (or sharedarraybuffer, in the case of shared memories) and, just as with arraybuffers, a single web app can create many independent memory objects. you can create one using the webassembly.memory() constructor, which takes as arguments an initial
size and (optionally) a maximum
size and a shared property that states whether it is a shared memory or not. let’s start exploring this by looking at a quick example. create another new simple html page (copy our simple template) and call it memory.html. add a <script></script> element to the page. now add the following line to the top of your script, to create a memory instance: var...
... a quick example. create another new simple html page (copy our simple template) and call it memory.html. add a <script></script> element to the page. now add the following line to the top of your script, to create a memory instance: var memory = new webassembly.memory({initial:10, maximum:100}); the unit of initial and maximum is webassembly pages — these are fixed to 64kb in
size. this means that the above memory instance has an initial
size of 640kb, and a maximum
size of 6.4mb. webassembly memory exposes its bytes by simply providing a buffer getter/setter that returns an arraybuffer. for example, to write 42 directly into the first word of linear memory, you can do this: new uint32array(memory.buffer)[0] = 42; you can then return the same value using: new u...
Modules - Archive of obsolete content
s own internal loader, known as cuddlefish. all modules within the sdk are loaded using cuddlefish by default. like any other custom loader, cuddlefish is created using the loader constructor. in the final section, we will take a look at some of the options passed by the sdk to the loader constructor to create the cuddlefish loader. loading subscripts when a javascript project reaches a certain
size, it becomes necessary to split it up into multiple files. unfortunately, javascript does not provide any means to load scripts from other locations: we have to rely on the host application to provide us with this functionality. applications such as firefox and thunderbird are based on xulrunner. xulrunner adds a built-in object, known as components, to the global scope. this object forms the cent...
ui/toolbar - Archive of obsolete content
experimental add a toolbar to the firefox user interface. a toolbar is a horizontal strip of user interface real estate. like a panel, a toolbar's content is specified using html. unlike a panel, a toolbar: does not overlap with any web content is persistent, remaining visible until the user chooses to close it is a fixed
size, and appears in a fixed location usage creating and destroying toolbars you don't specify toolbar content directly: instead, you create other ui components and supply them to the toolbar constructor. you can supply three sorts of ui components: action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { acti...
Adding a Button to the Toolbar - Archive of obsolete content
he button, but the user can move it using the browser's customization feature. the id attribute is mandatory, and is used to remember the position of the button, so you should not change it in subsequent versions of the add-on. clicking the button loads https://www.mozilla.org/ into a new tab. specifying the icon the icon property may specify a single icon or a collection of icons in different
sizes, as in the example above. if you specify a collection of icons in different
sizes the browser will automatically choose the best fit for the screen resolution and the place in the browser ui that hosts the button. read more about specifying multiple icons. the icon file must be packaged with your add-on: it may not refer to a remote file. you can change the icon at any time by setting the butt...
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'), ...
Display a Popup - Archive of obsolete content
ogs the message to the console. the add-on consists of seven files: package.json: created when you run jpm init index.js: the main add-on code, that creates the button and panel get-text.js: the content script that interacts with the panel content text-entry.html: the panel content itself, specified as html icon-16.png, icon-32.png, and icon-64.png: icons for the button in three different
sizes the "index.js" looks like this: var data = require("sdk/self").data; // construct a panel, loading its content from the "text-entry.html" // file in the "data" directory, and loading the "get-text.js" script // into it. var text_entry = require("sdk/panel").panel({ contenturl: data.url("text-entry.html"), contentscriptfile: data.url("get-text.js") }); // create a button require("sdk/ui/b...
Downloading Files - Archive of obsolete content
ioservice); var channel = ioserv.newchannel(url, 0, null); var stream = channel.open(); if (channel instanceof components.interfaces.nsihttpchannel && channel.responsestatus != 200) { return ""; } var bstream = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bstream.setinputstream(stream); var
size = 0; var file_data = ""; while(
size = bstream.available()) { file_data += bstream.readbytes(
size); } return file_data; } see also nsidownloadprogresslistener saving an arbitrary url to a local file customizing the download progress bar appearance ...
Examples and demos from articles - Archive of obsolete content
css pure-css dropdown menu [html] with the :hover pseudo-class you can create complex cascade algorithms. this is a common technique used, for example, in order to create pure-css dropdown menus (that is only css, without using javascript). .[article] pure-css web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-
size images shown only when mouse goes over previews. .[article] pure-css web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-
size images shown only when mouse clicks on previews. [article] pure-css tooltips [html] this shows the use of the ::after pseudo-element in co...
Label and description - Archive of obsolete content
ad of -pre-wrap. you may wish to use both for backward compatibility. <description style="white-space: pre;">i am your father's brother's nephew's cousin's former roommate. what's that make us? absolutely nothing!</description> text can also be made to wrap by inserting an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as parent elements re
size. <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class. note: if runni...
Miscellaneous - Archive of obsolete content
wheel.withcontrolkey.action and related preferences. the meaning of the action preference is shown in the following table mousewheel.withxxxkey.action result 0 scroll by lines. if set, you will receive dommousescroll events. 1 scroll by page. 2 move around in the history. if set, you will not receive dommousescroll events. 3 change text
size. if set, you will not receive dommousescroll events. you can listen to mouse wheel click events just like normal click events (via mousedown and mouseup events). when the mouse wheel is clicked, event.button will be equal to 1. simulating mouse and key events https://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinte...
Sidebar - Archive of obsolete content
for this snippet to work, you have to declare mainwindow as in the previous code block then write: mainwindow.document.getelementbyid("sidebar-splitter").hidden = true; be aware that if you change the splitter's hidden attribute, you need to reset it to a safe value when your sidebar is closed, or replaced by another sideb...
Enhanced Extension Installation - Archive of obsolete content
there is another copy of the item installed at a lower install location. if there is one, then the item is uninstalled and an entry is added to the pending operations list that indicates the item at the lower install location needs to be installed. the install operation finalization process loops continuously installing, upgrading and uninstalling items at progressively lower locations until the
size of the pending operations list is finally zero. little things this upgrade fixes or changes it used to not be possible to move items in the extension manager ui up and down if there were items that were from two different install locations in the list - that is there were actually two rdf containers and ordering is unique to each. by moving to a unified datasource where install location contain...
Extension Etiquette - Archive of obsolete content
ments of a web page. focus don't steal focus. it's not your extension's job to take focus from the web content. if the user loads a website and they ask for focus, they should get it. overriding their request isn't very nice. about dialogs there is a default popup about dialog that is created from install.rdf data; creating a new xul about box is usually unnecessary. you can decrease download
size by omitting a customized about box. make one only if you have a special feature that needs to be included — for example, a custom updater. theming if you have xul buttons in your extension that do functions similar to ones that already exist in a browser — for example, a feed reader that reloads and stops — use icons from the browser's theme. the icons makes the extension lighter, while p...
How to convert an overlay extension to restartless - Archive of obsolete content
r web content and chrome alike would at least have a way to set and keep track of endianness, but no, it doesn't. don't use any of the basic typed arrays for any data you did not earlier write into them in the same program session. also, they're not particularly helpful if your data isn't all of the exact same type (which it probably isn't). the solution to read arbitrary binary data, of various
sizes, in an endian-safe way, is to use dataview. the other typed array stuff is viable in firefox 4+. this wasn't added until firefox 15. if you were using nsibinaryinputstream or anything similar, figuring out dataview will be fairly straightforward. just read the docs and it's pretty simple. it will probably be notably faster than whatever you were doing before. reportedly xmlhttprequest doesn't w...
Install Manifests - Archive of obsolete content
extension>true</em:hasembeddedwebextension> homepageurl a link to the add-on's home page - intended for display in the user interface. examples <em:homepageurl>https://www.example.com/</em:homepageurl> iconurl a chrome:// url to an icon to display in the add-ons list. the icon will be displayed at 32x32 in firefox 3.6 and lower. in firefox 4.0 and later the icon can be up to 48x48 pixels in
size. if this property is not specified, a default icon is used. <em:iconurl>chrome://myext/skin/icon.png</em:iconurl> note: for the above example to work you will also have to add a skin package line to your chrome.manifest file. see chrome registration#skin. alternatively you can place your icon in the directory specified in your content package line. gecko 1.9.2 note starting in gecko 1.9.2...
Installing Extensions and Themes From Web Pages - Archive of obsolete content
he install. url the url property specifies the url of the xpi to install. this property is required. iconurl the iconurl property specifies an icon to be displayed in the installation dialog. this property is optional. if you do not specify an icon, the default icon will be used, usually a green puzzle piece. the icon can be any image format supported by firefox, and should be 32x32 pixels in
size. hash the hash property specifies a cryptographic hash of the xpi file contents. this is used to verify the downloaded file, to protect against a corrupted file being served by a mirror download server, for example. you can use any hash function supported by nsicryptohash. the hash is specified as hash function:hash value, for example, sha1:28857e60d043447c5f4550853f2d40770b326a13. tostring() ...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
er, compared to the bsd license, its terms are complicated, and can be difficult for users to understand. points to understand about oss licenses i’ll explain some important aspects of oss licensing that you should be aware of. you don’t have to give it away there’s nothing in an oss license that prevents you from charging money for software. one of the advantages of oss is that it empha
sizes that software can be distributed for free, but it can also be distributed for money. of course, customers who buys the software can then redistribute it themselves, so unless you provide some added value, you’ll have a hard time building a business. scope of modifications in the open-source world, “copyleft” is when you require that any modifications to your source code must also be rel...
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
eateevent("mouseevents"); event.initmouseevent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); document.getelementbyid("mylabel").dispatchevent(mouseevent); please see the corresponding documentation on how to use and initialize particular event types. alternative: element.click() xul and html elements have a pre-defined .click() method that will fire a synthe
sized click event. document.getelementbyid("mybutton").click(); alternative: element.docommand() xul elements that have a command (oncommand or command attribute) assigned will also have a working docommand method. document.getelementbyid("mymenu").docommand(); alternative: just hard-code what should happen if you know that the current version of the application will call { executesomething();...
JavaScript Object Management - Archive of obsolete content
for each window, while the module namespace objects are unique for all windows. setting window-specific data on code modules will lead to nothing but problems, so be careful when deciding what should be chrome and what shouldn't be. we needn't test for the pre-existence of our namespace object here, as modules are given their own namespace. the 2 declared constants above are used to reduce code
size. we frequently need to use xpcom components in our code, so instead of doing this: this.obsservice = components.classes["@mozilla.org/observer-service;1"].getservice(components.interfaces.nsiobserverservice); it's better to do this: this.obsservice = cc["@mozilla.org/observer-service;1"].getservice(ci.nsiobserverservice); these 2 constants don't need to be defined in the overlay...
User Notifications and Alerts - Archive of obsolete content
message = this._bundle.getstring("xulschoolhello.greeting.label"); alertsservice.showalertnotification( "chrome://xulschoolhello/skin/hello-notification.png", title, message, true, "", this, "xulschool hello message"); we pass this as an argument, assuming that this is an object that implements nsiobserver. we do this when we need to handle clicks on the alert box. the image can have any
size, but it is recommended that you use a medium, fixed
size. the main disadvantage of using alerts is that support for the alerts service is not guaranteed for all platforms and firefox versions. support for windows has existed since firefox 2. for mac os x, support was added on firefox 3, and only through a third-party tool called growl. on linux systems, we have confirmed that it works on firefox...
Events - Archive of obsolete content
archived event pages domsubtreemodifiedmozaudioavailablemozbeforere
sizemozorientationcachedchargingchangechargingtimechangecheckingdischargingtimechangedownloadingerrorlevelchangenoupdateobsoleteprogressupdateready ...
Source code directories overview - Archive of obsolete content
pecification 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 re
sizes 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...
Using content preferences - Archive of obsolete content
firefox 3 introduces the concept of content preferences. this permits code running within chrome (in other words: extensions and the browser itself, not web sites) to locally save preferences on a per-site basis. this makes it possible to write an extension that lets the user customize the appearance of specific web sites (setting the font
size larger on sites that use obnoxiously small fonts, for instance). the content preferences service, implemented by nsicontentprefservice, offers functions for setting and retrieving preferences for specific sites or in the global preference space; global preferences are used whenever a site-specific preference isn't available. site-specific content preferences are stored in the profile folder, in the database file "content-prefs.sqlite". exampl...
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 al...
Making it into a static overlay - Archive of obsolete content
tribute to the statusbarpanel element: insertbefore. this attribute identifies another statusbarpanel element within statusbar before which our element should appear. thus it allows us to define the exact position of our element relative to the other statusbarpanel elements within statusbar. if insertbefore is omitted, the element will be added as the last child of statusbar, usually before the re
sizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to the top of navigator.xul: ... <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" ...
Creating a hybrid CD - Archive of obsolete content
record. i used version 1.8.1a03 although you'll probably want to get a newer one. here's what i did to create the cd for the second anniversary party. mkhybrid -o ~/party.iso -r -j -hfs -v mozilla.party -map ~/hfsmapping ~/party/ cdrecord -v speed=2 dev=0,6,0 ~/party.iso its also handy to be able to mount an image file to test it. mount ~/party.iso /mnt/cdrom -t iso9660 -o loop=/dev/loop3,block
size=1024 umount /mnt/cdrom here is the hfs mapping that i used. the creator "moss" is for netscape 4.x and "mozz" is used for mozilla. it is used as the creator type for readme and other text files because it can handle unix and windows linebreaks, but teachtext cannot. # example filename mapping file used by mkhybrid for hfs # # extn xlate creator type comment .hqx ascii 'sitx' ...
Dehydra Object Reference - Archive of obsolete content
member functions. .template template object the template from which this class was instantiated, if applicable. pointer and reference types property type description .ispointer boolean flag .isreference boolean flag .type type object the type this points to or references array type property type description .isarray boolean flag .max integer or normal fixed-
size arrays, the index of the largest element of the array. for example, an int[10] would have .max = 9 .variablelength boolean flag true if the type represents a c99 variable-length array type number type property type description .precision integer for floating-point types, the precision of the type .min integer for integer types, the minimum value capable of being stored .max int...
Drag and Drop Example - Archive of obsolete content
wrapper scripts: <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> an additional script file dragboard.js is included which will contain the code we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. a maximum
size is also specified so that it doesn't re
size when new elements are dragged onto it. the board will need to respond to the dragdrop event so that an element is created when the user drags onto it. <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(even...
Editor Embedding Guide - Archive of obsolete content
note see also cmd_removelist cmd_removelist removes list from selection. getcommandstate ??? docommand no parameters cmd_indent indents current selection. getcommandstate "state_enabled"(boolean), ??? docommand no parameters cmd_outdent outdents current selection. getcommandstate "state_enabled"(boolean), ??? docommand no parameters cmd_increasefont increases font
size (uses <big> tag). getcommandstate "state_enabled"(boolean) docommand no parameters cmd_decreasefont decreases font
size (uses <small> tag). getcommandstate "state_enabled"(boolean) docommand no parameters cmd_undo undoes last executed command. getcommandstate "state_enabled"(boolean) docommand no parameters note only available if txmgr.dll is present. cmd_redo redoes ...
Gecko Coding Help Wanted - Archive of obsolete content
tively hard... or deceptively easy. so we've compiled a list of pointers —from the experts. there's plenty to do, and we sure could use the help. here are some fixes that are straightforward; they just need some time and attention: decomtamination convert weird, ugly and inefficient method signatures to more natural c++ method signatures. it's really improved code readability, reduced code
size, and sped up performance. it's kind of tedious but it's extremely valuable and will help you learn the way around the codebase. we've done a lot, but there's a lot more to do. roc is willing to work closely with anyone with reasonable c++ experience to get them started on this. just send him mail. not up for coding yet? join the gecko bugathon and help save gecko engineers from imminent doom! ...
popChallengeResponse - Archive of obsolete content
(under the public key for which the cert. -- request is being made) of rand, where rand is specified as -- rand ::= sequence { -- int integer, -- - the randomly-generated integer a (above) -- senderhash octet string -- - the result of applying the one-way function (owf) to -- - the sender's general name -- } -- the
size of "int" must be small enough such that "rand" can be -- contained within a single pkcs #1 encryption block. } ...
Simple Storage - Archive of obsolete content
they could have simply used jetpack.storage.simple directly. here's a complete real-world example. it's a simple note-taking jetpack. select some text on the page, right-click, and select note. the text will be remembered across browser restarts as a note. all notes are shown in the tools menu. you can install this example f...
Clipboard Test - Archive of obsolete content
<style></style> <style>.description{ display: block; font-
size: 13pt; color: #444; font-style: italic; margin-bottom: 7px; } .method>.returns{display: none;} .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param:not(:last-child):after{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-weigh...
slideBar - Archive of obsolete content
.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...
Simple Storage - Archive of obsolete content
they could have simply used jetpack.storage.simple directly. here's a complete real-world example. it's a simple note-taking jetpack. select some text on the page, right-click, and select note. the text will be remembered across browser restarts as a note. all notes are shown in the tools menu. you can install this example f...
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
iting commands command name description argument bold toggles the selection's bold attribute. --- createlink generates an html link from the selected text. the url to use for the link delete deletes the selection. --- fontname changes the font used in the selected text. the font name to use (arial, for example) font
size changes the font
size used in the selected text. the font
size to use fontcolor changes the font color used in the selected text. the color to use indent indents the block where the caret is. --- inserthorizontalrule inserts an <hr> element at the cursor's position. --- insertimage inserts an image at the cursor's position. url of ...
Overview of how downloads work - Archive of obsolete content
ading files in mozilla. one way is to encounter a file with an unknown content type, the other is to choose "save link target as" from the context menu of a link. things like file|save page as, save image as, etc. are all part of the second codepath. this document describes both codepaths (see below for the second one). click on the images to display them "stand-alone" in the browser, which may re
size them to fit the browser window. downloads via the helper app service this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads.dia downloads via "save link target as" and friends this diagram is an uml sequence diagram, and was created using dia. get the .dia file here: mozilla_downloads_path2.dia original document information autho...
Space Manager High Level Design - Archive of obsolete content
manager indirectly to get the available space to reflow a child block or inline frame into. the block frame uses a helper method on the nsblockreflowstate class to do the actual computation of available space based on the data in the space manager. here is how it works for reflowing an inline frame within a block (this also occurs for reflowing a block frame and, partially, for preparing for a re
size reflow). nsblockframe first frees all float information for the line that is being reflowed. getavailablespace is called on the blockreflowstate the blockreflowstate calls getavailablespace on its blockbanddata instance (which was setup in the blockreflowstate's constructor based on the space manager passed in and computed content area). blockbanddata then gets the band data from the space m...
File object - Archive of obsolete content
the type of data or encoding contained in the file. currently "ascii" (ascii), "binary" (utf-8) or "unicode" (ucs-2). (xxx note -- ascii might imply asciiz) file.mode a string describing the mode used to open the file. file.creationtime a date object representing the time when the file was created. file.lastmodified a date object representing the time when the file was last modified. file.
size the length of the file in bytes; undefined(?) for directories and pipelines. file.hasrandomaccess true if random access is supported for this file. binary (utf-8) files and pipelines (including file.intput) do not support random access. file.hasautoflush force a flush on each line break? (readonly) file.position the file position. writing to the property moves the file pointer. file.isnat...
Standalone XPCOM - Archive of obsolete content
ndalone xpcom? there is no binary difference between standalone xpcom and the xpcom that ships with the mozilla browser. the one functional difference is that xpt files cannot be read from .zip files in standalone xpcom. todo for v 1.0 optional exclusion of specific features into standalone xpcom like registry, xpconnect. tweeking these options will cause reduction in memory requirements and
size. get xpcom/tests directory upto date and documented. update this document for mac. api freeze and documentation original document information author: suresh duddi last updated date: 15 may 2000 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
Tamarin build documentation - Archive of obsolete content
orm build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most reliable system. the tamarin codebase has the ability to build additional code which supports debugging hooks. in the xcode project, this is the debug_debugger and release_debugger configurations. the flash player builds tamarin with the debugging hooks off for code
size reasons, but the mozilla client will build tamarin with the debugging hooks on. cross-platform build (general instructions - non-android) prerequisites: you need python 2.5 or later and gnu make 3.81 or later. (gnu make 3.80 does not work. nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux/ $ c...
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
-703 vs tc-663: 14.6% largertc-703 vs tc-700: 16.4% largertc-703 vs tc-663: 2.1% larger windows (xp pro, 2.13ghz dual core)tc-703 vs tc-700: 3.2% largertc-703 vs tc-663: 7.6% largertc-703 vs tc-700: 3.9% largertc-703 vs tc-663: 12.4% largertc-703 vs tc-700: 3.3% largertc-703 vs tc-663: 21.4% larger linux (ubuntu linux, 2.13 ghz dual core)n/an/an/a vm code
size the following is a comparison of the current tamarin-central compiled
size (tc-703) versus the prior build (tc-700) as well as the current build against the vm in flash player 10. build
size flash10576k tc-700740k tc-703655k known issues known failures in the acceptance testsuite include: num...
URIScheme - Archive of obsolete content
list of mozilla supported uri schemes list of uri schemes http:// by default, port 80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on windows. moz-icon://.ext?
size=32 : you can replace ext by your some file extension like js, css, xul, xml, etc. and the
size number by 1 to 127 mailto:emailaddress@domain.com about: chrome:// ... preferences see gecko.handlerservice.schemes.* scripting interface see nsiprotocolhandler to create a new protocol/scheme. about: about: about:config about:crashes about:mozilla about:plugins about:robots ... ...
Elements - Archive of obsolete content
r example, use the value 'xul:button' to create an element that is displayed like a button. the part before the colon is a namespace prefix so you must declare the xul namespace as well. not all tags have a unique display type. the following xul display types may be used: browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, re
sizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol. you may also use a number of html, mathml and svg tags. the 'display' attribute does not work unless the extends attribute is set, see bug bug 119389. in that case, put the value of the display attribute into the extends attribute. inheritstyle - the inheritstyle attribute indicates whether style rules from the documen...
Example Sticky Notes - Archive of obsolete content
]. all rights are given to the world. view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-
size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme, inc. fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on cha...
Methods - Archive of obsolete content
ng whether an object is a directory. isfile returns a boolean value indicating whether an object is a file. moddate returns a number representing the last modified date of the given file. moddatechanged specifies whether the last modification on a file is older than a specified date move moves a file from one location to another. remove removes a file. rename renames a file in place.
size returns the
size of the file in bytes. windowsshortcut creates a windows shortcut for a file. macalias creates a macintosh alias for a file. windowsgetshortname returns the windows shortname of the path. windowsregisterserver registers dlls with the registry. ...
XPInstall API reference - Archive of obsolete content
s compareto init tostring file no properties methods copy dircreate dirgetparent dirremove dirrename diskspaceavailable execute exists isdirectory isfile macalias moddate moddatechanged move remove rename
size windowsgetshortname windowsregisterserver windowsshortcut winprofile no properties methods getstring writestring winreg no properties methods createkey deletekey deletevalue enumkeys enumvaluenames getvalue getvaluenumber getvaluestring ...
Learn XPI Installer Scripting by Example - Archive of obsolete content
defined in line 22, where getfolder() is used to assign a value to the communicatorfolder variable representing the "program" folder on the local system: var communicatorfolder = getfolder("program"); spaceavailable = filegetdiskspaceavailable(dirpath); spacerequired, the other expected input to the verifydiskspace function, is given as 17311 kilobytes on line 19. inside the function, the two
sizes are compared and if the available space is larger than the required space, the installation proceeds. adding files and directories (full of files) to the install once you have verified that the target can accomodate the software to be installed and initialized the actual installation, you must add files and directories to the installation in order to have them installed. in the browser.xpi ins...
Flexgroup - Archive of obsolete content
"flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum
sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the
size, except in the other direction. ...
collapse - Archive of obsolete content
s clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0. after when the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0. both either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the
size of that element would fall below the minimum
size due to the position of the splitter. ...
crop - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } ...
dir - Archive of obsolete content
ts, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements, they are placed right to left or bottom to top. this is reverse of the order in which they appear in the xul code. see also re
sizer.dir ...
fixed - Archive of obsolete content
« xul reference home fixed type: boolean if true, the
size of the column in the tree cannot be adjusted by the user. any splitter to either side will re
size those columns while keeping the fixed column at a constant
size. if false or not specified, the user can adjust the
size of the column, typically by dragging the column header with the mouse. ...
flex - Archive of obsolete content
ates how an element's container distributes remaining empty space among its children. flexible elements grow and shrink to fit their given space. elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. the actual value is not relevant unless there are other flexible elements within the same container. once the default
sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. ...
panel.flip - Archive of obsolete content
bute, set to both, permits that behavior. you will not normally have to use this attribute, since it's automatically applied to arrow panels. an arrow panel can also specify a value of slide, which causes the arrow to "slide" instead of flipping when the panel doesn't have room. a sliding panel will have the start (or end) position extended such that the panel can be the requested
size, meaning the arrow will no longer be at the start (or end) of the panel - i.e., 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 anch...
right - Archive of obsolete content
e right edge of the element relative to the right edge of the stack. positive values are to the left; negative values are to the right of the right edge of the stack. this location is specified with respect to the right edge of the stack prior to the element being evaluated, or added to the stack. placing the element which contains this attribute within the stack may result in the stack changing
size. for example, using right="-80" causes the stack to be enlarged 80 pixels to the right and the element's right edge to be at the same location as the right edge of the stack. in other words, the right edge of the element is placed 80 pixels to the right of where the right edge of the stack was prior to the element being added. the stack is then enlarged to include the element. ...
IO - Archive of obsolete content
ple.txt. var file = io.getfile("profile", "sample.txt"); the nsiscriptableio object is a global object always available within an application or extension. it provides a number of useful functions for dealing with files. retrieve a file object for information about getting a file object, see accessing files get information about a file available information about a file include the permissions,
size, and last modified date of a file. see getting file information for more details. reading from a file for information about reading from text and binary files, see reading from files. writing to a file for information about writing to text and binary files, see writing to files. copying and moving files files may be moved and copied on disk. for details, see copying a file and moving a file. dele...
Menus - Archive of obsolete content
penlinkintab opens a link in a new tab links context-bookmarklink bookmarks a link links context-savelink saves a link links context-sendlink sends a link in an email links context-copyemail copies an email address mailto: links context-copylink copies a link links context-viewimage views an image at full
size images context-copyimage-contents copies an image to the clipboard images context-copyimage copies the url of an image to the clipboard images context-saveimage saves an image images context-sendimage sends an image in an email images context-setdesktopbackground sets an image as the desktop background images c...
Methods - Archive of obsolete content
fication removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup
sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelem...
MenuItems - Archive of obsolete content
ute. the icon will appear to the left of the menuitem label. in addition to the image, a special class "menuitem-iconic" must be used on the menuitem to indicate that an icon is expected. <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> as the image appears on a menu item, you will want to ensure you use a fairly small image. although the exact
size will vary depending on the theme being used, the
size of menu item images should generally be around 16 by 16 pixels. instead of specifying the icon with the image attribute, you can also reference the image in a style sheet with the 'list-style-image' property. #add-bookmark { list-style-image: url('addbookmark.png'); } this technique can also be used to apply an image for the menu element,...
OpenClose - Archive of obsolete content
pened, and functions the same as the corresponding argument for the openpopup method. in the following example, the popup is opened at horizontal positon 100 and vertical position 200: popup.openpopupatscreen(100, 200, false); note that if the supplied coordinates would cause the popup to be partially or completely off screen, the popup will be moved such that it is fully visible, and may be re
sized if necessary. closing a popup with the hidepopup method a popup menu is closed by the user pressing the escape key or by clicking somewhere outside the popup. for closing menupopups that use the menu tag, the button tag and the toolbarbutton tag, see closing menus above. to close a popup with a script, use the popup's hidepopup method. it takes no arguments. popup.hidepopup(); determining...
Positioning - Archive of obsolete content
ever, 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 full
size below or to the right. if there is not enough room on either side, the menu will be shrunk down to fit. for popups attached using the popup or context attributes, the default position to appear is with the upper left corner (or upper right corner in right to left locales) at the position where the mouse was clicked. context menus will appear offset down and to the right a couple of pixels so tha...
Popup Guide - Archive of obsolete content
losing 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 about how to open a menu when a button is pressed, see menu buttons. features of items on a menu to learn about the various features of items on a menu, see features of the menuitem element modifying the items on a menu to append, insert and remove elements from a menu, se...
Property - Archive of obsolete content
llincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup
size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigatio...
Introduction - Archive of obsolete content
wser bookmarks and use your own datasource to add custom data about those bookmarks. <vbox datasources="rdf:bookmarks http://www.xulplanet.com/ds/sample.rdf"> in addition, when using the rdf type for chrome xul (such as in extensions), the datasource rdf:local-store is always included in the composite. the local store is a datasource which is usually used to hold state information such as window
sizes, which columns in a tree are showing, and which tree items are open. you can query for any data in the local store in a template though this is rarely done. sometimes, you will want to specify the datasource to be used later, possibly determined dynamically by a script. the special uri rdf:null is used to indicate that you intend no datasources, or an empty datasource. this special uri will also...
Result Generation - Archive of obsolete content
oint is called the member. it is so called because it is most common to gather the list of the members, or children, of a container. but this doesn't have to be the case. any starting point and ending points will do. nodes in rdf are identified by a string value. there are two types of nodes in rdf, resources which usually represent 'things', and literals which are values like the names, dates or
sizes of those things, and so on. a literal's value is, for example, the name of the thing, such as 'fred'. a resource's value is a uri which for your own rdf data you can just make up (though if you plan to use your model with others, it should be unique, preferably a url for a site you own, so as to avoid future conflicts with mixing of other types). we'll use the uri of the resource nodes in a temp...
Custom toolbar button - Archive of obsolete content
y the following content, making sure that you scroll to get all of it. paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0px 24px 24px 0px);} .custombutton:hover {-moz-image-region: rect(24px 24px 48px 0px);} [icon
size="small"] .custombutton {-moz-image-region: rect( 0px 40px 16px 24px);} [icon
size="small"] .custombutton:hover {-moz-image-region: rect(24px 40px 40px 24px);} there is nothing to customize. save the file. explanation: this css stylesheet specifies how the button is displayed. it links to the button image, specifying the dimensions of the four parts of the image. 8. create a plain text fi...
Tree Widget Changes - Archive of obsolete content
olumn and nsitreecolumns interfaces can be found at layout/xul/base/src/tree/public/nsitreecolumns.idl. the column objects are created automatically, so you don't have to write any extra code. you can get the columns object which implements the nsitreecolumns interface for a tree using the tree's columns property. from there you can get specific columns, the current sort column, and position and
size info about the columns. for the most part these objects are readonly; you can modify the columns by just adjusting the treecol attributes directly. the tree and view methods no longer take ids as arguments when columns are used. instead, they use nsitreecolumns. for example, nsitreeview.getcellvalue() takes a row index and a nsitreecolumn as arguments, whereas before it took a row index and a co...
Creating a Skin - Archive of obsolete content
-moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image. you can think of it as a clip region for the image. you set the property to a position and
size within an image and the button will display only that section of the image. this allows you to use the same image for multiple buttons and set a different region for each one. when you have lots of buttons, with states for hover, active and disabled, this saves space that would normally be occupied by mutliple images. in the code above, we use the same image for each button, but set a different i...
Document Object Model - Archive of obsolete content
l whether an element is visible or not. we'll change the progress meter so that its initially hidden. also, we'll add an id attribute so that we can refer to it in a script to show and hide it. while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed. <tree id="results" hidden="true" flex="1"> . . . <splitter id="splitbar" re
sizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4px;" hidden="true"/> we've added the hidden attribute and set the value to true. this causes the element to be hidden when it first appears. next, let's add a function that is called when the find button is pressed. we'll put scripts in a separate file findfile.js. in the last section, we added...
Input Controls - Archive of obsolete content
, you can use the textbox element for this purpose as well -- two separate elements are not necessary. if you set the multiline attribute to true, the text entry field will display multiple rows. example 2 : source view <textbox multiline="true" value="this is some text that could wrap onto multiple lines."/> like the html textarea, you can use the rows and cols attributes to set the
size. this should be set to the number of rows and columns of characters to display. our find files example let's add a search entry field to the find file dialog. we'll use the textbox element. <label value="search for:" control="find-text"/> <textbox id="find-text"/> <button id="find-button" label="find"/> add these lines before the buttons we created in the last section. if you open this w...
Introduction - Archive of obsolete content
rsion of the mozilla platform which allows you to create standalone xul applications. a browser isn't required to run these applications, as they have their own executable file. xul package in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. this is used when you don't want to have the larger
size of a complete xulrunner application, but don't mind requiring a mozilla browser to be installed to be able to run the application. remote xul application you could also just place xul code on a web server and open it in firefox, as you would any other web page, however this is discouraged and was disabled in firefox 8. it is still possible to enable this for selected sites to let legacy apps t...
Manipulating Lists - Archive of obsolete content
em)); } } </script> <button label="delete" oncommand="deleteselection();"/> <listbox id="thelist" seltype="multiple"> <listitem label="cheddar"/> <listitem label="cheshire"/> <listitem label="edam"/> <listitem label="gouda"/> <listitem label="havartie"/> </listbox> inside the while loop we first get the selecteditem at index 0. the first selected item is always retrieved as the
size of the array will decrease as the items are removed. next, we remove the item using the removeitemat() function. since this function requires an index we can convert between an item and an index using the getindexofitem() function. there is also a corresponding getitematindex() function to do the reverse. the nsidomxulmultiselectcontrolelement interface also provides methods for modifying the...
More Event Handlers - Archive of obsolete content
the top left corner of the document. here is an example which displays the current mouse coordinates: example 4 : source view <script> function updatemousecoordinates(e){ var text = "x:" + e.clientx + " y:" + e.clienty; document.getelementbyid("xy").value = text; } </script> <label id="xy"/> <hbox width="400" height="400" onmousemove="updatemousecoordinates(event);"/> in this example, the
size of the box has been set explicitly so the effect is easier to see. the event handler gets the clientx and clienty properties and creates a string from them. this string is then assigned to the value property of the label. note that the event argument must be passed to the updatemousecoordinates function. if you move the mouse quickly across the border of the box, you might notice that the coordin...
More Tree Features - Archive of obsolete content
headers around to rearrange the order of the columns. a user will also likely want to change the column widths. you can do this by placing a splitter element in between each treecol element. a small notch will appear in between each column header which the user may drag to change the width of a column. you can use the style class tree-splitter to hide the notch, although the column may still be re
sized. you can set a minimum or maximum width of a column using the minwidth or maxwidth attributes. you can set the hidden attribute on a column to true to have the column hidden by default. the user can choose to show the column by selecting it from the drop-down on the end of the header row. remembering state of columns as with all elements, the persist attribute can be used to save the sta...
Numeric Controls - Archive of obsolete content
actually show the value as a number, but it may be used in a script. a scale will fire a change event whenever the scales's value is modified. <scale value="40" min="1" max="50"/> this scale defaults to a value of 40 and has a range between 1 and 50. a numeric textbox would normally be used when the value was important to the user, for instance, a field to enter a number of days, or the maximum
size of a file. a scale would be used when the actual value isn't important, just that sliding the scale decreases or increases a state. for instance, a volume slider or a zoom level. the default arrangement of a scale is horizontal with lower values to the left and higher values to the right. however, you can change this orientation with the orient and dir attributes. <scale orient="vertical" dir="re...
Persistent Data - Archive of obsolete content
are displayed or not, but you can save almost anything. persist attribute to allow the saving of state, you simply add a persist attribute to the element which holds a value you want to save. the persist attribute should be set to a space-separated list of attributes of the element that you want to save. the element must also have an id attribute in order to identify it. for example, to save the
size of a window, you would do the following: <window id="somewindow" width="200" height="300" persist="width height" . . . the two attributes of the window element, the width and the height will be saved. you could add additional attributes by adding a space and another attribute name to the persist attribute. you can add the persist attribute to any element and store any attribute. yo...
Progress Meters - Archive of obsolete content
rming a lengthy operation. xul has a progressmeter element which can be used to create these. there are two types of progress meters: determinate and indeterminate. determinate progress meters are used when you know the length of time that an operation will take. the progress meter will fill up and, once full, the operation should be finished. this can be used for the download file dialog as the
size of the file is known. indeterminate progress meters are used when you do not know the length of time of an operation. the progress meter will have an animation such as a spinning barber pole or a sliding box, depending on the platform and theme used. determinate progress meter: indeterminate progress meter: the progress meter has the following syntax: <html:progress id="identifier" ...
Simple Menu Bars - Archive of obsolete content
/menu> </menubar> </toolbox> here, a simple menu bar is created using the menubar element. it will create a row for menus to be placed on. two menus, file and edit have been created here. the menu element creates the title at the top of the menu, which appears on the menu bar. the popups are created using the menupopup element. it will pop up when the user clicks on the parent menu title. the
size of the popup will be large enough to fit the commands inside it. the commands themselves are created using the menuitem element. each one represents a single command on the menu popup. you can also create separators on the menus using the menuseparator element. this is used to separate groups of menuitems. menubar element the menubar is a box containing menus. note that it has been placed insi...
Tree View Details - Archive of obsolete content
opened or closed. essentially, when a parent row is opened, the children will be taken from the childdata map and inserted into the visibledata array. for example, if the liquids row was opened, the corresponding array from childdata, which in this case contains only the single mercury child, will be inserted into the visibledata array after liquids but before gases. this will increase the array
size by one. the two booleans in each row in the visibledata structure indicate whether a row is a container and whether it is open respectively. obviously, the new inserted child items will have both values set to false. implement the tree view interface next, we need to implement the tree view interface. first, the simple functions: { treebox: null, selection: null, get rowcount() ...
Using Remote XUL - Archive of obsolete content
it defines an area within which web content can be displayed. its src attribute contains the url of the page being displayed in the iframe. we set this value to the mozilla.org home page by default so that page loads into the iframe when we first load the xul document. the iframe's flex attribute tells the browser to stretch the iframe to fill the space available to it. without it, the iframe's
size would be a fixed default and wouldn't change when the user re
sized their window. [optionally show what this looks like] the value of the flex attribute determines the extent to which the element will stretch relative to other flexible elements. an element with a flex of "2" is twice as flexible as an element with a flex of "1", so the first element might show up as twice as wide as the second. ...
Window icons - Archive of obsolete content
s/default. note: the global icons override does not currently work due to bug bug 543490. global icon files currently take precedence and bundles are only searched for icons which are not provided by the application. starting with firefox 3.0, xulrunner 3.0, thunderbird 3.0 and seamonkey 2.0 you can now specify png format icons instead of xpm format on linux. you can specify up to 4 different
sizes of png icons using the suffixes .png, 16.png, 32.png and 48.png. older versions to support older applications, such as firefox 1.0, you need to copy the icons to app_dir/chrome/icons/default manually on the first start (example code). ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
iscovered accessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow re
sizer richlistbox richlistitem re
sizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...
action - Archive of obsolete content
in 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. ...
arrowscrollbox - Archive of obsolete content
="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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width clicktoscroll type: bool...
assign - Archive of obsolete content
t 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". ...
bbox - Archive of obsolete content
| 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. ...
bindings - Archive of obsolete content
al 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. ...
box - Archive of obsolete content
e="zero"/> <box orient="vertical"> <label value="one"/> <label value="two"/> </box> <box orient="horizontal"> <label value="three"/> <label value="four"/> </box> </box> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
broadcaster - Archive of obsolete content
tus 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. ...
button - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or fro...
caption - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. l...
checkbox - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
column - Archive of obsolete content
nly 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. ...
columns - Archive of obsolete content
ll 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. ...
conditions - Archive of obsolete content
ced, 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. ...
deck - Archive of obsolete content
> <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. ...
description - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
dialog - Archive of obsolete content
dialog() return type: no return value cancels the dialog and closes it, similar to pressing the cancel button. centerwindowonscreen() return type: no return value centers the dialog on the screen. getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type. movetoalertposition() return type: no return value moves and re
sizes the dialog to a position and
size suitable for an alert box. related elements dialogheader ...
dialogheader - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. title type: string the text to appear in the title bar of the window. properties inherited properties align...
elements - Archive of obsolete content
r grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup re
sizer richlistbox richlistitem re
sizer row rows rule s script scrollbar scrollbox scrollcorner separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tabbrowser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolb...
grippy - Archive of obsolete content
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. ...
groupbox - Archive of obsolete content
examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessib...
iframe - Archive of obsolete content
parenttype: one of the values belowset the background of an iframe as transparent.transparentthis results in the iframe's background being transparent. ...
label - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
listcell - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
listcol - Archive of obsolete content
tcols> <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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
listcols - Archive of obsolete content
tcols> <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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
listhead - Archive of obsolete content
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. ...
listheader - Archive of obsolete content
ll 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. ...
listitem - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } current type: boolean this attribute will be set to true if the listitem is the current item. this is typically used by a theme to customize the focus ring. to change the currently selected item in a listbox, ...
menuitem - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } description type: string descriptive text to appear in addition to the dialog title. disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is di...
menuseparator - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
notificationbox - Archive of obsolete content
fications, notificationshidden methods appendnotification, getnotificationwithvalue, removeallnotifications, removecurrentnotification, removenotification, removetransientnotifications, attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties currentnotifi...
observes - Archive of obsolete content
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. ...
page - Archive of obsolete content
[ 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. ...
popupset - Archive of obsolete content
popup id="clipmenu"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup> </popupset> <label value="right click for popup" context="clipmenu"/> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
preferences - Archive of obsolete content
the root prefs branch. attribute nsiprefbranch defaultbranch; the root branch of the tree with default values. attribute nsiprefbranch2 rootbranchinternal; the root prefs branch (nsiprefbranch2). ...
progressmeter - Archive of obsolete content
alue 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. ...
query - Archive of obsolete content
amples (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. ...
queryset - Archive of obsolete content
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. ...
radio - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
row - Archive of obsolete content
olumns 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. ...
rows - Archive of obsolete content
lement 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. ...
script - Archive of obsolete content
able 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). ...
scrollbar - Archive of obsolete content
the scroll bar may also be used independently when a numeric value or percentage needs to be selected by the user. the user can adjust the position of the scroll bar by clicking arrows on either end of the scroll bar or by dragging the scroll bar thumb around. more information is available in the xul tutorial. ...
scrollbox - Archive of obsolete content
( components.interfaces.nsiscrollboxobject); xpcominterface.ensureelementisvisible(child_element_to_make_visible); see the nsiscrollboxobject api for other scroll-related methods. ...
spinbuttons - Archive of obsolete content
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. ...
stack - Archive of obsolete content
hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. ...
statusbar - Archive of obsolete content
ssibletype examples <statusbar> <statusbarpanel label="left panel"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible...
<statusbarpanel> - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. lab...
stringbundle - Archive of obsolete content
, src, stringbundle, strings methods getformattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings. ...
tab - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled...
tabpanel - Archive of obsolete content
l 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. ...
tabpanels - Archive of obsolete content
properties selectedindex, selectedpanel examples (example needed) attributes selectedindex type: integer gets and sets the index of the currently selected panel. the first item is at index 0. ...
template - Archive of obsolete content
r 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. ...
textnode - Archive of obsolete content
ent 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). ...
titlebar - Archive of obsolete content
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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width note: the allowevents attribu...
toolbarbutton - Archive of obsolete content
t off if it is too large. the side depends on the css text alignment. depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. if you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this
size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from...
toolbaritem - Archive of obsolete content
ed"> <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, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
toolbarpalette - Archive of obsolete content
tton" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited pro...
toolbarseparator - Archive of obsolete content
properties accessibletype examples <toolbox> <toolbar> <toolbarbutton label="button 1"/> <toolbarseparator /> <toolbarbutton label="button 2"/> </toolbar> </toolbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equal
size, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessible...
toolbarset - Archive of obsolete content
| attributes | properties | methods | related ] firefox only this element is used as a container for custom toolbars, which are added in the custom toolbar dialog. ...
application/http-index-format specification - Archive of obsolete content
ointing to the directory represented by the index if there is one. a valid path token must be url escaped. valid 200 tokens note that all tokens are case insensitive. filename the name of file that can be used to retrieve the file when combined with the full path provided by the 300 line. white space and 8 bit characters must be url encoded. content-length base 10 digits representing the
size of the file in bytes. only digits are legal. last-modified rfc 1123 date format url encoded. content-type mime content type. whitespace and 8-bit characters must be url-encoded. the mime-type for a directory can be given as application/http-index-format. file-type one of the following keywords to represent a special status for a file: file directory symbolic-link sym-file (a symboli...
Extentsions FAQ - Archive of obsolete content
ading in xpcom, and if so, where are these defined? dom can only be accessed from the main thread. also, check out this site to learn how to set up a proxy: http://www.mozilla.org/projects/xpcom/proxies.html how to test a tab has been closed or not? you can capture the even of tab closing. you can get the tab that is being closed. this should be enough for you. is it possible to fix the
size exactly at 16x16 pixels avoiding any re
size? simply position the image and it will no longer be stretched to the
size of the stack. <image left="0" top="0"> would seem to suffice. could there be more than two images to reflect more than two states?does the rules in the css file have to be in any particular order (if two rules match, which is chosen)? i have two states switching images in the...
2006-10-20 - Archive of obsolete content
igning new home for quality.mozilla.org - talented web designers and/or artists interested in helping the design for quality.mozilla.org please read this posting. if your theme is chosen you will be placed on the hall of fame and will receive a gift from mozilla. posted by jay patel on october 18th, 2006. discussions none for this week meetings upcoming firefox test day - testing will be empha
sized on ajax/web 2.0, dhtml, and plugin heavy sites! meet in irc chat room #testday on friday october 20, 2006 7am-5pm pacific time. posted by jay patel on october 18th, 2006. authors mark d'souza (mdsouza) mohamed attar (mojo) ...
2006-11-03 - Archive of obsolete content
3, 2006 announcements new reflow branch off of trunk l. david baron announced that he merged the reflow branch to a new branch (reflow_20061031_branch) off of the trunk. discussions html5 @ w3c discussion of the official announcement from w3c on the development of html5 and how mathml should be included in it. firefox table captions discussion on how ie displays captions depending on the
size of the content while ff uses a default setting. captions in ff also exceed the table length and become hidden if it's surrounded by a bounding div element. a test case is pending. perf question (reflow branch) a look into bug #352367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a table. meetings none this week. ...
2006-12- 08 - Archive of obsolete content
summary: mozilla.dev.tech.layout - december 2, 2006 - december 8, 2006 announcements none this week. discussions [further compute
size changes l. david baron is planning to make an additional change to the compute
size api onthe reflow branch to resolve a number of float-related bugs (359135,360093), and some others. ...
2006-11-10 - Archive of obsolete content
m celebrate some new functionality of calendar. discussions hunting down the "sunbird fails to start" bug -- please help discussion about a crash when starting sunbird 0.2. calendar:improving the calendar views discussion about improving the layout of calendar. next steps for 24 hours view discussion about the improving of some features of calendar ex. configurable start/end hours, optimal
size of grid boxes in 24 hours view. meetings no meetings were scheduled this week. authors mark paruzel yi (eric) shen [back to weekly summaries ] ...
NPEmbedPrint - Archive of obsolete content
in should use for printing. platformprint additional platform-specific printing information. mac os: thprint unix: pointer to a npprintcallbackstruct. description the npp_print function passes a pointer to an npprint object (previously allocated by the browser) to the plug-in. the npembedprint structure is used when the mode field of npprint is set to np_embed. unix the plug-in location and
size in the npwindow are in page coordinates (720/ inch), but the printer requires point coordinates (72/inch). see also npfullprint, np_port, npp_print, npprint, npprintcallbackstruct ...
NPEvent - Archive of obsolete content
will use the standard arrow cursor. xwindows description the npevent object represents an event passed by npp_handleevent() to a windowless plug-in. the npevent structure is defined as xevent, the definition of the event type used by the xwindows platform. for information about the xevent structure and xwindows events, see the xwindows documentation. as the xevents sent to the plug-in are synthe
sized and there is not a native window corresponding to the plug-in rectangle, some of the members of the xevent structures are not set to their normal xserver values. e.g. key events don't have a position. mouse events have x and y coordinates relative to the top-left corner of the plugin rectangle. see also npp_handleevent() ...
NPN_MemAlloc - Archive of obsolete content
returns if successful, the function returns a pointer to the allocated memory, in bytes. if insufficient memory is available, the plug-in returns null. description the plug-in calls npn_memalloc to allocate a specified amount of memory in the browser's memory space. ...
NPN_Write - Archive of obsolete content
pointer to the current plug-in instance. stream pointer to the stream into which to push the data. len length in bytes of the data specified by buf. buf a pointer to a buffer of data to deliver to the stream. returns if successful, the function returns a positive integer representing the number of bytes written (consumed by the browser). this number depends on the
size of the browser's memory buffers, the number of active streams, and other factors. if unsuccessful, the plug-in returns a negative integer. this indicates that the browser encountered an error while processing the data, so the plug-in should terminate the stream by calling npn_destroystream(). description npn_write() delivers a buffer from the stream to the instance. a plug-in can call this func...
NPP_Destroy - Archive of obsolete content
er information. upon the user's return to the page, this information is passed to the new plug-in instance when it is created with npp_new. avoid trying to save critical data with this function. ownership of the buf field of the npsaveddata structure passes from the plug-in to the browser when npp_destroy returns. the browser can and will discard this data based on arbitrary criteria such as its
size and the user's page history. to ensure that the browser does not crash or leak memory when the saved data is discarded, npsaveddata's buf field should be a flat structure (a simple structure with no allocated substructures) allocated with npn_memalloc. mac os if you want to restore state information if this plug-in is later recreated, use np_memalloc to create an npsaveddata structure. note:...
NPP_Write - Archive of obsolete content
uffer of data, delivered by the stream, that contains len bytes of data offset bytes from the start of the stream. the buffer is allocated by the browser and is deleted after returning from the function, so the plug-in should make a copy of the data it needs to keep. returns the plug-in should return the number of bytes written (consumed by the instance). if the return value is smaller than the
size of the buffer, the browser sends the remaining data to the plug-in through subsequent calls to npp_writeready and npp_write. if unsuccessful, the function signals an error by returning a negative value. the browser will destroy the stream by calling npp_destroystream. description the browser calls the npp_write function to deliver the data specified in a previous npp_writeready call to the plug-i...
NPSavedData - Archive of obsolete content
can be returned to the plug-in to restore the data in future instances of the plug-in. syntax typedef struct _npsaveddata { int32 len; void* buf; } npsaveddata; fields the data structure has the following fields: len length in bytes of the buffer pointed to by buf; set by the plug-in. buf pointer to a memory buffer allocated by the plug-in with npn_memalloc(). can be any reasonable
size; its contents are private to the plug-in and are not modified by the browser. description the npsaveddata object contains a block of per-instance information that the browser saves after the instance is deleted. this information can be returned to another instance of the same plug-in if the user returns to the web page that contains it. you can use the plug-in's npp_destroy() function to allocat...
NPAPI plugin reference - Archive of obsolete content
p_new creates a new instance of a plug-in. npp_newstream notifies a plug-in instance of a new data stream. npp_print requests a platform-specific print operation for an embedded or full-screen plug-in. npp_setvalue implemented by plugins. this call is used to inform plugins of variable information controlled by the browser. npp_setwindow tells the plug-in when a window is created, moved,
sized, or destroyed. npp_streamasfile provides a local file name for the data from a stream. npp_urlnotify notifies the plug-in instance of the completion of a url request. npp_write delivers data to a plug-in instance. (remark: hence the name "npp_write" is misleading - just think of:"data_arrived") npp_writeready determines maximum number of bytes that the plug-in can consume. npprint cont...
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
> element. however, it has become common practice to putxml escaped html data in it. (even through you are not suppose to.) for example, if your blog post was: this is <b>bold</b>. then the <description> would be: <description>this is <b>bold</b>.</description> note that the "<" has been turned into "<". and the ">" has been turned into ">". this greatly bloats the
size of contents but is necessary since certain characters are no allowed in xml. xml does however have the cdata convention. you can put (almost) whatever you want in a cdata section. including "<" and ">" without having to escape them. using the example above we'd have: <description><![cdata[this is <b>bold</b>.]]></description> this helps reduce the bloat. however, the <description> is not s...
Syndicating content with RSS - Archive of obsolete content
rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other
sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high performance needs. the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content type that an http client...
Encryption and Decryption - Archive of obsolete content
reak an algorithm is called a brute force attack. breaking an algorithm introduces the risk of intercepting, or even impersonating and fraudulently verifying, private information. the key strength of an algorithm is determined by finding the fastest method to break the algorithm and comparing it to a brute force attack. for symmetric keys, encryption strength is often described in terms of the
size or length of the keys used to perform the encryption: in general, longer keys provide stronger encryption. key length is measured in bits. for example, 128-bit keys for use with the rc4 symmetric-key cipher supported by ssl provide significantly better cryptographic protection than 40-bit keys for use with the same cipher. roughly speaking, 128-bit rc4 encryption is 3 x 1026 times stronger than 4...
Introduction to SSL - Archive of obsolete content
only. this cipher suite is appropriate for banks and other institutions that handle highly sensitive data. red hat console does not support this cipher suite. triple des with 168-bit encryption and sha-1 message authentication triple des is the strongest cipher supported by ssl, but it is not as fast as rc4. triple des uses a key three times as long as the key for standard des. because the key
size is so large, there are more possible keys than for any other cipher-approximately 3.7 * 1050. this cipher suite is fips-compliant. both ssl 2.0 and ssl 3.0 support this cipher suite. strong cipher suites permitted for deployments within the united states only. these cipher suites support encryption that is strong enough for most business or government needs. rc4 with 128-bit encryptio...
Sunbird Theme Tutorial - Archive of obsolete content
0.3a1 and later versions. it is designed for beginners. it does not cover advanced topics. you might be able to apply the same method to other mozilla applications by changing some of the details. introduction a theme is a package that users can install in an application to change the appearance of the application, without changing how the application works. for example, a theme can change the
size and colour of the toolbar buttons, and provide different icons on the buttons. but a theme cannot provide an extra button. what do you need to make a theme? to make a theme, you usually need these tools: a jar tool or zip tool an editor for plain text files software for creating and editing images note: some zip tools only work with files whose names have <tt>.zip</tt> at the end. you ca...
Tamarin Tracing Build Documentation - Archive of obsolete content
form build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most reliable system. the tamarin codebase has the ability to build additional code which supports debugging hooks. in the xcode project, this is the debug_debugger and release_debugger configurations. the flash player builds tamarin with the debugging hooks off for code
size reasons, but the mozilla client will build tamarin with the debugging hooks on. cross-platform build first, you must have the mozilla build prerequisites for your platform. additionally, you need python 2.4 or later and gnu make 3.81 or later. (gnu make 3.80 does not work. nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin tracing: $ hg clone htt...
Common Firefox theme issues and solutions - Archive of obsolete content
mode when in private browsing mode there needs to be a visual difference to the firefox app button that is displayed when tabs are on top and the menu bar is disabled. text only toolbar buttons not aligned properly when text only toolbar buttons are selected in customize toolbars, text labels in toolbar buttons may not align properly. the common cause of this is style rules that reference [icon
size="small"] without excluding [mode="text"]. the solution usually is to append :not ([mode="text"]) to those style rules. for instance use toolbar[icon
size="small"]:not ([mode="text"]). a little experimenting may be required to fully address this issue with your theme. address bar identity box is missing padlock icons for secure sites in firefox 14 and later the identity box has been significantl...
Theme changes in Firefox 3.5 - Archive of obsolete content
the windows and linux native default themes, the gripper is now drawn as a part of the background of the scrollbar thumb widget. third-party themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum
size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16px to avoid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way window shadow is handled on mac os x. before that...
-ms-accelerator - Archive of obsolete content
the "n" is not underlined until the user presses the alt key. when alt + n is pressed, the <input> element that defines an accesskey attribute value of "n" receives the focus. <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname"
size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt key is pressed. an access key is a single character used as a keyboard shortcut for selecting an object. the user presses...
-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 va...
-ms-wrap-margin - Archive of obsolete content
the -ms-wrap-margin css property is a microsoft extension that specifies a margin that offsets the inner wrap shape from other shapes. initial value0applies toexclusion elementsinheritednocomputed valueas specifiedanimation typediscrete syntax values <length> the margin
size, a non-negative value. formal syntax <length> specifications not part of any specification. remarks offsets created by the -ms-wrap-margin property are offset from the outside of the exclusion. this property can be set to any supported length value. ...
:-moz-system-metric() - Archive of obsolete content
-forward) css pseudo-class will match an element if the computer's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the computer's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar re
sizes to indicate the relative
size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element ...
::-ms-fill - Archive of obsolete content
s-bar shows animated dots that flow in a bar pattern. -ms-ring shows animated dots that flow in a ring pattern. allowable properties only the following css properties can be used in a rule with ::-ms-fill in its selector. other properties are ignored. ...
-moz-scrollbar-thumb-proportional - Archive of obsolete content
note: since firefox 58, this media feature is no longer available to web content — it is only available internally (e.g. to xul / chrome code). see bug 1396066 for more details. syntax <integer> if the device's user interface displays the thumb of scrollbars proportionally (that is,
sized based on the percentage of the document that is visible), this is 1. otherwise it's 0. media: media/visual accepts min/max prefixes: no ...
CSS - Archive of obsolete content
border.-moz-border-right-colorsin mozilla applications like firefox, the -moz-border-right-colors css property sets a list of colors for the right border.-moz-border-top-colorsin mozilla applications like firefox, the -moz-border-top-colors css property sets a list of colors for the top border.-moz-stack-sizing-moz-stack-sizing is an extended css property. normally, a <xul:stack> will change its
size so that all of its child elements are completely visible. for example, moving a child of the stack far to the right will widen the stack so the child remains visible.-moz-text-blinkthe -moz-text-blink non-standard mozilla css extension specifies the blink mode.-moz-window-shadowthe -moz-window-shadow css property specifies whether a window will have a shadow. it only works on mac os x.-ms-acceler...
Enumerator.atEnd - Archive of obsolete content
var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.total
size / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explo...
Enumerator.item - Archive of obsolete content
var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.total
size / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explo...
Enumerator.moveFirst - Archive of obsolete content
var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.total
size / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explo...
Enumerator.moveNext - Archive of obsolete content
var s = ""; var bytespergb = 1024 * 1024 * 1024; var fso = new activexobject("scripting.filesystemobject"); var e = new enumerator(fso.drives); e.movefirst(); while (e.atend() == false) { var drv = e.item(); s += drv.path + " - "; if (drv.isready) { var freegb = drv.freespace / bytespergb; var totalgb = drv.total
size / bytespergb; s += freegb.tofixed(3) + " gb free of "; s += totalgb.tofixed(3) + " gb"; } else { s += "not ready"; } s += "<br />"; e.movenext(); } return(s); } requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explo...
JavaArray - Archive of obsolete content
summary core object a wrapped java array accessed from within javascript code is a member of the type javaarray. created by any java method which returns an array. in addition, you can create a javaarray with an arbitrary data type using the newinstance method of the array class: public static object newinstance(class componenttype, int length) throws negativearray
sizeexception description the javaarray object is an instance of a java array that is created in or passed to javascript. javaarray is a wrapper for the instance; all references to the array instance are made through the javaarray. in javascript 1.4 and later, the componenttype parameter is either a javaclass object representing the type of the array or class object, such as one returned by java.lang.class.forname. in...
Packages - Archive of obsolete content
e java package java.*. netscape: any class in the java package netscape.*. sun: any class in the java package sun.*. examples example: javascript function to create a java dialog box the following javascript function creates a java dialog box: function createwindow() { var theowner = new packages.java.awt.frame(); var thewindow = new packages.java.awt.dialog(theowner); thewindow.set
size(350, 200); thewindow.settitle("hello, world"); thewindow.setvisible(true); } in the previous example, the function instantiates thewindow as a new packages object. the set
size, settitle, and setvisible methods are all available to javascript as public methods of java.awt.dialog. ...
XForms Select Element - Archive of obsolete content
t that the select control is bound to. representations the xforms select element can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul). characteristics analogous widgets are <html:select
size="5" multiple="true"/> and <xul:listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection check group the select is represented as group of checkboxes (xhtml/xul). characteristics appearance attribute co...
XForms Select1 Element - Archive of obsolete content
and <xul:menulist/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection listbox the select1 is represented as listbox (xhtml/xul). characteristics analogous widgets are <html:select
size="5"/> and <xul:listbox/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e. loses focus), otherwise it is updated upon item selection radio group the select is represented as group of radios (xhtml/xul). characteristics appearance attribu...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
implement internal procedural standards so they are able to operate efficiently. they may also incorporate external procedural and/or technical standards. technical standards have traditionally been pioneered through consortiums or standards bodies. the technical standards can be either public, standards-based or a proprietary de facto standard. the purpose of this document is to discuss and empha
size the importance of conforming to open technology standards that are external to the organization. let’s begin the discussion, however, by looking inward to internal procedures, processes and standards. why should organizations have standard procedures at every level? following standards is certainly not a new organizational phenomenon; organizations require their employees to follow common rule...
Index - Game development
randomizing gameplay 2d, beginner, canvas, games, javascript, phaser, tutorial you've finished all the lessons — congratulations! by this point you would have learnt the basics of phaser and the logic behind simple 2d games. 56 scaling 2d, beginner, canvas, games, javascript, phaser, tutorial scaling refers to how the game canvas will scale on different screen
sizes. we can make the game scale to fit on any screen
size automatically during the preload stage, so we don't have to worry about it later. 57 the score 2d, beginner, canvas, games, javascript, phaser, tutorial, scoring having a score can also make the game more interesting — you can try to beat your own highscore, or your friend's. in this article we'll add a scoring system t...
Introduction to game development for the Web - Game development
pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their input somewhere else, thereby missing important action. svg (scalable vector graphics) lets you build vector graphics that scale smoothly regardless of the
size or resolution of the user's display. typed arrays javascript typed arrays give you access to raw binary data from within javascript; this lets you manipulate gl textures, game data, or anything else, even if it's not in a native javascript format. web audio api this api for controlling the playback, synthesis, and manipulation of audio from javascript code lets you create awesome sound effect...
Game distribution - Game development
istribution and instant play you don't have to tell people to search for your game in an app store with html5 games. you can just send them a direct url to access the game, which they can then click to play the game right away without the need to use third party plugins or download and install a large package. bear in mind that downloading the game might still take a bit of time depending on the
size of the game and your network speed. in any case, it's a lot easier to promote the game if you can drive traffic directly where you want it and don't have to jump through lots of hoops to play. desktop vs mobile the vast majority of the traffic we are interested in — people playing html5 games — comes from mobile devices so that's something you will have to focus on if you truly want to succ...
Bounding volume collision detection with THREE.js - Game development
ing box, which shows the bounding box's shape, and can passed to the previously seen setfromobject method in order to have a bounding box matching the mesh. boxhelper is the recommended way to handle 3d collisions with bounding volumes in three.js. you will miss sphere tests, but the tradeoffs are well worth it. the advantages of using this helper are: it has an update() method that will re
size its bounding box mesh if the linked mesh rotates or changes its dimensions, and update its position. it takes into account the child meshes when computing the
size of the bounding box, so the original mesh and all its children are wrapped. we can easily debug collisions by rendering the meshes that boxhelper creates. by default they are created with a linebasicmaterial material (a three.js mate...
3D collision detection - Game development
whereas rotated boxes require additional trigonometric operations, which are slower to calculate. if you have entities that will be rotating, you can either modify the dimensions of the bounding box so it still wraps the object, or opt to use another bounding geometry type, such as spheres (which are invariant to rotation.) the animated gif below shows a graphic example of an aabb that adapts its
size to fit the rotating entity. the box constantly changes dimensions to snugly fit the entity contained inside. note: check out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis...
Building up a basic demo with the PlayCanvas engine - Game development
first (using the given <canvas> element), and then start the update loop. add the following code to the bottom of your second <script> element: var app = new pc.application(canvas); app.start(); the pc global object contains all the playcanvas functions available in the engine. next, we'll set the canvas to fill the window, and automatically change its resolution to be the same as the canvas
size. again, add the following lines at the bottom of your script. app.setcanvasfillmode(pc.fillmode_fill_window); app.setcanvasresolution(pc.resolution_auto); camera now when the setup code is in place we need to think about implementing the standard scene components: camera, lights and objects. let's start with the camera — add these lines to your code, below the previous ones. var camera = n...
Audio for Web games - Game development
stener('timeupdate', function() { if (this.currenttime > stoptime) { this.pause(); } }, false); note: you can try out our audio sprite player live on jsfiddle. note: on mobile we may need to trigger this code from a user-initiated event such as a start button being pressed, as described above. note: watch out for bit rates. encoding your audio at lower bit rates means smaller file
sizes but lower seeking accuracy. background music music in games can have a powerful emotional effect. you can mix and match various music samples and assuming you can control the volume of your audio element you could cross-fade different musical pieces. using the playbackrate() method you can even adjust the speed of your music without affecting the pitch, to sync it up better with the action. ...
Build the brick field - Game development
the problem is that we're painting them all in one place, at coordinates (0,0). what we need to do is include some calculations that will work out the x and y position of each brick for each loop iteration: var brickx = (c*(brickwidth+brickpadding))+brickoffsetleft; var bricky = (r*(brickheight+brickpadding))+brickoffsettop; each brickx pos...
Create the Canvas and draw on it - Game development
ript too: ctx.beginpath(); ctx.rect(160, 10, 100, 40); ctx.strokestyle = "rgba(0, 0, 255, 0.5)"; ctx.stroke(); ctx.closepath(); the code above prints a blue-stroked empty rectangle. thanks to the alpha channel in the rgba() function, the blue color is semi transparent. compare your code here's the full source code of the first lesson, running live in a jsfiddle: exercise: try changing the
size and color of the given shapes. next steps now we've set up the basic html and learned a bit about canvas, lets continue to the second chapter and work out how to move the ball in our game. « previousnext » ...
Paddle and keyboard controls - Game development
ly brace. the only thing left to do now is call the drawpaddle() function from within the draw() function, to actually print it on the screen. add the following line inside your draw() function, just below the line that calls drawball(): drawpaddle(); compare your code here's the working code for you to compare yours against: exercise: make the paddle move faster or slower, or change its
size. next steps now we have something resembling a game. the only trouble now is that you can just continue hitting the ball with the paddle forever. this will all change in the fifth chapter, game over, when we start to add in an endgame state for our game. « previousnext » ...
Track the score and win - Game development
0; you also need a drawscore() function, to create and update the score display. add the following after the collisiondetection() function: function drawscore() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape. the font definition looks exactly like the one in css — you can set the
size and font type in the font() method. then use fillstyle() to set the color of the font and filltext() to set the actual text that will be placed on the canvas, and where it will be placed. the first parameter is the text itself — the code above shows the current number of points — and the last two parameters are the coordinates where the text will be placed on the canvas. to award a score eac...
Animations and tweens - Game development
he ball, we will make their width and height scale to zero, so they will nicely disappear. to the end, we use the add.tween() method, specifying brick.scale as the argument as this is what we want to tween. the to() method defines the state of the object at the end of the tween. it takes an object containing the chosen parameter's desired ending values (scale takes a scale value, 1 being 100% of
size, 0 being 0% of
size, etc.), the time of the tween in milliseconds and the type of easing to use for the tween. we will also add the optional oncomplete event handler, which defines a function to be executed when the tween finishes. the last thing do to is to start the tween right away using start(). that's the expanded version of the tween definition, but we can also use the shorthand syntax:...
Extra lives - Game development
chored on its top right edge to align properly with the screen, and the latter is centered, both using anchor.set(). the lifelosttext will be shown only when the life is lost, so its visibility is initially set to false. making our text styling dry as you probably noticed we're using the same styling for all three texts: scoretext, livestext and lifelosttext. if we ever want to change the font
size or color we will have to do it in multiple places. to make it easier for us to maintain in the future we can create a separate variable that will hold our styling, let's call it textstyle and place it before the text definitions: textstyle = { font: '18px arial', fill: '#0095dd' }; we can now use this variable when stlying our text labels — update your code so that the multiple instances of ...
The score - Game development
ne at the end of the create() function: scoretext = game.add.text(5, 5, 'points: 0', { font: '18px arial', fill: '#0095dd' }); the text() method can take four parameters: the x and y coordinates to draw the text at. the actual text that will be rendered. the font style to render the text with. the last parameter looks very similar to css styling. in our case the score text will be blue,
sized at 18 pixels, and use the arial font. updating the score when bricks are destroyed we will increase the number of points every time the ball hits a brick and update the scoretext to display the current score. this can be done using the settext() method — add the two new lines seen below to the ballhitbrick() function: function ballhitbrick(ball, brick) { brick.kill(); score += 10; ...
Gecko FAQ - Gecko Redirect 1
00, gecko is expected to support the following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html 4.0 - full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapage
size, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of st...
Base64 - MDN Web Docs Glossary: Definitions of Web-related terms
: decodes a base64 encoded string("atob" should be read as "ascii to binary"). the algorithm used by atob() and btoa() is specified in rfc 4648, section 4. note that btoa() expects to be passed binary data, and will throw an exception if the given string contains any characters whose utf-16 representation occupies more than one byte. for more details, see the documentation for btoa(). encoded
size increase each base64 digit represents exactly 6 bits of data. so, three 8-bits bytes of the input string/binary file (3×8 bits = 24 bits) can be represented by four 6-bit base64 digits (4×6 = 24 bits). this means that the base64 version of a string or file will be at most 133% the
size of its source (a ~33% increase). the increase may be larger if the encoded data is small. for example, the s...
Block cipher mode of operation - MDN Web Docs Glossary: Definitions of Web-related terms
a block cipher mode of operation, usually just called a "mode" in context, specifies how a block cipher should be used to encrypt or decrypt messages that are longer than the block
size. most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data a block at a time. the
size of each block is fixed and determined by the algorithm: for example aes uses 16-byte blocks. block ciphers are always used with a mode, which specifies how to securely encrypt messages that are longer than the block
size. for example, aes is a cipher, while ctr, cbc, and gcm are all modes. using an inappropriate mode, or using a mode incorrectly, can completely undermine the security provided by the underlying cipher. ...
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
the css pixel—denoted in css with the suffix px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. by definition, this is the physical
size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes. that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person. when a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance. as such, it generally suffices to say that when the unit px is used, the goa...
Canonical order - MDN Web Docs Glossary: Definitions of Web-related terms
operty value. it is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value. for example, background shorthand property values are made up of several background-* longhand properties. the canonical order of those longhand values is defined as background-image background-position background-
size background-repeat background-attachment background-origin background-clip background-color furthermore, its syntax defines, that if a value for the background-
size is given, it must be specified after the value for the background-position, separated by a slash. other values may appear in any order. learn more what does “canonical order” mean with respect to css properties? on stack...
Dominator - MDN Web Docs Glossary: Definitions of Web-related terms
in graph theory, node a dominates node b if every path from the root node to b passes through a. this concept is important for garbage collection because it means that b is only reachable through a. so if the garbage collector found a to be unreachable and eligible for reclaiming, than b would also be unreachable and eligible for reclaiming. so objects that a dominates contribute to the retained
size of a: that is, the total amount of memory that could be freed if a itself were freed. learn more general knowledge dominator on wikipedia technical reference dominators garbage collection ...
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu. note, however, that most modern browsers replaced the favicon from the address bar by an image indicating whether or not the website is using https. usually, a favicon is 16 x 16 pixels in
size and stored in the gif, png, or ico file format. they are used to improve user experience and enforce brand consistency. when a familiar icon is seen in the browser's address bar, for example, it helps users know they are in the right place. ...
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
s actually able to respond to that interaction. it is the length of time, in milliseconds, between the first user interaction on a web page and the browser’s response to that interaction. scrolling and zooming are not included in this metric. the time between when content is painted to the page and when all the functionality becomes responsive to human interaction often varies based on the the
size and complexity of the javascript needing to be downloaded, parsed, and executed on the main thread, and on the device speed or lack thereof (think low end mobile devices). the longer the delay, the worse the user experience. reducing site initialization time and eliminating long tasks can help eliminate first input delays. see also requestidlecallback lazy loading ...
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
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. 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. learn more property reference align-content align-items align-self flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout meth...
Gzip compression - MDN Web Docs Glossary: Definitions of Web-related terms
gzip is a file format used for file compression and decompression. it is based on the deflate algorithm that allows files to be made smaller in
size which allows for faster network transfers. gzip is commonly supported by web servers and modern browsers, meaning that servers can automatically compress files with gzip before sending them, and browsers can uncompress files upon receiving them. learn more how to enable compression and gzip for page speed. gzip on wikipedia ...
Grid Column - MDN Web Docs Glossary: Definitions of Web-related terms
a grid column is a vertical track in a css grid layout, and is the space between two vertical grid lines. it is defined by the grid-template-columns property or in the shorthand grid or grid-template properties. in addition, columns may be created in the implicit grid when items are placed outside of columns created in the explicit grid. these columns will be auto-
sized by default, or can have a
size specified with the grid-auto-columns property. when working with alignment in css grid layout, the axis down which columns run is known as the block, or column, axis. learn more property reference grid-template-columns grid-auto-columns grid grid-template further reading css grid layout guide: basic concepts of grid layout ...
Grid Row - MDN Web Docs Glossary: Definitions of Web-related terms
a grid row is a horizontal track in a css grid layout, that is the space between two horizontal grid lines. it is defined by the grid-template-rows property or in the shorthand grid or grid-template properties. in addition, rows may be created in the implicit grid when items are placed outside of rows created in the explicit grid. these rows will be auto
sized by default, or can have a
size specified with the grid-auto-rows property. when working with alignment in css grid layout, the axis along which rows run is known as the inline, or row, axis. learn more property reference grid-template-rows grid-auto-rows grid grid-template further reading css grid layout guide: basic concepts of grid layout ...
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
, there are no clear rules and the way idl attributes behave in conjunction with their corresponding content attributes depends on the attribute. most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. html specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly (select.
size, for example) and you should read the specifications to understand how exactly they behave. learn more general knowledge idl on wikipedia html attribute reference technical reference interface definition language ...
Localization - MDN Web Docs Glossary: Definitions of Web-related terms
tion in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs. 10,000.00 in the u.s.) date format currency cultural references paper
size color psychology compliance with local laws local holidays personal names learn more general knowledge localization at mozilla on mdn localization on wikipedia ...
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
this "separation of concerns" provides for a better division of labor and improved maintenance. some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever). the three parts of the mvc software-design pattern can be described as follows: model: manages data and business logic. view: handles layout and display. ...
Mobile First - MDN Web Docs Glossary: Definitions of Web-related terms
mobile first, a form of progressive enhancement, is a web-development and web-design approach that focuses on prioritizing design and development for mobile screen
sizes over design and development for desktop screen
sizes. the rationale behind the mobile-first approach is to provide users with good user experiences at all screen
sizes—by starting with creating a user experience that works well on small screens, and then building on top of that to further enrich the user experience as the screen
size increases. the mobile-first approach contrasts with the older approach of designing for desktop screen
sizes first, and then only later adding some support for small screen
sizes. ...
Public-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
public key is used to encrypt and the private key is used to decrypt. this gives public-key encryption systems an advantage over symmetric encryption systems in that the encryption key can be made public. anyone could encrypt a message to the owner of the private key, but only the owner of the private key could decrypt it. however, they are typically much slower than symmetric algorithms and the
size of message they can encrypt is proportional to the
size of the key, so they do not scale well for long messages. as a result, it's common for an encryption system to use a symmetric algorithm to encrypt the message, then a public-key system to encrypt the symmetric key. this arrangement can confer the benefits of both systems. commonly used public-key cryptosystems are rsa (for both signing and...
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
't relate to the content of the message. request headers, like accept, accept-*, or if-* allow to perform conditional requests; others like cookie, user-agent, or referer precise the context so that the server can tailor the answer. not all headers appearing in a request are request headers. for example, the content-length appearing in a post request is actually an entity header referring to the
size of the body of the request message. however, these entity headers are often called request headers in such a context. in addition, cors defines a subset of request headers as simple headers, request headers that are always considered authorized and are not explicitly listed in responses to preflight requests. a few request headers after a get request: get /home.html http/1.1 host: developer.mo...
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
a response header is an http header that can be used in an http response and that doesn't relate to the content of the message. response headers, like age, location or server are used to give a more detailed context of the response. not all headers appearing in a response are response headers. for example, the content-length header is an entity header referring to the
size of the body of the response message. however, these entity requests are usually called responses headers in such a context. the following shows a few response headers after a get request. note that strictly speaking, the content-encoding and content-type headers are entity header: 200 ok access-control-allow-origin: * connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: mon, 1...
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
ut with svg support. all major browsers now support svg. based on an xml syntax, svg can be styled with css and made interactive using javascript. html5 now allows direct embedding of svg tags in an html document. as a vector image format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen
size. svg also provides a useful set of tools, such as clipping, masking, filters, and animations. learn more general knowledge svg on wikipedia learning svg w3.org's svg primer technical information svg documentation on mdn latest svg specification ...
Speed index - MDN Web Docs Glossary: Definitions of Web-related terms
speed index (si) is a page load performance metric that shows you how quickly the contents of a page are visibly populated. it is the average time at which visible parts of the page are displayed. expressed in milliseconds, and dependent on the
size of the viewport, the lower the score, the better. the calculation calculates what percent of the page is visually complete at every 100ms interval until the page is visually complete. the overall score, the above the fold metric, is a sum of the individual 10 times per second intervals of the percent of the screen that is not-visually complete. ...
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
rs and the transformation made by one key can only be reversed using the other key. symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance. most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. the
size of each block is fixed and determined by the algorithm: for example aes uses 16-byte blocks. block ciphers are always used with a mode, which specifies how to securely encrypt messages that are longer than the block
size. for example, aes is a cipher, while ctr, cbc, and gcm are all modes. using an inappropriate mode, or using a mode incorrectly, can completely undermine the security provided by ...
TCP - MDN Web Docs Glossary: Definitions of Web-related terms
otocol that lets two hosts connect and exchange data streams. tcp guarantees the delivery of data and packets in the same order as they were sent. vint cerf and bob kahn, who were darpa scientists at the time, designed tcp in the 1970s. tcp role is to ensure the packets are reliably delivered, error free. tcp has concurrence control, which means the initial requests start small, increasing in
size to the levels of bandwidth the computers, servers, and network can support. ...
Tree shaking - MDN Web Docs Glossary: Definitions of Web-related terms
statements in es2015 to detect if code modules are exported and imported for use between javascript files. in modern javascript applications, we use module bundlers (e.g., webpack or rollup) to automatically remove dead code when bundling multiple javascript files into single files. this is important for preparing code that is production ready, for example with clean structures and minimal file
size. learn more general knowledge "benefits of dead code elimination during bundling" in axel rauschmayer's book: "exploring js: modules" technical reference tree shaking implementation with webpack ...
lossy compression - MDN Web Docs Glossary: Definitions of Web-related terms
lity. the process of such compression is irreversible; once lossy compression of the content has been performed, the content cannot be restored to its original state. therefore, content that has undergone lossy compression should generally not be further edited. lossy compression is widely used in image formats. although there is no obvious difference quality between the two images above, the
size of the second image has been significantly reduced, using lossy compression. see also lossless compression ...
minification - MDN Web Docs Glossary: Definitions of Web-related terms
minification is the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser. minification can include the removal of code comments, white space, and unused code, as well as the shortening of variable and function names. minification is used to improve web performance by reducing file
size. it is generally an automated step that occurs at build time. as minification makes code less legible to humans, developer tools have 'prettification' features that can add white space back into the code to make it a bit more legible. ...
MDN Web Docs Glossary: Definitions of Web-related terms
i i18n iana icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb information architecture inheritance input method editor instance internationalization internet intrinsic
size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k key keyword l latency layout viewport lazy load lgpl ligature local scope ...
Test your skills: CSS and JavaScript accessibility - Learn web development
or in an online editor. css accessibility 2 in this next task you are presented with a simple bit of content — just headings and paragraphs. there are accessibility issues with the colors and sizing of the text; we'd like you to: 1. explain what the problems are, and what the guidelines are that state the acceptable values for color and sizing. 2. select new values for the color and font-
size that fix the problem. 3. update the css with these new values to fix the problem. 4. test the code to make sure the problem is now fixed. explain what tools or methods you used to select the new values and test the code. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. javascrip...
CSS and JavaScript accessibility best practices - Learn web development
ign, but don't change it so much that it no longer looks or behaves as expected. the following sections summarize the main html features to consider. "standard" text content structure headings, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-
size: 5rem; } p, li { line-height: 1.5; font-
size: 1.6rem; } you should: select sensible font
sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfortable to read. make sure your headings stand out from your body text, typically big and bold like the default styling. your lists should look like lists. your text color should contrast well with your background...
What is accessibility? - Learn web development
ef example of what the experience is like. in terms of statistics, the world health organization estimates that "285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision." (see visual impairment and blindness). that's a large and significant population of users to just miss out on because your site isn't coded properly — almost the same
size as the population of the united states of america. people with hearing impairments otherwise known as people with auditory impairments or deaf people, this group of people has either low hearing levels or no hearing at all. hearing-impaired people do use ats (see assistive devices for people with hearing, voice, speech, or language disorders), but there are not really special ats specific for c...
A cool-looking box - Learn web development
k is to create a cool, fancy box and explore the fun we can have with css. general tasks apply the css to the html. styling the box we'd like you to style the provided <p>, giving it the following: a reasonable width for a large button, say around 200 pixels. a reasonable height for a large button, centering the text vertically in the process. centered text. a slight increase in font
size, to around 17-18 pixel computed style. use rems. write a comment about how you worked out the value. a base color for the design. give the box this color as its background color. the same color for the text; make it readable using a black text shadow. a fairly subtle border radius. a 1-pixel solid border with a color similar to the base color, but a slightly darker shade. a linear semi-trans...
Advanced styling effects - Learn web development
d on multiple light sources. other box shadow features unlike text-shadow, box-shadow has an inset keyword available — putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow. let's have a look and see what we mean. ...
Cascade and inheritance - Learn web development
can't be overridden in any other way. but really, don't use it if you can avoid it. the effect of css location finally, it is also useful to note that the importance of a css declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font
size on all web pages they visit to be double the normal
size to allow for easier reading. to summarize conflicting declarations will be applied in the following order, with later ones overriding earlier ones: declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set). normal declarations in user style sheets (custom styles set by a user). nor...
Handling different text directions - Learn web development
in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode. to make this easier, css has recently developed a set of mapped properties. these essentially replace physical properties — things like width and height — with logical, or flow relative versions. the property mapped to width when in a horizontal writing mode is called inline-
size — it refers to the
size in the inline dimension. the property for height is named block-
size and is the
size in the block dimension. you can see how this works in the example below where we have replaced width with inline-
size. logical margin, border, and padding properties in the last two lessons we have learned about the css box model, and css borders. in the margin, border, and padding p...
Test your skills: Images and Form elements - Learn web development
ge above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following changes to the way this form looks: use attribute selectors to target the search field and button inside .myform. make the form field and button use the same text
size as the rest of the form. give the form field and button 10 px of padding. give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5px. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in...
Test your skills: The Box Model - Learn web development
ing the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model three in this example the inline element has a margin, padding and border however the lines above and below are overlapping it. what can you add to your css to cause the
size of the margin, padding, and border to be respected by the other lines, while still keeping the element inline? try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive...
Test your skills: backgrounds and borders - Learn web development
r glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. backgrounds and borders 1 in this task we want you to add a background, border, and some simple styling to a page header: give the box a 5px black solid border, with rounded corners of 10px. add a background image (use the url balloons.jpg) and
size it so that it covers the box. give the <h2> a semi-transparent black background color, and make the text white. the finished example should look like the image below. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. backgrounds and borders 2 in this task we want you to add b...
Test your skills: values and units - Learn web development
with the alpha channel set to .2. you can find conversions for the hex color at this link. you need to figure out how to use the values in css. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. task two in this task you need to set the
size of various items of text. the <h1> should be 50 pixels. the <h2> should be 2em. all <p> elements should be 16 pixels. a <p> element that is directly after an <h1> should be 120%. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an onl...
CSS building blocks - Learn web development
o be contained comfortably inside a box. in this guide, you will learn what it is and how to manage it. css values and units every property used in css has a value or set of values that are allowed for that property. in this lesson, we will take a look at some of the most common values and units in use. sizing items in css in the various lessons so far you have come across a number of ways to
size items on a web page using css. understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a
size via css and define a few terms around sizing that will help you in the future. images, media, and form elements in this lesson we will take a look at how certain special elements are treated in css. images, ot...
Test Your Skills: Fundamental layout comprehension - Learn web development
re: to display the navigation items in a row, with an equal amount of space between the items. the navigation bar should scroll with the content and then become stuck at the top of the viewport when it reaches it. the image that is inside the article should have text wrapped around it. the <article> and <aside> elements should display as a two column layout. the columns should be a flexible
size so that if the browser window shrinks smaller the columns become narrower. the photographs should display as a two column grid with a 1 pixel gap between the images. you will not need to edit the html in order to achieve this layout and the techniques you should use are: positioning float flexbox css grid layout there are a few ways in which you could achieve some of these tasks, and t...
Introduction to CSS layout - Learn web development
flex property to all of our child items, with a value of 1. this will cause all of the items to grow and fill the container, rather than leaving space at the end. if there is more space then the items will become wider; if there is less space they will become narrower. in addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust
size to take up the same amount of space, whatever that is. flexbox example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } .wrapper > div { flex: 1; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div...
Normal Flow - Learn web development
— it's that box model thing again, which we've looked at earlier. by default, a block level element's content is 100% of the width of its parent element, and as tall as its content. inline elements are as tall as their content, and as wide as their content. you can't set width or height on inline elements — they just sit inside the content of block level elements. ...
Positioning - Learn web development
distance the element should be from each of the containing element's sides. so in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left. (in this case, the "containing element" is the initial containing block. see the section below for more information) note: you can use top, bottom, left, and right to re
size elements if you need to. try setting top: 0; bottom: 0; left: 0; right: 0; and margin: 0; on your positioned elements and see what happens! put it back again afterwards... note: yes, margins still affect positioned elements. margin collapsing doesn't, however. note: you can see the example at this point live at 3_absolute-positioning.html (see source code). positioning contexts which ele...
Practical positioning examples - Learn web development
ing an element by toggling a button. the element we'll be controlling is the <aside> element that follows the other two (we've left its contents out of the above code listing for brevity). in the below sections we'll explain how this all works. styling the form elements first let's deal with the form elements — add the following css in between your <style> tags: label[for="toggle"] { font-
size: 3rem; position: absolute; top: 4px; right: 5px; z-index: 1; cursor: pointer; } input[type="checkbox"] { position: absolute; top: -100px; } the first rule styles the <label>; here we've: set a large font-
size to make the icon nice and big. set position absolute on it, and used top and right to position it nicely in the top-right corner. set a z-index of 1 on it — this is so...
Supporting older browsers - Learn web development
example of this is if we were to add percentage widths to our floated items to make the columns more like the grid display, stretching to fill the container. in the floated layout, the percentage is calculated from the container — 33.333% is a third of the container width. in grid however that 33.333% is calculated from the grid area the item is placed in, so it actually becomes a third of the
size we want once the grid layout is introduced. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <div class="wrapper"> <div class="item">item one</div> <...
How CSS works - Learn web development
xample below i have used the british english spelling for color, which makes that property invalid as it is not recognised. so my paragraph has not been colored blue. all of the other css have been applied however; only the invalid line is ignored. <p> i want this text to be large, bold and blue.</p> p { font-weight: bold; colour: blue; /* incorrect spelling of the color property */ font-
size: 200%; } this behavior is very useful. it means that you can use new css as an enhancement, knowing that no error will occur if it is not understood — the browser will either get the new feature or not. coupled with the way that the cascade works, and the fact that browsers will use the last css they come across in a stylesheet when you have two rules with the same specificity you can also ...
Using your new knowledge - Learn web development
ck, then ask us for help — see the assessment or further help section at the bottom of this page. working with css the following live example shows a biography, which has been styled using css. the css properties that i have used are as follows — each one links to its property page on mdn, which will give you more examples of its use. font-family color border-bottom font-weight font-
size text-decoration i have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that. use css to change how this biography looks by changing the values of the properties i have used. make the level one heading pink, using the css color keyword hotpink. give the heading a 10px dotted border-bottom which uses the css color keyw...
CSS first steps - Learn web development
this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. ...
CSS FAQ - Learn web development
f a shorthand property using shorthand properties for defining style rules is good because it uses a very compact syntax. using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. this means that a previous rule for a single attribute could be implicitly overridden. #stockticker { font-
size: 12px; font-family: verdana; font-weight: bold; } .stocksymbol { font: 14px arial; color: red; } <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ... </div> in the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important. #stockticker { font-weight: bold; font: 12...
Typesetting a community school homepage - Learn web development
the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-
size of 10px. give your headings and other element types appropriate font-
sizes defined using a suitable relative unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as approp...
Web fonts - Learn web development
e need to make sure the paths to the files are correct, so add fonts/ to the start of each path (adjust as necessary). now you can use these fonts in your font stacks, just like any web safe or default system font. for example: font-family: 'zantrokeregular', serif; you should end up with a demo page with some nice fonts implemented on them. because different fonts are created at different
sizes, you may have to adjust the
size, spacing, etc., to sort out the look and feel. note: if you have any problems getting this to work, feel free to compare your version to our finished files — see web-font-finished.html and web-font-finished.css (run the finished example live). using an online font service online font services generally store and serve fonts for you, so you don't have to ...
How much does it cost to do something on the Web? - Learn web development
or produce audio and video files. you need to upload content to a remote server (see hosting below), so you need a modem. your isp can rent internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location. isp access make sure that you have sufficient bandwidth: low-bandwidth access may be adequate to support a 'simple' website: reasonably-
sized images, texts, some css and javascript. that will likely cost you a few dozen dollars, including the rent for the modem. on the other hand, you'll need a high-bandwidth connection, such as dsl, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. it could cost the same as low-bandwidt...
What is accessibility? - Learn web development
xperience your website the way you hoped. in this article we give general accessibility principles and explain a few rules. active learning there is no active learning available yet. dig deeper accessibility: general principles we might associate accessibility at first with negative limitations. this building has to be accessible, so it must follow these regulations for door width and toilet
size and elevator placement. that's a narrow way to think of accessibility. think of it as a wonderful way to empower people and serve more customers. what can the people in brazil do with your english website? can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? they'll go somewhere else. in general, we must think about our p...
Basic native form controls - Learn web development
they can be marked as readonly (the user cannot modify the input value but it is still sent with the rest of the form data) or disabled (the input value can't be modified and is never sent with the rest of the form data). they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box. they can be constrained in
size (the physical
size of the box) and maxlength (the maximum number of characters that can be entered into the box). they can benefit from spell checking (using the spellcheck attribute), if the browser supports it. note: the <input> element is unique amongst html elements because it can take many different forms depending on its type attribute value. it is used for creating most types of form w...
HTML forms in legacy browsers - Learn web development
of color type looks different in safari, chrome and firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker. it's generally a good idea to not alter the default appearance of form control because altering one css property value may alter some input types but not others. for example, if you declare input { font-
size: 2rem; }, it will impact number, date, and text, but not color or range. if you alter a property, that may impact the appearance of the widget in unexpected ways. for example, [value] { background-color: #ccc; } may have been used to target every <input> with a value attribute, but changing the background-color or border radius on a <meter> will lead to likely unexpected results that differ acros...
Example 2 - Learn web development
tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; backgrou...
Example 3 - Learn web development
tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; backgrou...
Example 4 - Learn web development
tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; backgrou...
Example 5 - Learn web development
tyles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-
size : 0.625em; /* 10px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */ width : 10em; /* 100px */ border : 0.2em solid #000; /* 2px */ border-radius : 0.4em; /* 4px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */ background : #f0f0f0; backgrou...
Example - Learn web development
abel span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; re
size: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; } result ...
CSS property compatibility table for form controls - Learn web development
nd partial[1] partial[1] most of the browsers only support this property on the <select> element. border-radius partial[1] partial[1] box-shadow no partial[1] note firefox does not provide any way to change the down arrow on the <select> element. select boxes (multiline) see the <select>, <optgroup> and <option> elements and the
size attribute. property n t note css box model width yes yes height yes yes border yes yes margin yes yes padding partial[1] partial[1] opera does not support padding-top and padding-bottom on the <select> element. text and font color ...
HTML basics - Learn web development
" ' ` = < > ) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable. nesting elements you can put elements inside other elements too — this is called nesting. if we wanted to state that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is to be strongly empha
sized: <p>my cat is <strong>very</strong> grumpy.</p> you do however need to make sure that your elements are properly nested. in the example above, we opened the <p> element first, then the <strong> element; therefore, we have to close the <strong> element first, then the <p> element. the following is incorrect: <p>my cat is <strong>very grumpy.</p></strong> the elements have to open and close co...
JavaScript basics - Learn web development
iew of javascript basics completed (above), let's add some new features to our example site. adding an image changer in this section, you will learn how to use javascript and dom api features to alternate the display of one of two images. this change will happen as a user clicks the displayed image. choose an image you want to feature on your example site. ideally, the image will be the same
size as the image you added previously, or as close as possible. save this image in your images folder. rename the image firefox2.png. add the javascript below to your main.js file. (also delete your hello world! javascript from the earlier exercise.) let myimage = document.queryselector('img'); myimage.onclick = function() { let mysrc = myimage.getattribute('src'); if(mysrc === 'images/...
HTML Cheatsheet - Learn web development
e="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</span> that we will work on differently </p> span its used to differentiate a part of the content that we will work on differently empha
size some text <em>i'm posh</em> i'm posh italic textt you can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in italics bold some text <b>bold a word or phrase</b>within the text bold a word or phrase within the text mark text as important <strong>i'm important</strong> i'm important highlight some te...
Tips for authoring fast-loading HTML pages - Learn web development
ata which can be removed. configure your servers, apply gzip compression for svg assets. minify and compress your images large images cause your page to take more time to load. consider compressing your images before adding them to your page, using compression features built into image-manipulation tools such as photoshop, or using a specialized tool such as compress jpeg or tiny png,. specify
sizes for images and tables if the browser can immediately determine the height and/or width of your images and tables, it will be able to display a web page without having to reflow the content. this not only speeds the display of the page but prevents annoying changes in a page's layout when the page completes loading. for this reason, height and width should be specified for images, whenever possi...
Define terms with HTML - Learn web development
too, except html is not a visual medium and so we don't use bold. we use <dfn>, which is a special element just for marking the first occurrence of keywords. note that <dfn> tags go around the word to be defined, not the definition (the definition consists of the entire paragraph): <p><dfn>firefox</dfn> is the web browser created by the mozilla foundation.</p> another use for bold is to empha
size content. bold itself is a concept foreign to html, but there are tags for indicating emphasis. special case: abbreviations it's best to mark abbreviations specially with <abbr>, so that screen readers read them appropriately and so that you can operate on all abbreviations uniformly. just as with any new keyword, you should define your abbreviations the first time they occur. <p> <dfn><abbr...
Use HTML to solve common problems - Learn web development
a basic html document how to divide a webpage into logical sections how to set up a proper structure of headings and paragraphs basic text-level semantics html specializes in providing semantic information for a document, so html answers many questions you might have about how to get your message across best in your document. ...
Document and website structure - Learn web development
example. some websites have more columns, some are a lot more complex, but you get the idea. with the right css, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job. this is because visuals don't tell the whole story. ...
Test your skills: Links - Learn web development
re so that the pages don't open in the embedded <iframe>, getting rid of your example code in the process! try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. links 3 the following links link to an info page about narwhals, a support email address, and a pdf factfile that is 4mb in
size. in this task we want you to: take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text. add a warning to any links that need a warning added. note: the first and third links in the example have the target="_blank" attribute set on them, so that when you click on them, they open the linked page in a new tab. this is not strictly best prac...
Test your skills: HTML images - Learn web development
n the page. the image is called blueberries.jpg, and it is in a folder inside the current folder called images. add some alternative text to an appropriate attribute to describe the image, for people that cannot see it. give the <img> element an appropriate width and height so that it displays at the correct aspect ratio, and enough space is left on the page to display it. the image's intrinsic
size is 615 x 419 pixels. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. html images 2 in this task you already have a full-featured image, but we'd like you to add a tooltip that appears when the image is moused over. you should put some appropriate information into the tooltip. ...
Test your skills: Multimedia and embedding - Learn web development
n't support <video>. add multiple sources, containing the paths to the video files. the files are called video.mp4 and video.webm, and are in a folder inside the current folder called media. let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time. give the <video> a width and height equal to its intrinsic
size (320 by 240 pixels). make the video muted by default. display the text tracks contained in the media folder, in a file called subtitles_en.vtt, when the video is playing. you must explicitly set the type as subtitles, and the subtitle language to english. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor...
Video and audio content - Learn web development
oplay loop muted preload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video
size either with these attributes or with css. in both cases, videos maintain their native width-height ratio — known as the aspect ratio. if the aspect ratio is not maintained by the
sizes you set, the video will grow to fill the space horizontally, and the unfilled space will just be given a solid background color by default. autoplay makes the audio or video start playing right away, while the ...
Multimedia and Embedding - Learn web development
n situations. unlike regular formats like png/jpg, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. this article introduces you to what vector graphics are and how to include the popular svg format in web pages. responsive images in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen
sizes, resolutions, and other such features — and look at what tools html provides to help implement them. this helps to improve performance across different devices. responsive images are just one part of responsive design, a future css topic for you to learn. assessments the following assessments will test your understanding of the html basics covered in the guides above: mozilla splash page...
HTML table basics - Learn web development
s mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. this can result in the code being harder to write, maintain, and debug. tables are not automatically responsive: when you use proper layout containers (such as <header>, <section>, <article>, or <div>), their width defaults to 100% of their parent element. tables on the other hand are
sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices. active learning: creating your first table we've talked table theory enough, so, let's dive into a practical example and build up a simple table. first of all, make a local copy of blank-template.html and minimal-table.css in a new directory on yo...
Structuring the web with HTML - Learn web development
through getting started with the web before attempting this topic, however, it isn't absolutely necessary; much of what is covered in the html basics article is also covered in our introduction to html module, albeit in a lot more detail. ...
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
prefer). this sets a red background on the page, sets the <body> height to 100% of the <html> height, and centers the <div> inside the <body>, horizontally and vertically. html { background-color: white; height: 100%; } body { height: inherit; background-color: red; margin: 0; display: flex; justify-content: center; align-items: center; } div { display: inline-block; font-
size: 10rem; } insert a <script> element just above the closing </body> tag. insert the following javascript inside your <script> element. here, you're storing a reference to the <div> inside a constant, setting a rotatecount variable to 0, setting an uninitialized variable that will later be used to contain a reference to the requestanimationframe() call, and setting a starttime variable ...
Introduction to events - Learn web development
ow, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window. there are many different types of events that can occur. for example: the user selects a certain element or hovers the cursor over a certain element. the user chooses a key on the keyboard. the user re
sizes or closes the browser window. a web page finishes loading. a form is submitted. a video is played, paused, or finishes. an error occurs. you can gather from this (and from glancing at the mdn event reference) that there are a lot of events that can be responded to. each available event has an event handler, which is a block of code (usually a javascript function that you as a programmer c...
Test your skills: Events - Learn web development
online editor. events 2 now we'll look at keyboard events. to pass this assessment you need to build an event handler that moves the circle around the provided canvas when the wasd keys are pressed on the keyboard. the circle is drawn with the function drawcircle(), which takes the folllowing parameters as inputs: x — the x coordinate of the circle. y — the y coordinate of the circle.
size — the radius of the circle. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<div class="button-bar"> ... </div>), which when invoked by clicking any of the buttons w...
Client-side storage - Learn web development
client to be displayed by the user's browser. client-side storage works on similar principles, but has different uses. it consists of javascript apis that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. this has many distinct uses, such as: personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font
size). persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in). saving data and assets locally so a site will be quicker (and potentially less expensive) to download, or be usable without a network connection. saving web application generated documents locally for use offline often client-side and ser...
Introduction to web APIs - Learn web development
they use events to handle changes in state we already discussed events earlier on in the course in our introduction to events article, which looks in detail at what client-side web events are and how they are used in your code. if you are not already familiar with h...
A first splash into JavaScript - Learn web development
tering the following line: guesses.value the browser returns undefined, because paragraphs don't have the value property. to change the text inside a paragraph, you need the textcontent property instead. try this: guesses.textcontent = 'where is my paragraph?'; now for some fun stuff. try entering the below lines, one by one: guesses.style.backgroundcolor = 'yellow'; guesses.style.font
size = '200%'; guesses.style.padding = '10px'; guesses.style.boxshadow = '3px 3px 6px black'; every element on a page has a style property, which itself contains an object whose properties contain all the inline css styles applied to that element. this allows us to dynamically set new css styles on elements using javascript. finished for now... so that's it for building the example. you got to th...
What is JavaScript? - Learn web development
ng blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right
size and shape, find the correct-
sized screws, and then put them together to make a bookshelf. they generally fall into two categories. browser apis are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. for example: the dom (document object model) api allows you to manipulate html and css, creating, removing and chan...
Object-oriented JavaScript for beginners - Learn web development
ays information about the students and teachers at a school. here we'll look at oop theory in general, not in the context of any specific programming language. to start this off, we could return to our person object type from our first objects article, which defines the generic data and functionality of a person. there are lots of things you could know about a person (their address, height, shoe
size, dna profile, passport number, significant personality traits ...) , but in this case we are only interested in showing their name, age, gender, and interests, and we also want to be able to write a short introduction about them based on this data, and get them to say hello. this is known as abstraction — creating a simple model of a more complex thing, which represents its most important aspec...
CSS performance optimization - Learn web development
ce { font-family: somefont; src: url(/path/to/fonts/somefont.woff) format('woff'); font-weight: 400; font-style: normal; font-display: fallback; } the contain property the contain css property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. this allows the browser to recalculate layout, style, paint,
size, or any combination of them for a limited area of the dom and not the entire page. conclusion previous overview: performance next in this module the "why" of web performance what is web performance? how do users perceive performance? measuring performance multimedia: images multimedia: video javascript performance best practices. html performance features css performance fea...
Web performance resources - Learn web development
well as possible. below is a quick review of best practices, tools, apis with links to provide more information about each topic. best practices start with learning the critical rendering path of the browser. knowing this will help you understand how to improve the performance of the site. using resource hints such as rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload keep the
size of javascript to a minimum. only use as much javascript as needed for the current page. css performance factors use http/2 on your server (or cdn). use a cdn for resources which can reduce load times significantly. compress your resources using gzip, brotli, and zopfli. image optimization (use css animation, or svg if possible). lazy loading parts of your application outside the viewport. i...
What is web performance? - Learn web development
speeds of an application, optimizing where possible, and then monitoring the performance, to ensure that what you've optimized stays optimized. this involves a number of metrics (measurable indicators that can indicate success or failure) and tools to meaure those metrics, which we will discuss throughout this module. to summarize, many features impact performance including latency, application
size, the number of dom nodes, the number of resource requests made, javascript performance, cpu load, and more. it is important to minimize the loading and response times, and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience. note: web performance...
The business case for web performance - Learn web development
hlights the importance of understanding how cumulative experiences impact conversion and retention rates. performance budgets setting a web performance budget can help you make sure the team stays on track in keeping the site and help prevent regressions. a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total
size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained. the budget can be applied to a single file, a file type, all files loaded on a page, a specific metric, or a threshold over a period of time.the budget reflects reachable goals; whehter they are time, quantity, or rule based. definining and promoting a budget helps performance proponent adv...
JavaScript performance - Learn web development
. this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for web performance. prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side web technologies. objective: to learn about the effects of javascript on performance optimization, and how a javascript file
size is not the only impact on web performance. similar to images and video, the best way to improve performance is to omit what is not, in fact, necessary. but not all bytes downloaded have the same impact. javascript bytes have to be downloaded, parsed, and exectuted. javascript impacts download performance. we'll cover tips and tricks to minimize that impact on download. but javascript can a...
Web performance - Learn web development
not the actual timings. measuring performance now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and apis and how we can make performance part of the web development workflow. multimedia: images the lowest hanging fruit of web performance is often media optimization. serving different media files based on each user agent's capability,
size, and pixel density is possible. in this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image. multimedia: video the lowest hanging fruit of web performance is often media optimization. in this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can imp...
Client-Server Overview - Learn web development
template, and not across potentially thousands of static pages. anatomy of a dynamic request this section provides a step-by-step overview of the "dynamic" http request and response cycle, building on what we looked at in the last article with much more detail. in order to "keep things real" we'll use the context of a sports-team manager website where a coach can select their team name and team
size in an html form and get back a suggested "best lineup" for their next game. the diagram below shows the main elements of the "team coach" website, along with numbered labels for the sequence of operations when the coach accesses their "best team" list. the parts of the site that make it dynamic are the web application (this is how we will refer to the server-side code that processes http reques...
Deployment and next steps - Learn web development
rlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the css sections of our components into public/build/bundle.css. it also starts a development server and watches for changes, recompiling the app and refreshing the page when a change occurs. your generated bundle.js and bundle.css files will be something like this (file
size on the left): 504 jul 13 02:43 bundle.css 95981 jul 13 02:43 bundle.js to compile our application for production we have to run npm run build instead. in this case, svelte won't lunch a web server or keep watching for changes. it will however minify and compress our javascript files using terser. so, after running npm run build, our generated bundle.js and bundle.css files will be more like ...
Introduction to automated testing - Learn web development
s already very useful, and way more convenient than having to set up all these emulators and virtual machines by yourself. other basic features if you go back to the main browserstack page, you'll find a couple of other useful basic features under the more menu option: responsive: enter a url and press generate, and browserstack will load that url on multiple devices with different viewport
sizes. within each device you can further adjust settings like monitor
size, to get a good idea of how your site's layout works across different form factors. screenshots: enter a url, choose the browsers/devices/platforms you are interested in, then press generate screenshots — browserstack will take screenshots of your site in all those different browsers then make them available to you to view a...
Handling common JavaScript problems - Learn web development
to avoid loading more javascript than you need, bundle your scripts into a single file using a solution like browserify. in general, reducing the number of http requests is very good for performance. make your files even smaller by minifying them before you load them onto your production server. minifying squashes all the code together onto a huge single line, making it take up far less file
size. it is ugly, but you don't need to read it when it is finished! this is best done using a minification tool like uglify (there's also an online version — see jscompress.com) when using apis, make sure you turn off the api features when they are not being used; some api calls can be really expensive on processing power. for example, when showing a video stream, make sure it is turned off when y...
Strategies for carrying out testing - Learn web development
r the new virtual machine choose which operating system and version you are installing on it set how much ram should be allocated (we'd recommend something like 2048mb, or 2gb) create a virtual hard disk (choose the default options across the three dialog boxes containing create a virtual hard disk now, vdi (virtual disk image), and dynamically allocated). choose the file location and
size for the virtual hard disk (choose a sensible name and location to keep it, and for the
size specify around 50gb, or as much as you are comfortable with specifying). now the new virtual box should appear in the left hand menu of the main virtual box ui window. at this point, you can double-click to open it — it will start to boot up the virtual machine, but it won't yet have the operating...
Introducing a complete toolchain - Learn web development
this already sounds like a necessary toolchain. for our sample project, we'll be using a toolchain specifically designed to aid our software development and support the technical choices made during the software design phase. we will however be avoiding any superfluous tooling, with the aim of keeping complexity to a minimum. for example, we could have included a tool to minimize our svg file
sizes during build. however, this project has only 4 svg images, which were manually minified using svgo before adding them to the project. a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two web services in the above list of tools. let's take this opportunity to make sure we are set up with them before we continue. you will need to c...
Learn web development
actice of making web content available to as many people as possible regardless of disability, device, locale, or other differentiating factors. this topic gives you all you need to know. web performance — making websites fast and responsive web performance is the art of making sure web applications download fast and are responsive to user interaction, regardless of a user's bandwidth, screen
size, network, or device capabilities. tools and testing this topic covers the tools developers use to facilitate their work, such as cross-browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks. server-side website programming even if you are concentrating on client-side web development, it is still useful...
Mozilla's Section 508 Compliance
r support on mac os x b) at least one mode of operation and information retrieval that does not require visual acuity greater than 20/70 shall be provided in audio and enlarged print output working together or independently, or support for assistive technology used by people who are visually impaired shall be provided. complete. built-in text zoom limited only to the
size of the window. works zoomtext version 8.11. caveat, the document reading and app readings modes don't support columnized text. the focus is not always correctly echoed via text to speech. however, it is functional and very possible to use zoomtext with mozilla in this mode. have contacted ai squared to work on reamining issues. complete, but needs testing. works with gnome-mag no ...
Accessible Toolkit Checklist
information about linux and os x. it is maintained by the mozilla accessibility community. contributions are welcome. general dialogs/windows/general escape key cancels dialogs and refocuses the previously focused on the parent window. alt+f4 closes windows, similar to escape but even works on dialogs without cancel button alt+space opens window menu with restore, move,
size, minimize, maximize, close the move and
size options must be usable with the arrow keys on the keyboard in windows, initial focus goes to first focusable widget that is not a clickable tabbed property sheet label making tab order definable. default tab order should be in document order. tab order must wrap, not have invisible items in tab order dynamically added item...
Frequently Asked Questions for Lightweight themes
artwork will always be your artwork. after creating a lightweight theme, can i edit the design? yes. if at any point you need to edit or delete your theme design after it has been submitted to the gallery, you can access it from the submissions dashboard. from there, you can view your current designs. by clicking on each, you can make changes to each design's settings. what's the maximum file
size allowable for my lightweight theme? the theme you upload may not exceed 300 kb for the header or the footer image. couldn't find the answer you're looking for? consider visiting the firefox support website or the themes forum for more help. ...
Adding a new event
st be with "m" prefix. although, a lot of existing members don't have "m" prefix, but you shouldn't use the legacy local rules. if you need to add methods, it's okay to implement them as inline methods. i.e., you can implement new methods in the header files directly. however, if implementing method isn't small and called from a lot of places, implementing it as inline causes to increase binary
size. in this case, you should implement the method in widgeteventimple.cpp. and also, if implementing a method needs to include other header files, you should implement it in widgeteventimple.cpp too for avoiding include hell. make new event class ipc aware for example, new class is caused by native user input event and needed to be dispatch to content, the class should be able to cross process bou...
Adding a new CSS property
alue" (and, for the 'initial' value, it's definition of "initial value"). for examples of how to write this computation code, see other examples in nsrulenode.cpp. in any case where the computation you do might vary between elements that match the same list of style rules, you need to set the canstoreinruletree variable to false. a common example of this is 'em' units, which depend on the font
size. note that use of setcoord (if the resulting value needs to be a tagged union) or setdiscrete is preferred when it's possible to use those functions. also, it's very important not to touch the computed style data at all when there's no specified data provided (ecssunit_null); touching the computed style data in this case would break partial computation based on a start struct, which is when we ...
Creating Sandboxed HTTP Connections
the listener's methods. channel.asyncopen(listener, null); http notifications the above mentioned listener is a nsistreamlistener, which gets notified about events such as http redirects and data availability. onstartrequest - gets called when a new request is initiated. ondataavailable - new data is available. since this is a stream, it could be called multiple times (depending on the
size of the returned data, networking conditions, etc). onstoprequest - the request has finished. onchannelredirect - when a redirect happens, a new nsichannel is created, and both the old and new ones are passed in as arguments. since nsistreamlistener does not cover cookies, the current channel being used will need to be stored as a global, since another listener will be used for cookie notifi...
Capturing a minidump
pit out more data, and the prompt at the bottom will change from saying "*busy*" to having a number in it. at this point, you should type ".dump /ma c:\temp\firefoxcrash.dmp" -- without the quotes, but don't forget the dot at the beginning. once it completes, which can take a fair while, you will have a very large file at c:\temp\firefoxcrash.dmp that can be used to help debug your problem. file
size will depend on this
size of firefox running in your enviroment, which could several gb. ask in the relevant bug or thread how best to share this very large file! capturing a minidump: application hang on windows vista and windows 7, you can follow these instructions to capture a dump file and locate it after it's been saved. ...
Configuring Build Options
les the default compiler optimization options note: this is enabled by default ac_add_options --enable-optimize=-o2 chooses particular compiler optimization options. in most cases, this will not give the desired results, unless you know the mozilla codebase very well; note, however, that if you are building with the microsoft compilers, you probably do want this as -o1 will optimize for
size, unlike gcc. ac_add_options --enable-debug enables assertions in c++ and javascript, plus other debug-only code. this can significantly slow a build, but it is invaluable when writing patches. people developing patches (especially in c++) should generally use this option. ac_add_options --disable-optimize disables compiler optimization. this makes it much easier to step through code in a deb...
Gecko Logging
existing log file. sync print each log synchronously, this is useful to check behavior in real time or get logs immediately before crash. raw print exactly what has been specified in the format string, without the process/thread/timestamp, etc. prefix. timestamp insert timestamp at start of each log line. rotate:n this limits the produced log files'
size. only most recent n megabytes of log data is saved. we rotate four log files with .0, .1, .2, .3 extensions. note: this option disables 'append' and forces 'timestamp'. for example, if you want to specify "sync", "timestamp" and "rotate": set moz_log="example_logger:3,timestamp,sync,rotate:10" to adjust the logging after firefox has started, you can set prefs under the logging. prefix...
Contributing to the Mozilla code base
ool mach, its linting, static analysis, and other code checking features step 3: get your code reviewed once you fix the bug, you can advance to having your code reviewed. when you commit your code, please use the following format for your commit message: `bug number - what your patch does; r?reviewer` for example, a commit message may look like `bug 1234567 - remove reflow by caching element
size. r?jsample` mozilla in most of the projects uses phabricator for code review. who is the right person to ask for a review? if you have a mentored bug: ask your mentor. they will help, or can easily find out. it might be them! run hg blame on the file and look for the people who have touched the functions you're working on. they too are good candidates. running hg log and looking for regula...
Experimental features in Firefox
developer edition 62 no beta 62 no release 62 no preference name media.mediasource.experimental.enabled avif (av1 image file format) support with this feature enabled, firefox supports the av1 image file (avif) format. this is a still image file format that leverages the capabilities of the av1 video compression algorithms to reduce image
size. see bug 1443863 for more details. release channel version added enabled by default? nightly 77 no developer edition 77 no beta 77 no release 77 no preference name image.avif.enabled av1 support for firefox on android this feature allows firefox on android to use av1 format media. this feature is a...
HTMLIFrameElement.getContentDimensions()
s request.onsuccess handler handles the success case, and its request.onerror handler handles the failure case. the x and y dimensions are available in the request.result.x and request.result.y properties, respectively. parameters none. examples var browser = document.queryselector('iframe'); var request = browser.getcontentdimensions(); request.onsuccess = function() { console.log("page
size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification. ...
mozbrowsericonchange
t. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href a domstring representing the path to the new icon.
sizes a domstring listing the
sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any
size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowsericonchange", function( event ) { console.lo...
mozbrowserscrollareachanged
this feature is non-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes. this can occur on re
size and when the page
size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. bubbles...
Browser API
rowsermetachange sent when a <meta> elelment is added to, removed from or changed in the browser <iframe>'s content. mozbrowseropenwindow sent when window.open() is called within a browser <iframe>. mozbrowseropentab sent when a new tab is opened within a browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) mozbrowserre
size sent when the browser <iframe>'s window
size has changed. mozbrowserscroll sent when the browser <iframe> content scrolls. mozbrowserscrollareachanged sent when the available scrolling area in the browser <iframe> changes. this can occur on re
size and when the page
size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e. apcz) starts or st...
Chrome-only Events reference
ometimes in other privileged circumstances, eg. ua widgets). mozbeforepaintgecko 2.0 adds a new method for performing javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being performed within the same window.mozscrolledareachangedthe mozscrolledareachanged event is fired when the document view has been scrolled or re
sized. smartcard-insertthe smartcard-insert event is fired when the insertion of a smart card has been detectedsmartcard-removethe smartcard-remove event is fired when the removal of a smart card has been detected. ...
Gecko's "Almost Standards" Mode
r when in either "quirks" or "almost standards" mode. (see the devedge article "images, tables, and mysterious gaps" for a detailed explanation of how such layouts are treated in "standards" mode.) in slightly more detail, what differs in almost-standards mode is roughly this: inline boxes that have no non-whitespace text as a child and have no border, padding, or margin: do not influence the
size of the line box (that is, their line-height is ignored) do not get a height (e.g., for their background) larger than that of their descendants, even if their font
size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors. tr...
How to get a stacktrace with WinDbg
the symbols, enter the three commands below, pressing enter after each one. (more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download. this may take some time depending on your connection speed; the total
size of the mozilla and microsoft symbols download is around 1.4gb. windbg will show "busy" at the bottom of the application window until the download is complete. once the download is complete, you need to configure windbg to examine child processes, ignore a specific event caused by flash player, and record a log of loaded modules. you will also want to open a log file to save data you collect. to ...
IPDL Tutorial
note that this is not a preprocessor directive, but a part of the ipdl language. the generated c++ code will have proper #include preprocessor directives for the imported protocols. the `manages` statement declares that this protocol manages pplugininstance. ...
Internationalized Domain Names (IDN) Support in Mozilla Browsers
n agreement was reached eventually to standardize on a type of ace called "punycode". this is defined in rfc 3492 (punycode: a bootstring encoding of unicode for internationalized domain names in applications (idna)). the punycode proposal uses only restricted ascii characters and numbers (a-z0-9) and a hyphen (-). it was shown to be language independent, superior in compression, compact in code
size, round-trip safe, and superior for encoding chinese/japanese/korean characters. the final step of the process is the affixing of the ace prefix to the output string from the nameprep/stringprep and punycode processing. since the punycode contains only ascii characters, it is possible that an output may, though unlikely, coincide with existing domain names. to avoid such a complication, rfc 3490 ...
Addon
his add-on. pendingupgrade read only addon if this add-on will be replaced on the next restart, this property will hold the new addon object. releasenotesuri read only nsiuri a uri for release notes for this version. screenshots read only addonscreenshot[] an array of addonscreenshot objects containing urls of preview images for the add-on.
size read only integer the
size of the add-on's files in bytes. for an add-on that has not yet been downloaded, this may be an estimated value. sourceuri read only nsiuri the uri that this add-on was installed from. syncguid read only string string guid to identify the add-on in sync. the guid is generated randomly and is made consistent across devices during syn...
AddonInstall
this will hold the error code. sourceuri nsiuri the uri that the add-on is being installed from. file nsifile the file that the add-on is being installed from. this may be null if the add-on is coming from the internet and has yet to be downloaded. progress integer the progress of any necessary downloads. maxprogress integer the expected
size of any necessary downloads or -1 if unknown. certificate nsix509cert if the add-on to be installed is signed this is the certificate of the signer. only available after downloading is complete. certname string if the add-on to be installed is signed this is the simple display name of the signer. existingaddon addon the addon that this install will upda...
Download
true if the download has been completed successfully. target read only downloadtarget target of this download. totalbytes read only number when hasprogress is true, this indicates the total number of bytes to be transferred before the download finishes; this value can be zero if the file is empty. note: this property's value may not match the actual final
size of the downloaded file if the download is encoded during the network transfer. you can use the downloadtarget.
size property to get the actual
size of the completely-downloaded file once the download has succeeded. when hasprogress is false, this property is always zero. trytokeeppartialdata boolean indicates whether any partially downloaded data should be retained, to...
DownloadSummary
type description allhavestopped read only boolean indicates whether all the downloads are currently stopped. progresstotalbytes read only number indicates the total number of bytes to be transferred before completing all the downloads that are currently in progress. for downloads that do not have a known final
size, the number of bytes currently transferred is reported as part of this property. this is zero if no downloads are currently in progress. progresscurrentbytes read only number number of bytes currently transferred as part of all the downloads that are currently in progress. this is zero if no downloads are currently in progress. ...
OSFile.jsm
s and make use of os.file directly from these threads. ...
Task.jsm
ort the exception. }); exception handling components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm") task.spawn(function* () { let currentdir = yield os.file.getcurrentdirectory(); let path = os.path.join(currentdir, ".mozconfig"); try { let info = yield os.file.stat(path); console.log("the .mozconfig file is " + info.
size + " bytes long."); } catch (ex if ex instanceof os.file.error && ex.becausenosuchfile) { console.log("you don't have .mozconfig in " + currentdir); } }).then(null, components.utils.reporterror); in this example, if the promise returned by os.file.stat is rejected, an exception is thrown inside the task. if the reason for the exception is that the file doesn't exist, this is treated as an...
Webapps.jsm
tall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appidformanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownload
size: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _computefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage...
Encodings for localization files
ows/charset.mk ascii the win_installer_charset variable must be set to an encoding which matches toolkit/installer/windows/install.it charset= parameter. see the table below for appropriate values. toolkit/installer/windows/install.it a windows codepage. this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/font
size/charset parameters in this file must be set to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with windows. see the table below for appropriate values for the charset= parameter. browser/installer/installer.inc utf-8 toolkit/installer/un...
Localization content best practices
font properties may cause problems with text legibility when applied to certain language texts. avoid using italic for cjkt. this acronym stands for: chinese (simplified and traditional), japanese, korean, and taiwanese. the text-transform property is not reliable for some locales; for example, text-transform: uppercase won't work properly with languages such as irish/gaelic. for example, app
size in english may be capitalized via text-transform: uppercase to app
size but in gaelic this would change meud na h-aplacaid to meud na h-aplacaid which violates the locales orthographic rules, as it ought to be meud na haplacaid. in general, localizers should make the decision about capitalization. if you want to display warning, add a string with that capitalization, and explain it in the localiz...
Release phase
zilla ldap account name: host hg.mozilla.org user user@host.domain if you have already cloned the remote repository using the http protocol using this command: $ hg clone http://hg.mozilla.org/releases/l10n-central/x-testing then you will need to edit the .hg/hgrc file (inside the x-testing local clone) to tell mercurial to push using ssh. ...
Creating localizable web content
uate the impact of new pages on all our web properties, especially links to community sites and redirects. sometimes you can leave some freedom of modification for a block of text so that the localizers link to relevant local resources. images check that images are not going to be a problem for the audience (cultural references, positionning, mirroring for rtl, text in images...) and spot what
sizes/margins can be tweaked by css or have to be fixed for all locales but english don't use text in icons images 1&2. bad: image 3. good: image 4. good: this icon is recognized as the international symbol for information. it can stay this way. use localized screenshots if possible screenshots are important informative graphics, often times explaining how to achieve something i...
What every Mozilla translator should know
the bug: content type: patch mark the approval1.9.xxx with ? asking for approval (use the appropriate branch) if you get the approval you will see who_is_ap:approval1.8.xxx+ now, you can upload the changes approved to the cvs server. when you commit the changes you must write in the comment the bug number, what you have changed and who has approved. for example: bug 12345, fix typos and re
size prefwindow, a=l10n as soon as you have committed, put the bug in fixed state and write fixed1.8.xxx in the keyword field you have to verify in the next build that the changes have been successful. if so, change the state of the bug to verified and write verified1.8.xxx in the keyword field tinderbox in tinderbox you can see the result of the build process. once you have made some changes ...
Mozilla Framework Based on Templates (MFBT)
roach could be improved, and feel free to make improvements to this document if you see them. functionality types and type manipulation standardinteger.h implements the <stdint.h> interface. (the <stdint.h> standard header is not available on all platforms and so cannot be used directly. this header also provides a useful "hook" for embeddings that must customize the types underlying the fixed-
size integer types.) types.h includes standardinteger.h and further provides
size_t. checkedint.h implements checked integers. they behave like integers, but safely check for integer overflow and divide-by-zero. useful for input validation. floatingpoint.h provides various operations for examining and working upon double-precision floating point values, and for producing various special floating po...
Extras
> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type"
size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255...
Fonts for Mozilla 2.0's MathML engine
te: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets. if necessary, you might want to modify the font-family on the <math> elements and, for gecko, the on ::-moz-math-stretchy pseudo element too. for example to force the use of stix fonts: math { font-family: stixgeneral; } ::-moz-math-stretchy { font-family: stixnonunicode, stix
sizeonesym, stix
size1, stixgeneral; } try the mathml torture test to compare the rendering of various fonts and the css rules to select them. ...
Mozilla Web Developer FAQ
and the content uses the right unicode characters. the past practice of displaying non-latin text by assigning non-latin glyphs to latin code points breaks copying and pasting, breaks searching on the page, breaks indexing by search engines and breaks readability in browsers that do not support downloadable fonts (e.g. legacy browsers or mobile browsers that opt not to download fonts due to file
size). why aren’t symbol/dingbat fonts working? they are working. characters in html 4 and xml documents are unicode characters (even if the document has been encoded using a legacy encoding for transfer)—not font glyph indexes. <font face="symbol">a</font> means the character latin small letter a (u+0061) preferably displayed using the symbol font. since the symbol font does not have glyph for...
Mozilla Development Strategies
ck queries or bugzilla queries to find crashers. look for problems in existing code. find and fix string usage problems. find and fix bad xpcom macro usage. switch some code over to nscomptrs. look for xxx or todo in the code, verify the code still needs fixing, and fix it. smaller patches get reviewed faster if you find that you spend a lot of time waiting for reviews, keep in mind that patch
size is not linear to time to review. a twenty line patch doesn't take twice as long to review as a ten line patch, it usually takes much more time. if you can divide and conquer what you are working on into smaller chunks, you will find you'll get faster reviews. of course, not everything can be divided up. and, shorter fixes aren't necessarily better than longer ones. having parallel trees should a...
Mozilla Style System Documentation
the selector matching process in a lexicographic tree, the rule tree. this double tree (style context tree and rule tree) allows for sharing of style data, which allows the data to take up less memory and allows the data computation to take less time. for example, suppose we had the css stylesheet: /* rule 1 */ doc { display: block; text-indent: 1em; } /* rule 2 */ title { display: block; font-
size: 3em; } /* rule 3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; } and the following document: <doc> <title>a few quotes</title> <para class="emph">benjamin franklin said that <quote>"a penny saved is a penny earned."</quote></para> <para>franklin d. roosevelt said that <quote>"we have nothing to fear but <span class="emph">fear itself</span>...
Build Metrics
"build metrics" is a catch-all term for performance measures that are generated by the firefox build system and tracked by perfherder. num_constructors number of static constructors found by the compiler in the firefox c++ codebase. lower is better. static constructors are undesirable because their initialization imposes an unavoidable time penalty every time firefox is started. installer
size size in bytes of the firefox installer. lower is better here, especially on space-restricted platforms like android. build times amount of time it takes to build firefox in automation on a specific platform / configuration. lower is better. compiler warnings number of compiler warnings detected during a build. lower is better. due to the way the build system works, compiler warnings are not...
GC and CC logs
ludes native c++ objects that participate in cycle collection, as well as js objects being held alive by those c++ objects. generating logs from within firefox to manually generate gc and cc logs, navigate to about:memory and use the buttons under "save gc & cc logs." "save concise" will generate a smaller cc log, "save verbose" will provide a more detailed cc log. (the gc log will be the same
size in either case.) with multiprocess firefox, you can't record logs from the content process, due to sandboxing. you'll need to disable sandboxing by setting moz_disable_content_sandbox=t when you run firefox. from the commandline tldr: if you just want shutdown gc/cc logs to debug leaks that happen in our automated tests, you probably want something along the lines of: moz_disable_content_sand...
Refcount tracing and balancing
wing. 0x00253ab0 (1) 0x00253ae0 (2) 0x00253bd0 (4) the number in parentheses indicates the order in which it was allocated, if you care. pick one of these pointers for use with step 2. post-processing step 2: filtering the log once you've picked an object that leaked, you can use tools/rb/filter-log.pl to filter the log file to drop the call stack for other objects; this process reduces the
size of the log file and also improves the performance. perl -w tools/rb/filter-log.pl --object 0x00253ab0 < ./refcounts.log > my-leak.log linux users the log file generated on linux system often lack function names, file names and line numbers. linux users need to run a script to fix the call stack. python tools/rb/fix_stacks.py < ./refcounts.log > fixed_stack.log post-processing step 3: buildi...
Preferences system
to be loaded in via a dynamic overlay. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window
size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string. not using "toolbar" will cause the preferences dialog to only display one preference pane. example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "prefere...
Profile Manager
shows a dialog that displays the profile's path and last-modified date. rename - allows you to specify a new name for the profile. version - allows you change the default application version to be used with the profile. future enhancements ability to install/uninstall/enable/disable extensions in profiles. ability to copy certain assets (e.g., bookmarks) between profiles. add 'profile
size' to the properties dialog. ability to reset a profile (return it to a default state excluding bookmarks and passwords). add option to specify the location of profiles.ini. ...
A guide to searching crash reports
s the fine print says, the default date range is the past week. the default search: signature facet if you click on the "search" button, you will get results like the ones in the following screenshot. by default, the "signature facet" tab is selected. ("facet" is a term that means "group".) in these results, the found crash reports are grouped according to crash signature and ranked by group
size. the columns show each group's rank, signature,
size (both a count and a proportion of matching crash reports), and finally a list of bugs that have been marked as relating to this signature. the numbers are large because this search matched all firefox crash reports from the past seven days. the first group has over 100,000 crash reports, which accounts for 7.77% of all matching crashes. this i...
Leak And Bloat Tests
data. startup main mail window open address book and message composition windows close address book and message composition windows quit the application future improvements will be discussed on the discussion page of the mozilla wiki. results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap
size mail a allocations - number of calls to malloc and friends. there are currently no graphs for these results. manually running tests setting up build set up build thunderbird or seamonkey with your standard mozconfig file, but with the following options set: ac_add_options --enable-debug ac_add_options --enable-trace-malloc running the tests in your <objdir> run the following command:...
MailNews automated testing
rts: asynchronous test operation: a reasonably convenient means of writing tests that involve asynchronous operations by using generators. in the long term we would like to lose this extra complexity in favor of the event-loop-spinning style of operation used by mozmill. message synthesis: create messages by specifying what properties the messages should have. message injection: inject synthe
sized messages via local or imap (using a fake server). message manipulation: mark messages as read, tag them, untag them, move them to other folders, trash them, etc. enhanced logging: supports generating rich json streams to disk or over the network for consumption by logsploder or other tools. performance testing mail leak and bloat tests these tests start up thunderbird or seamonkey and reco...
Nonblocking IO In NSPR
socket()</tt> or <tt>pr_newudpsocket()</tt> is always created in blocking mode. one can make the new socket nonblocking by using <tt>pr_setsockopt()</tt> as in the example below (error checking is omitted for clarity): <tt>prfiledesc *sock;</tt> <tt>printn optval = 1;</tt> <tt>sock = pr_newtcpsocket();</tt> /* * make the socket nonblocking */ pr_setsockopt(sock, pr_sockopt_nonblocking, &optval,
sizeof(optval)); programming constraints there are some constraints due to the use of nt asynchronous i/o in the nspr. in nspr, blocking sockets on nt are associated with an i/o completion port. once associated with an i/o completion port, we can't disassociate the socket from the i/o completion port. i have seen some strange problems with using a nonblocking socket associated with an i/o completio...
Memory Management Operations
memory that was allocated by such libraries, you must use these nspr functions rather than the libc equivalents. memory allocation functions are: pr_malloc pr_calloc pr_realloc pr_free pr_malloc(), pr_calloc(), pr_realloc(), and pr_free() have the same signatures as their libc equivalents malloc(), calloc(), realloc(), and free(), and have the same semantics. (note that the argument type
size_t is replaced by pruint32.) memory allocated by pr_malloc(), pr_calloc(), or pr_realloc() must be freed by pr_free(). memory allocation macros macro versions of the memory allocation functions are available, as well as additional macros that provide programming convenience: pr_malloc pr_new pr_realloc pr_calloc pr_newzap pr_delete pr_freeif ...
NSPR LOG MODULES
esults in log entries being appended to the existing contents of the file referenced by nspr_log_file. if not specified, the existing contents of nspr_log_file will be lost as a new file is created with the same filename. sync the name sync enables unbuffered logging. this ensures that all log messages are flushed to the operating system as they are written, but may slow the program down. buf
size:
size the name buf
size:
size sets the log buffer to
size. examples log everything from the toolkit::storage component that happens, prefixing each line with the timestamp when it was logged to the file /tmp/foo.log (which will be replaced each time the executable is run). set nspr_log_modules=timestamp,mozstorage:5 set nspr_log_file=/tmp/foo.log logging with try server for mochitest, edit...
Named Shared Memory
form, the shared memory may be mapped onto system paging space and be discarded at process termination. all names provided to pr_opensharedmemory should be valid filename syntax or name syntax for shared memory for the target platform. referenced directories should have permissions appropriate for writing. limits on shared memory resources different platforms have limits on both the number and
size of shared memory resources. the default system limits on some platforms may be smaller than your requirements. these limits may be adjusted on some platforms either via boot-time options or by setting the
size of the system paging space to accommodate more and/or larger shared memory segment(s). security considerations on unix platforms, depending on implementation, contents of the backing stor...
Network Addresses
transparent objects and use the functions documented here to manipulate the information. if used consistently, this api also eliminates the need to deal with the byte ordering of network addresses. typically, the only numeric declarations required are the well-known port numbers that are part of the prnetaddr structure. network address types and constants prhostent prprotoent pr_netdb_buf_
size network address functions initializing a network address pr_initializenetaddr facilitates the use of prnetaddr, the basic network address structure, in a polymorphic manner. by using these functions with other network address functions, clients can support either version 4 or version 6 of the internet protocol transparently. all nspr functions that require prnetaddr as an argument accept eit...
PLHashAllocOps
syntax #include <plhash.h> typedef struct plhashallocops { void *(pr_callback *alloctable)(void *pool, pr
size size); void (pr_callback *freetable)(void *pool, void *item); plhashentry *(pr_callback *allocentry)(void *pool, const void *key); void (pr_callback *freeentry)(void *pool, plhashentry *he, pruintn flag); } plhashallocops; #define ht_free_value 0 /* just free the entry's value */ #define ht_free_entry 1 /* free value and entire entry */ description users of the hash table functions can provide their own memory allocation functions. a pair of functions is used to allocate and tree the table, and another pair of functions is used to allocate and free the table entries. the first argument, pool, for all four functions is a void * pointer that is a piece of data for the mem...
PL_strdup
e in the nspr heap containing a copy of a specified string. syntax #include <plstr.h> char *pl_strdup(const char *s); parameter the function has a single parameter: s the string to copy, may be null. returns the function returns one of these values: if successful, a pointer to a copy of the specified string. if the memory allocation fails, null. description to accommodate the terminator, the
size of the allocated memory is one greater than the length of the string being copied. a null argument, like a zero-length argument, results in a pointer to a one-byte block of memory containing the null value. notes the memory allocated by pl_strdup should be freed with pl_strfree. ...
PL_strlen
returns if successful, the function returns length of the specified string. ...
PR_AcceptRead
d to by buf. this parameter is valid only if the function return does not indicate failure. buf a pointer to a buffer to hold data sent by the peer and the peer's address. this buffer must be large enough to receive amount bytes of data and two prnetaddr structures (thus allowing the runtime to align the addresses as needed). amount the number of bytes of data to receive. does not include the
size of the prnetaddr structures. if 0, no data will be read from the peer. timeout the timeout interval only applies to the read portion of the operation. pr_acceptread blocks indefinitely until the connection is accepted; the read will time out after the timeout interval elapses. returns a positive number indicates the number of bytes read from the peer. the value -1 indicates a failure. the...
PR_Calloc
allocates zeroed memory from the heap for a number of objects of a given
size. syntax #include <prmem.h> void *pr_calloc ( pruint32 nelem, pruint32 el
size); parameters nelem the number of elements of
size el
size to be allocated. el
size the
size of an individual element. returns an untyped pointer to the allocated memory, or if the allocation attempt fails, null. call pr_geterror() to retrieve the error returned by the libc function malloc(). description this function allocates memory on the heap for the specified number of objects of the specified
size. all bytes in the allocated memory are cleared. ...
PR_CreateThreadPool
create a new hash table. syntax #include <prtpool.h> nspr_api(prthreadpool *) pr_createthreadpool( print32 initial_threads, print32 max_threads, pruint32 stack
size ); parameters the function has the following parameters: initial_threads the number of threads to be created within this thread pool. max_threads the limit on the number of threads that will be created to server the thread pool. stack
size size of the stack allocated to each thread in the thread. returns pointer to a prthreadpool structure or null on error. description ...
PR_DELETE
syntax #include <prmem.h> void pr_delete(_ptr); parameter _ptr the address of memory to be returned to the heap. must be an lvalue (an expression that can appear on the left side of an assignment statement). returns nothing. ...
PR_ExportFileMapAsString
creates a string identifying a prfilemap. syntax #include <prshma.h> nspr_api( prstatus ) pr_exportfilemapasstring( prfilemap *fm, pr
size buf
size, char *buf ); define pr_filemap_string_buf
size 128 parameters the function has the following parameters: fm a pointer to the prfilemap to be represented as a string. buf
size sizeof(buf) buf a pointer to abuffer of length pr_filemap_string_buf
size. returns prstatus description creates an identifier, as a string, from a prfilemap object previously created with pr_openanonfilemap. ...
PR_GetHostByAddr
looks up a host entry by its network address. syntax #include <prnetdb.h> prstatus pr_gethostbyaddr( const prnetaddr *hostaddr, char *buf, printn buf
size, prhostent *hostentry); parameters the function has the following parameters: hostaddr a pointer to the ip address of host in question. buf a pointer to a buffer, allocated by the caller, that is filled in with host data on output. all of the pointers in the hostentry structure point to data saved in this buffer. this buffer is referenced by the runtime during a call to pr_enumeratehostent. buf
size number of bytes in the buf parameter. the buffer must be at least pr_netdb_buf_
size bytes. hostentry this structure is allocated by the caller. on output, this structure is filled in by the runtime if the function returns p...
PR_GetHostByName
looks up a host by name. syntax #include <prnetdb.h> prstatus pr_gethostbyname( const char *hostname, char *buf, printn buf
size, prhostent *hostentry); parameters the function has the following parameters: hostname the character string defining the host name of interest. buf a pointer to a buffer, allocated by the caller, that is filled in with host data on output. all of the pointers in the hostentry structure point to data saved in this buffer. this buffer is referenced by the runtime during a call to pr_enumeratehostent. buf
size number of bytes in the buf parameter. the buffer must be at least pr_netdb_buf_
size bytes. hostentry this structure is allocated by the caller. on output, this structure is filled in by the runtime if the function returns pr_success. retur...
PR_GetRandomNoise
produces a random value for use as a seed value for another random number generator. syntax #include <prrng.h> nspr_api(pr
size) pr_getrandomnoise( void *buf, pr
size size ); parameters the function has these parameters: buf a pointer to a caller-supplied buffer to contain the generated random number. buf must be at least as large as specified in
size.
size the
size, in bytes, of the requested random number. returns pr
size value equal to the
size of the random number actually generated, or zero. the generated
size may be less than the
size requested. a return value of zero means that pr_getrandomnoise is not implemented on this platform, or there is no available noise to be returned at the time of the call. description pr_getrandomnoise provides a random value, dep...
PR_Listen
urns the function returns one of the following values: upon successful completion of listen request, pr_success. if unsuccessful, pr_failure. further information can be obtained by calling pr_geterror. description pr_listen turns the specified socket into a rendezvous socket. it creates a queue for pending connections and starts to listen for connection requests on the socket. the maximum
size of the queue for pending connections is specified by the backlog parameter. pending connections may be accepted by calling pr_accept. ...
PR_MALLOC
allocates memory of a specified
size from the heap. syntax #include <prmem.h> void * pr_malloc(_bytes); parameter _bytes
size of the requested memory block. returns an untyped pointer to the allocated memory, or if the allocation attempt fails, null. call pr_geterror() to retrieve the error returned by the libc function malloc(). description this macro allocates memory of the requested
size from the heap. ...
PR_NEW
allocates memory of a specified
size from the heap. syntax #include <prmem.h> _type * pr_new(_struct); parameter _struct the name of a type. returns an pointer to a buffer
sized to contain the type _struct, or if the allocation attempt fails, null. call pr_geterror() to retrieve the error returned by the libc function. description this macro allocates memory whose
size is
sizeof(_struct) and returns a pointer to that memory. ...
PR_NEWZAP
the bytes in the buffer are all initialized to 0. ...
PR_OpenSharedMemory
opens an existing shared memory segment or, if one with the specified name doesn't exist, creates a new one. syntax #include <prshm.h> nspr_api( prsharedmemory * ) pr_opensharedmemory( const char *name, pr
size size, printn flags, printn mode ); /* define values for pr_opensharememory(...,create) */ #define pr_shm_create 0x1 /* create if not exist */ #define pr_shm_excl 0x2 /* fail if already exists */ parameters the function has the following parameters: name the name of the shared memory segment.
size the
size of the shared memory segment. flags options for creating the shared memory. mode same as passed to pr_open. returns pointer to opaque structure prsharedmemory, or null if an error occurs. retr...
PR_Realloc
re
sizes allocated memory on the heap. syntax #include <prmem.h> void *pr_realloc ( void *ptr, pruint32
size); parameters ptr a pointer to the existing memory block being re
sized.
size the
size of the new memory block. returns an untyped pointer to the allocated memory, or if the allocation attempt fails, null. call pr_geterror() to retrieve the error returned by the libc function realloc(). description this function attempts to enlarge or shrink the memory block addressed by ptr to a new
size. the contents of the specified memory remains the same up to the smaller of its old
size and new
size, although the new memory block's address can be different from the original address. ...
PR_Read
reads bytes from a file or socket. syntax #include <prio.h> print32 pr_read(prfiledesc *fd, void *buf, print32 amount); parameters the function has the following parameters: fd a pointer to a prfiledesc object for the file or socket. buf a pointer to a buffer to hold the data read in. on output, the buffer contains the data. amount the
size of buf (in bytes). returns one of the following values: a positive number indicates the number of bytes actually read in. the value 0 means end of file is reached or the network connection is closed. the value -1 indicates a failure. to get the reason for the failure, call pr_geterror. description the thread invoking pr_read blocks until it encounters an end-of-stream indication, some positive number o...
PR_Recv
flags must be zero or pr_msg_peek. ...
PR_RecvFrom
a socket and stores the sending peer's address. syntax #include <prio.h> print32 pr_recvfrom( prfiledesc *fd, void *buf, print32 amount, printn flags, prnetaddr *addr, printervaltime timeout); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket. buf a pointer to a buffer containing the data received. amount the
size of buf (in bytes). flags this obsolete parameter must always be zero. addr a pointer to the prnetaddr object that will be filled in with the address of the sending peer on return. timeout a value of type printervaltime specifying the time limit for completion of the receive operation. returns the function returns one of the following values: a positive number indicates the number of b...
PR_Seek
hat specifies how to interpret the offset parameter in setting the file pointer associated with the fd parameter. the value for the whence parameter can be one of the following: pr_seek_set. sets the file pointer to the value of the offset parameter. pr_seek_cur. sets the file pointer to its current location plus the value of the offset parameter. pr_seek_end. sets the file pointer to the
size of the file plus the value of the offset parameter. returns the function returns one of the following values: if the function completes successfully, it returns the resulting file pointer location, measured in bytes from the beginning of the file. if the function fails, the file pointer remains unchanged and the function returns -1. the error code can then be retrieved with pr_geterror...
PR_Seek64
hat specifies how to interpret the offset parameter in setting the file pointer associated with the fd parameter. the value for the whence parameter can be one of the following: pr_seek_set. sets the file pointer to the value of the offset parameter. pr_seek_cur. sets the file pointer to its current location plus the value of the offset parameter. pr_seek_end. sets the file pointer to the
size of the file plus the value of the offset parameter. returns the function returns one of the following values: if the function completes successfully, it returns the resulting file pointer location, measured in bytes from the beginning of the file. if the function fails, the file pointer remains unchanged and the function returns -1. the error code can then be retrieved with pr_geterror...
PR_Send
sends bytes from a connected socket. syntax #include <prio.h> print32 pr_send( prfiledesc *fd, const void *buf, print32 amount, printn flags, printervaltime timeout); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket. buf a pointer to a buffer containing the data to be sent. amount the
size of buf (in bytes). flags this obsolete parameter must always be zero. timeout a value of type printervaltime specifying the time limit for completion of the receive operation. returns the function returns one of the following values: a positive number indicates the number of bytes successfully sent. if the parameter fd is a blocking socket, this number must always equal amount. the value -1 indicates a failure.
PR_SendTo
a socket to a specified destination. syntax #include <prio.h> print32 pr_sendto( prfiledesc *fd, const void *buf, print32 amount, printn flags, const prnetaddr *addr, printervaltime timeout); parameters the function has the following parameters: fd a pointer to a prfiledesc object representing a socket. buf a pointer to a buffer containing the data to be sent. amount the
size of buf (in bytes). flags this obsolete parameter must always be zero. addr a pointer to the address of the destination. timeout a value of type printervaltime specifying the time limit for completion of the receive operation. returns the function returns one of the following values: a positive number indicates the number of bytes successfully sent. the value -1 indicates a failure. t...
PR_SetLogBuffering
sets the level of buffering for the log file. syntax #include <prlog.h> void pr_setlogbuffering(printn buffer_
size); parameters the function has this parameter: buffer_
size the
size of the buffer to be used for logging. returns nothing description this function sets the
size of the buffer used in nspr logging. ordinarily, a user application need not use this function, as nspr initializes logging at nspr startup. the application can use the model provided in use example to effect application logging. ...
PR_cnvtf
converts a floating point number to a string. syntax #include <prdtoa.h> void pr_cnvtf ( char *buf, printn bufsz, printn prcsn, prfloat64 fval); parameters the function has these parameters: buf the address of the buffer in which to store the result. bufsz the
size of the buffer provided to hold the result. prcsn the number of digits of precision to which to generate the floating point value. fval the double-precision floating point number to be converted. description pr_cnvtf is a simpler interface to convert a floating point number to a string. it conforms to the ecma standard of javascript (ecmascript). on return, the result is written to the buffer pointed to by buf of
size bufsz. ...
NSPR API Reference
rupting threads nspr thread synchronization locks and monitors condition variables nspr sample code nspr types calling convention types algebraic types 8-, 16-, and 32-bit integer types signed integers unsigned integers 64-bit integer types floating-point integer type native os integer types miscellaneous types
size type pointer difference types boolean types status type for return values threads threading types and constants threading functions creating, joining, and identifying threads controlling thread priorities controlling per-thread private data interrupting and yielding setting global thread concurrency getting a thread's scope process initialization ...
NSS Certificate Download Specification
. if a certificate chain is being imported then the first certificate in the chain must be the user certificate, and any subsequent certificates will be added as untrusted ca certificates to the local database. this is intended to allow people or cas to post their e-mail certificates on web pages for download by other users who want to send them encrypted mail. note: the browser checks that the
size of the object being downloaded matches the
size of the encoded certificates. therefore it is important to ensure that no extra characters, such as nulls or linefeeds are added at the end of the object. importing certificates into nss-based servers consult your server's administration guide for the most accurate information. for some nss-base servers, the following information is correct. serve...
NSS Key Log Format
sa key-agreement to be logged and was the first form supported by wireshark 1.6.0. it has been superseded by client_random which also works with other key-agreement algorithms (such as those based on diffie-hellman) and is supported since wireshark 1.8.0. the tls 1.3 lines are supported since nss 3.34 (bug 1287711) and wireshark 2.4 (early_exporter_secret exists since nss 3.35, bug 1417331). the
size of the hex-encoded secret depends on the selected cipher suite. it is 64, 96 or 128 characters for sha256, sha384 or sha512 respectively. for wireshark usage, see ssl - wireshark wiki. ...
NSS 3.14 release notes
lgorithm will now be rejected by default. support for md5 may be manually enabled (but is discouraged) by setting the environment variable of "nss_hash_alg_support=+md5" or by using the nss_setalgorithmpolicy function. note that ssl cipher suites with "md5" in their names are not disabled by this change; those cipher suites use hmac-md5, not plain md5, and are still considered safe. maximum key
sizes for rsa and diffie-hellman keys have been increased to 16k bits. command line utilities tstclnt, strsclnt, and selfserv have changed. the old options to disable ssl 2, ssl 3 and tls 1.0 have been removed and replaced with a new -v option that specifies the enabled range of protocol versions (see usage output of those tools). bugs fixed in nss 3.14 this bugzilla query returns all the bugs fixe...
NSS 3.15.2 release notes
1 mechanisms no new pkcs#11 mechanisms have been introduced notable changes in nss 3.15.2 bug 880543 - support for aes-gcm ciphersuites that use the sha-256 prf bug 663313 - md2, md4, and md5 signatures are no longer accepted for ocsp or crls, consistent with their handling for general certificate signatures. bug 884178 - add pk11_cipherfinal macro bugs fixed in nss 3.15.2 bug 734007 -
sizeof() used incorrectly bug 900971 - nssutil_readsecmoddb() leaks memory bug 681839 - allow ssl_handshakenegotiatedextension to be called before the handshake is finished. bug 848384 - deprecate the ssl cipher policy code, as it's no longer relevant. it is no longer necessary to call nss_setdomesticpolicy because all cipher suites are now allowed by default. a complete list of all bugs resolv...
NSS 3.15.3 release notes
nspr 4.10.2 or newer. nss 3.15.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3. users are encouraged to upgrade immediately. bug 925100 - (cve-2013-1741) ensure a
size is <= half of the maximum pruint32 value bug 934016 - (cve-2013-5605) handle invalid handshake packets bug 910438 - (cve-2013-5606) return the correct result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new major functionality is introduced in this release. this release is a patch release to address cve-2013-1741, cve-2013-5605 and cve-2013-56...
NSS 3.15.5 release notes
g the tail of a certcertlist. notable changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 949060: validate the iov input argument (an array of priovec structures) of ssl_writev (called via pr_writev). applications should still take care when converting struct iov to priovec because the iov_len members of the two structures have different types (
size_t vs. int).
size_t is unsigned and may be larger than int. bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libr...
NSS 3.18 release notes
an application that uses sec_pkcs12decoderrenamecertnicknames must implement a callback function that implements this function interface. notable changes in nss 3.18 the highest tls protocol version enabled by default has been increased from tls 1.0 to tls 1.2. similarly, the highest dtls protocol version enabled by default has been increased from dtls 1.0 to dtls 1.2. the default key
size used by certutil when creating an rsa key pair has been increased from 1024 bits to 2048 bits. on mac os x, by default the softokn shared library will link with the sqlite library installed by the operating system, if it is version 3.5 or newer. the following ca certificates had the websites and code signing trust bits turned off ou = equifax secure certificate authority sha1 ...
NSS 3.21 release notes
parameters {or pointer} for ckm_tls_kdf ck_tls_mac_params{_ptr} - parameters {or pointer} for ckm_tls_mac in sslt.h sslhashtype - identifies a hash function sslsignatureandhashalg - identifies a signature and hash function sslpreliminarychannelinfo - provides information about the session state prior to handshake completion new macros in nss.h nss_rsa_min_key_
size - used with nss_optionset and nss_optionget to set or get the minimum rsa key
size nss_dh_min_key_
size - used with nss_optionset and nss_optionget to set or get the minimum dh key
size nss_dsa_min_key_
size - used with nss_optionset and nss_optionget to set or get the minimum dsa key
size in pkcs11t.h ckm_tls12_master_key_derive - derives tls 1.2 master secret ckm_tls12_key_an...
NSS 3.24 release notes
cks have been disabled by default, as they can cause a performance regression. to enable these checks, you must define symbol nss_force_fips when building nss. counter mode and galois/counter mode (gcm) have checks to prevent counter overflow. additional csps are zeroed in the code. nss softoken uses new guidance for how many rabin-miller tests are needed to verify a prime based on prime
size. nss softoken has also been updated to allow nss to run in fips level 1 (no password). this mode is triggered by setting the database password to the empty string. in fips mode, you may move from level 1 to level 2 (by setting an appropriate password), but not the reverse. a ssl_configservercert function has been added for configuring ssl/tls server sockets with a certificate and private k...
NSS 3.28.3 release notes
tionality no new functionality is introduced in this release. this is a patch release to fix binary compatibility issues. bugs fixed in nss 3.28.3 nss version 3.28, 3.28.1 and 3.28.2 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of the public api of the freebl/softokn parts of nss, had been changed to include an additional attribute. that
size increase caused crashes or malfunctioning with applications that use that data structure directly, or indirectly through ecpublickey, ecprivatekey, nsslowkeypublickey, nsslowkeyprivatekey, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. seckeyecpublickey had been extended with a new attribute, named "encoding". if a...
NSS 3.29.1 release notes
ity no new functionality is introduced in this release. this is a patch release to fix binary compatibility issues. bugs fixed in nss 3.29.1 nss version 3.28, 3.28.1, 3.28.2 and 3.29 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of the public api of the freebl/softokn parts of nss, had been changed to include an additional attribute. that
size increase caused crashes or malfunctioning with applications that use that data structure directly, or indirectly through ecpublickey, ecprivatekey, nsslowkeypublickey, nsslowkeyprivatekey, or potentially other data structures that reference ecparams. the change has been reverted to the original state in bug 1334108. seckeyecpublickey had been extended with a new attribute, named "encoding". if a...
NSS 3.44.3 release notes
rballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_3_rtm/src/ other releases are available in nss releases. new in nss 3.44.3 no new functionality is introduced in this release. bugs fixed in nss 3.44.3 bug 1579060 - don't set the constructed bit for issueruniqueid and subjectuniqueid in mozilla::pkix cve-2019-11745 - encryptupdate should use maxout, not block
size this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44.3 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.44.3 shared l...
NSS 3.45 release notes
or the elbrus lcc compiler (<=1.23) bug 1543874 - expose an external clock for ssl this adds new experimental functions: ssl_settimefunc, ssl_createantireplaycontext, ssl_setantireplaycontext, and ssl_releaseantireplaycontext. the experimental function ssl_initantireplay is removed. bug 1546477 - various changes in response to the ongoing fips review note: the source package
size has increased substantially due to the new fips test vectors. this will likely prompt follow-on work, but please accept our apologies in the meantime. certificate authority changes the following ca certificates were removed: bug 1552374 - cn = certinomis - root ca sha-256 fingerprint: 2a99f5bc1174b73cbb1d620884e01c34e51ccb3978da125f0e33268883bf4158 bugs...
NSS 3.46 release notes
1566601 - add wycheproof test vectors for aes-kw bug 1571316 - curve25519_32.c:280: undefined reference to `pr_assert' when building nss 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560806 - increase softoken password max
size to 500 characters bug 1568776 - output paths relative to repository in nss coverity bug 1453408 - modutil -changepw fails in fips mode if password is an empty string bug 1564727 - use a pss spki when possible for delegated credentials bug 1493916 - fix ppc64 inline assembler for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized wa...
NSS 3.47.1 release notes
3.47.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_1_rtm/src/ other releases are available in nss releases. new in nss 3.47.1 no new functionality is introduced in this release. ...
NSS 3.47 release notes
ram length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag
sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 1267894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - f...
NSS Developer Tutorial
resource deallocation, before returning from a function. a data buffer is usually represented as: unsigned char *data; unsigned int len; the buffer pointer is unsigned char *, as opposed to void *, so we can perform pointer arithmetic without casting. use char * only if the data is interpreted as text characters. for historical reasons, the buffer length is unsigned int, as opposed to
size_t. unfortunately, this can be a source of integer overflow bugs on 64-bit systems. c features nss requires c99. however, not all features from c99 are equally available. variables can be declared, at the point they are first used. the inline keyword can be used. variadic macro arguments are permitted, but their use should be limited to using __va_args__. the exact-width integer types in ...
NSS Tools sslstrength
icy will default to domestic if not specified. step-up step up is a mode where the connection starts out with 40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption. this is only done in 'export mode', with servers with a special certificate. you can tell if you stepped-up, because the output will says 'using export policy', and you'll find the secret key
size was 128-bits. prerequisites you should have a cert7.db in the directory in which you run sslstrength. other for references, here is a table of well-known ssl port numbers: https 443 imaps 993 nntps 563 ...
PKCS11 Implement
the cka_label attribute for the private key. for private keys that don't include certificates, nss doesn't set the cka_label attribute, or sets it to null, until it receives the certificate. c_copyobject the nss rarely calls c_copyobject but may sometimes do so for non-token private keys. c_destroyobject the nss calls c_destroyobject to destroy certificates and keys on tokens. c_getobject
size the nss never calls c_getobject
size. c_getattributevalue the nss calls c_getattributevalue to get the value of attributes for both single objects and multiple objects. this is useful for extracting public keys, nonsecret bulk keys, and so on. c_setattributevalue the nss uses c_setattributevalue to change labels on private keys. c_findobjectsinit, c_findobjects, c_findfinal the nss calls...
FC_Digest
data. syntax ck_rv fc_digest( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr pdigest, ck_ulong_ptr pusdigestlen ); parameters hsession [in] session handle. pdata [in] pointer to data block. usdatalen [in] length of the data in bytes. pdigest [out] pointer to location where recovered data is to be stored. pusdigestlen [in, out] pointer to the maximum
size of the output buffer, replaced by the length of the message digest if the operation is successful. description fc_digest digests a message in a single operation according to the attributes of the previous call to fc_digestinit. a user may call fc_digest without logging into the token (to assume the nss user role). return value examples see also fc_digestinit, nsc_digest ...
FC_DigestFinal
name fc_digestfinal - finish a multi-part digest operation. syntax ck_rv fc_digestfinal( ck_session_handle hsession, ck_byte_ptr pdigest, ck_ulong_ptr puldigestlen ); parameters hsession [in] session handle. pdigest [out] pointer to the buffer which will receive the digest or null. puldigestlen [in, out] pointer to location containing the maximum buffer
size. description fc_digestfinal finishes a multi-part digest operation by returning the complete digest and clearing the operation context. if pdigest is null the length of the digest is returned and fc_digestfinal may be called again with pdigest set to retrieve the digest. a user may call fc_digestfinal without logging into the token (to assume the nss user role). return value examples see also fc_digestini...
FC_Sign
ntax ck_rv fc_sign( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignaturelen ); parameters hsession [in] session handle. pdata [in] pointer to data block. usdatalen [in] length of the data in bytes. psignature [out] pointer to location where recovered data is to be stored. pussignaturelen [in, out] pointer to the maximum
size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_sign signs a message in a single operation according to the attributes of the previous call to fc_signinit. a user must log into the token (to assume the nss user role) before calling fc_sign. return value examples see also fc_signinit, nsc_sign ...
FC_SignFinal
name fc_signfinal - finish a multi-part signing operation. syntax ck_rv fc_signfinal( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong_ptr pussignaturelen ); parameters hsession [in] session handle. psignature [out] pointer to the buffer which will receive the digest or null. pussignaturelen [in, out] pointer to location containing the maximum buffer
size. description fc_signfinal finishes a multi-part signing operation by returning the complete signature and clearing the operation context. if psignature is null the length of the signature is returned and fc_signfinal may be called again with psignature set to retrieve the signature. a user must log into the token (to assume the nss user role) before calling fc_signfinal. return value examples see a...
FC_SignRecover
yntax ck_rv fc_signrecover( ck_session_handle hsession, ck_byte_ptr pdata, ck_ulong usdatalen, ck_byte_ptr psignature, ck_ulong_ptr pussignaturelen ); parameters hsession [in] session handle. pdata [in] mechanism to be used for the signing operation. usdatalen [in] handle of the key to be usedn. psignature [out] pointer to the buffer or null. pussignaturelen [in, out] pointer to the
size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_signrecover signs data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignaturelen. a user must log into the token (to assume the nss user role) before calling fc_signrecover. ...
FC_VerifyRecover
tax ck_rv fc_verifyrecover( ck_session_handle hsession, ck_byte_ptr psignature, ck_ulong ussignaturelen, ck_byte_ptr pdata, ck_ulong_ptr pusdatalen ); parameters hsession [in] session handle. psignature [in] mechanism to be used for the signing operation. ussignaturelen [in] handle of the key to be usedn. pdata [out] pointer to the buffer or null. pusdatalen [in, out] pointer to the
size of the output buffer, replaced by the length of the signature if the operation is successful. description fc_verifyrecover verifies data in a single operation where the (digest) data can be recovered from the signature. if psignature is null only the length of the signature is returned in *pussignaturelen. a user must log into the token (to assume the nss user role) before calling fc_verifyrec...
FIPS mode of operation
otevent fc_getmechanismlist fc_getmechanisminfo fc_inittoken fc_initpin fc_setpin session management functions fc_opensession fc_closesession fc_closeallsessions fc_getsessioninfo fc_getoperationstate fc_setoperationstate fc_login fc_logout object management functions these functions manage certificates and keys. fc_createobject fc_copyobject fc_destroyobject fc_getobject
size fc_getattributevalue fc_setattributevalue fc_findobjectsinit fc_findobjects fc_findobjectsfinal encryption functions these functions support triple des and aes in ecb and cbc modes. fc_encryptinit fc_encrypt fc_encryptupdate fc_encryptfinal decryption functions these functions support triple des and aes in ecb and cbc modes. fc_decryptinit fc_decrypt fc_decryptupdate fc_dec...
sslcrt.html
type of the keys in an ssl server certificate. syntax #include <nss.h> sslkeatype nss_findcertkeatype(certcertificate * cert); parameter this function has the following parameter: a the certificate to check. returns the function returns one of these values: kt_null = 0 kt_rsa kt_dh kt_fortezza kt_kea_
size comparing secitem objects secitem_compareitem compares two secitem objects and returns a seccomparison enumerator that shows the difference between them. syntax #include <secitem.h> #include <seccomon.h> seccomparison secitem_compareitem( secitem *a, secitem *b); parameters this function has the following parameters: a a pointe...
S/MIME functions
xr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
NSS Tools sslstrength
cy will default to domestic if not specified. step-up step up is a mode where the connection starts out with 40-bit encryption, but due to a 'change-cipher-spec' handshake, changes to 128-bit encryption. this is only done in 'export mode', with servers with a special certificate. you can tell if you stepped-up, because the output will says 'using export policy', and you'll find the secret key
size was 128-bits. prerequisites you should have a cert7.db in the directory in which you run sslstrength. other for references, here is a table of well-known ssl port numbers: https 443 imaps 993 nntps 563 ...
Performance Hints
[i]; return result; } this is not equivalent code because the second version does not modify global variables result and i. however, if you don't intend for any other function to access these variables, then storing them globally is probably wrong anyway (what if you called another function that had a loop like the one in sum!). arrays use the forms of the array constructor that specify a
size or take a list of initial elements. for example, the code var a = new array(); for (var i=0; i < n; i++) a[i] = i; could be sped up by changing the constructor call to new array(n). a constructor call like that indicates to the runtime that a javascript array should be used for the first n entries of the array. similarly, new array("a", "b", "c") or ["a", "b", "c"] will cause a 3-e...
Scripting Java
lling the function, rhino passes the method's name as the additional argument. function can use it to distinguish on behalf of which method it was called: js> var frame = new packages.javax.swing.jframe(); js> frame.addwindowlistener(function(event, methodname) { if (methodname == "windowclosing") { print("calling system.exit()..."); java.lang.system.exit(0); } }); js> frame.set
size(100, 100); js> frame.visible = true; true js> calling system.exit()... creating java arrays rhino provides no special syntax for creating java arrays. you must use the java.lang.reflect.array class for this purpose. to create an array of five java strings you would make the following call: js> a = java.lang.reflect.array.newinstance(java.lang.string, 5); [ljava.lang.string;@7ffe01 to create...
Shumway
e a few situations where a user may use shumway to view your content: their platform does not support adobe flash player. the user did not install adobe flash player. the user has adobe flash player disabled (or set to "click-to-enable") for performance or security reasons. there might be a time where users want to experience your content but flash is no longer supported by adobe. to empha
size a point: the current behavior is that shumway works on any swf file unless (or until) the adobe flash player plugin is activated. shumway is made with the same constraints as any website. users who disable flash because of security or performance concerns can still see content through shumway because it cannot be forced to behave worse than javascript (and webgl, etc.) allows. users with shumway ...
How to embed the JavaScript engine
functions[] = { js_fn("doit", doit, doit_minargs, 0), /* etc... */ js_fs_end }; js_fs_end terminates the table. and say: ok = js_definefunctions(cx, global, my_functions); how to call javascript functions from c first, create arguments for the call, here i create arguments with 2 items: // [spidermonkey 24] js::autovaluearray is not defined. // js::autovaluevector argv(cx); // argv.re
size(2); js::autovaluearray<2> argv(cx); argv[0].setint32(1); argv[1].setint32(2); then call the function: // [spidermonkey 24] pass arguments length and the 'jsval *' pointer. // js_callfunctionname(cx, global, "func", 2, argv.begin(), rval.address()); js_callfunctionname(cx, global, "func", argv, &rval); example say the click event is for the top-most or focused ui element at position (x, y): ...
Bytecode Descriptions
t->resumeoffsets()[firstresumeindex + i - low], in bytes from the start of the current script's bytecode. otherwise, jump to the instruction at defaultoffset from the current instruction. all of these offsets must be in range for the current script and must point to jsop::jumptarget instructions. the following inequalities must hold: low <= high and firstresumeindex + high - low < resumeoffsets().
size(). return return stack: rval ⇒ return rval. this must not be used in derived class constructors. instead use jsop::setrval, jsop::checkreturn, and jsop::retrval. getrval stack: ⇒ rval push the current stack frame's returnvalue. if no jsop::setrval instruction has been executed in this stack frame, this is undefined. every stack frame has a returnvalue slot, used by top-level scripts, ...
Exact Stack Rooting
he problem is that this requires us to overload operator->. if we have a method taking handle<value>*, then out->setobject(foo) will not work as expected. to solve these problems we have the js::mutablehandlet class. js::mutablehandlet is a js::handlet with a set method. bool returnfoo(jscontext *cx, mutablehandlestring out) { out.set(js_newstringcopyz(cx, "foo")); return bool(out); }
size_t getlengthfoo(jscontext *cx) { rootedstring s(cx); if (returnfoo(cx, &s)) return js_getstringlength(s); return
size_t(-1); } all methods in the js-api that return gcpointers have been changed to this out-param style. this prevents an entire class of bugs where return values are not rooted properly before the next js-api call. js::nullptr null (or nullptr) does not implici...
Statistics API
unt: integer - the number of compartments that were present in the system at the end of the gc. max_pause: number (milliseconds) - longest duration pause during the gc. nonincremental_reason: string - a string representing the reason that an incremental gc was aborted or forced to finish in a single slice. if the incremental gc completed normally, this will be "none". allocated: integer (mb) -
size of the javascript heap in mib at the start of the gc. slices: array of objects - a list of objects describing each slice in detail. times: object - a map from phase names to the total time taken by each phase: the sum of each field of the map from the slices. the last two fields require a bit of elaboration. gc work can be divided into phases, such as marking or sweeping. the division into ph...
Property cache
tness. when recording a getprop, the jit needs to know the result type before the interpreter executes the instruction. it is crucial that jit and interpreter get the same answer; possible pitfalls include native getters and resolve hooks. so the lookup must happen only once. the jit ensures this by using the property cache to forward its work to the interpreter.) for speed, the cache is a fixed-
size hash table with no chaining. collisions simply cause old entries to be overwritten. the hash table entries are key-value pairs. the keys describe the context in which a property lookup occurs. the values consist of two word-
sized members. entry->vcap caches the results of part 1 above, telling which object contains the desired property. entry->vword is described in the section entry value words ...
SpiderMonkey Internals: Thread Safety
ossible. in other words, gc waits until each other thread is either outside jsapi (in which case we don't care what it's doing) or else in jsapi, but blocked, waiting for gc to finish. threads must not do anything that would affect gc while outside a request. and obviously you shouldn't block or otherwise dilly-dally while in a request; it prohibits gc. as an optimization, each thread has its own
size-classified freelists containing chunks of gc-managed memory ready to be allocated. this allows allocation to avoid locking most of the time (a significant speed win). a thread needs to lock on allocation only when the relevant per-thread freelist is empty. when this happens, the thread also refills that freelist from the jsruntime-wide gc allocator while it's in the lock. ...
Tracing JIT
mbler runs in a single pass over its input, transforming one lins value to zero or more nins values. it is important to keep in mind that this pass runs backwards from the last lins in the input lir code to the first, generating native code in reverse. running backwards sometimes makes the logic difficult to follow, but it is an essential factor in maintaining the assembler's high speed and small
size. in the spidermonkey tracing jit there is only ever one assembler active at a time, associated with the currently active fragmento. nanojit/regalloc.* nanojit's register allocator. this is a local register allocator, meaning that it does not allocate registers across basic blocks. it is correspondingly very simple: register allocation is done immediately, step-by-step as code is being generate...
JSAPI User Guide
gging only, because the extra garbage collection makes js very slow. use js_dumpheap to dump the spidermonkey heap or specific interesting parts of it. see spidermonkey garbage collection internals for more details. gc performance overly frequent garbage collection can be a performance issue. some applications can reduce the frequency of garbage collection simply by increasing the initial
size of the jsruntime. perhaps the best technique is to perform garbage collection during idle time, when it is least likely to have any impact on the user. by default, the javascript engine performs garbage collection when it has no other choice except to grow the process. this means that garbage collection typically happens when memory-intensive code is running, perhaps the worst possible time. an ...
JS::AutoIdArray
description cx jscontext * the context in which to add the root. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ida jsidarray * a pointer to jsidarray to take the ownership. methods method description bool operator!() const return true if this has no owned array. jsid operator[](
size_t i) const return a jsid in specified index of the owned array.
size_t length() const return the length of the owned array. jsidarray *steal() return the owned array and release the ownership. description js::autoidarray takes the ownership of jsidarray, and frees it in destructor by calling js_destroyidarray. examples { js::autoidarray ids(cx, js_enumerate(...
JS::GetDeflatedUTF8StringLength
this article covers features introduced in spidermonkey 38 returns the length of the char buffer required to encode given string as utf8. syntax
size_t getdeflatedutf8stringlength(jsflatstring* s); name type description s jsflatstring * the pointer to the string to calculate the length. description js::getdeflatedutf8stringlength returns the length of the char buffer required to encode s as utf8. the returned length does not include the null-terminator. see also js::deflatestringtoutf8buffer bug 1034627 ...
JS::Value
js::value is the type of javascript values in the jsapi. a c++ variable of type js::value represents a value in javascript: a string, number, object (including arrays and functions), boolean, symbol, null, or undefined. js::value is a class whose internal structure is an implementation detail. embeddings should not rely on observed representation details or upon the
size of js::value. the data in a js::value can be accessed using these member functions: js type js::value type tests constructor accessors mutators null val.isnull() js::nullvalue() n/a val.setnull() undefined val.isundefined() js::undefinedvalue() n/a val.setundefined() boolean val.isboolean(), val.istrue(), val.isfalse() js::booleanvalue(bool), ...
JSAutoByteString
return the string. void clear() free the owned string. you should call this before calling encode* methods or initbytes method if a string is already owned, otherwise the string will never be freed. char *ptr() const return a pointer to the owned string. this could be null if no string is owned. bool operator!() const return true if no string is owned.
size_t length() const return the length of the owned string. return 0 if no string is owned. description jsautobytestring takes the ownership of string and frees it in destructor. if jsautobytestring instance is initialized with jsautobytestring bytes(cx, str); style, it calls js_encodestring(cx, str) to get the string to take ownership. if jsautobytestring instance is initialized with js...
JSClass
this field is the bitwise or of one or more of the jsclass_* constants described in jsclass.flags. addproperty jspropertyop a hook called just after adding a new property. may modify the new property value. use...
JS_Add*Root
ript value or pointer to gc-thing, that value/gc-thing is protected from garbage collection. if the variable points to an object, then any memory reachable from its properties is automatically protected from garbage collection, too. js_addgcthingroot allows the caller to have a single root that may hold either strings or objects. a jsval is not a gc-thing (it has tag bits and may be a different
size altogether) and thus the address of a jsval variable must not be passed to js_addgcthingroot. do not pass a pointer to a js string or object to any of these functions—rp must point to a variable, the location of the pointer itself, and not an object or string. an entry for rp is added to the garbage collector's root set for the jsruntime associated with cx (or, in js_addnamedrootrt, the runti...
JS_BufferIsCompilableUnit
determine whether a buffer is compilable unit. syntax bool js_bufferiscompilableunit(jscontext *cx, js::handle<jsobject*> obj, const char *utf8,
size_t length); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the global object, or null. utf8 const char * string containing the script to compile. length
size_t the length of utf8 in characters. description given a buffer, return false if the buffer might become a valid javascript statement with the addition of more lines. otherwise return true. the intent is ...
JS_DefineFunction
create a native function and assign it as a property to a specified js object. ...
JS_EnumerateDiagnosticMemoryRegions
17 enumerate memory regions that contain diagnostic information.. syntax void js_enumeratediagnosticmemoryregions(jsenumeratediagnosticmemorycallback callback); name type description callback jsenumeratediagnosticmemorycallback pointer to the new callback function to use. callback syntax typedef bool (* jsenumeratediagnosticmemorycallback)(void *ptr,
size_t length); name type description ptr void * pointer to the allocated memory. length
size_t length of the allocated memory. description js_enumeratediagnosticmemoryregions enumerates memory regions that contain diagnostic information intended to be included in crash report minidumps. see also mxr id search for js_enumeratediagnosticmemoryr...
JS_EvaluateScript
the offending line in the file or url if an error occurs. rval jsval * out parameter. on success, if rval is not null, *rval receives the result value. description js_evaluatescript compiles and executes a script in the specified scope, obj. js_evaluateucscript is the unicode version of the function. src is the string containing the text of the script. length indicates the
size of the text version of the script in characters. filename is the name of the file (or url) containing the script. this information is used in messages if an error occurs during compilation. similarly, lineno is used to report the line number of the script or file where an error occurred during compilation. rval is an optional out parameter. if it is non-null, then on success, the result value i...
JS_GetInternedStringChars
api 33this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.5 get the chars of an interned string. syntax const jschar * js_getinternedstringchars(jsstring *str); const jschar * js_getinternedstringcharsandlength(jsstring *str,
size_t *length); name type description str jsstring * the interned string. length
size_t * out parameter. receives the length of the string. description js_getinternedstringchars returns a pointer to the interned string. js_getinternedstringcharsandlength returns a pointer to the interned string and stores the length of it to *length. see also bug ...
JS_GetStringCharAt
this article covers features introduced in spidermonkey 38 return a specified character from a string. syntax bool js_getstringcharat(jscontext *cx, jsstring *str,
size_t index, char16_t *res); char16_t js_getflatstringcharat(jsflatstring *str,
size_t index); name type description cx jscontext * the context in which to create the new string. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str jsstring * or jsflatstring * the string to get character. index
size_t an integer between 0 and 1-less-than the length of the string. res char16_t * (js_getstringcharat only) out parameter. on successful, receives the character code. description js_getstringchara...
JS_GetStringCharsAndLength
obsolete since jsapi 33this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.5 get the characters and the length of a string. syntax const jschar * js_getstringcharsandlength(jscontext *cx, jsstring *str,
size_t *length); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str jsstring * a string to get characters. length
size_t * out parameter. receives the length of the string. description js_getstringcharsandlength gets the characters and the length of the strin...
JS_GetStringEncodingLength
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext.. str jsstring * a string to encode. description js_getstringencodinglength returns the length of the specified string in bytes, regardless of its encoding. you can use this value to create a buffer to encode the string into using the js_encodestringtobuffer function. ...
JS_GetStringLength
description js_getstringlength reports the length, in 16-bit code units, of the string str. this is the same as the length property of the string. this is the same as the length of the array returned by js_getstringchars, in char16_ts (not bytes). because some unicode characters are represented using two 16-bit code units, the result is not necessarily the same as the number of unicode characters in the string. ...
JS_IsIdentifier
this article covers features introduced in spidermonkey 17 test whether the given string is a valid ecmascript identifier. syntax bool js_isidentifier(jscontext *cx, js::handlestring str, bool *isidentifier); bool js_isidentifier(const char16_t *chars,
size_t length); // added in spidermonkey 38 name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str js::handlestring the string to test. chars const char16_t * the pointer of the string to test. length
size_t the length of chars. isidentifier bool * out parameter. on success, *isidentifier receives ...
JS_NewArrayObject
create a new array object. syntax jsobject * js_newarrayobject(jscontext *cx, const js::handlevaluearray& contents); // added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx,
size_t length); // added in spidermonkey 31 jsobject * js_newarrayobject(jscontext *cx, int length, jsval *vector); // obsolete since jsapi 30 name type description cx jscontext * the context in which to create the new array. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. contents js::handlevaluearray& reference to the initial values for the array's elements. added in spidermonkey 31 length
size_t or int the length of the new array. this must not be negative. vector jsval * ...
JS_NewDependentString
create a new javascript string containing a range of characters from an existing string. syntax jsstring * js_newdependentstring(jscontext *cx, js::handlestring str,
size_t start,
size_t length); name type description cx jscontext * the context in which to create the new string. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. str js::handlestring the string containing the characters for the new string. start
size_t the start index of the substring. length
size_t length of the substring, in characters. description js_newdependentstring creates a new string as a substring of an existing javascript string, str. the new string contains the same c...
JS_NewRuntime
jsruntime *parentruntime = nullptr); jsruntime * js_newruntime(uint32_t maxbytes, jsusehelperthreads usehelperthreads, jsruntime *parentruntime = nullptr); // deprecated since jsapi 32 name type description maxbytes uint32 maximum number of allocated bytes after which garbage collection is run. maxnurserybytes uint32 nursery
size in bytes. maxnurserybytes is rounded down to a multiple of chunk
size. added in spidermonkey 38 parentruntime jsruntime * the topmost parent or nullptr . added in spidermonkey 31 description js_newruntime initializes the javascript runtime environment. call js_newruntime before making any other api calls except js_init. js_newruntime allocates memory for the jsruntime and i...
JS_NewUCString
note: js_newstring() was removed in spidermonkey 1.8.5. use js_newstringcopyn and js_newucstringcopyn instead. syntax jsstring * js_newucstring(jscontext *cx, char16_t *chars,
size_t length); jsstring * js_newstring(jscontext *cx, char *buf,
size_t length); // obsolete since jsapi 1.8.5 name type description cx jscontext * the context in which to create the new string. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. buf char * or char16_t * pointer to a character array, allocated with js_malloc, containing the characters for the js string to create. the javascript engine adopts the buffer. length
size_t number of characters in the text string. description js_newstring...
JS_NewStringCopyN
create a new js string. syntax jsstring * js_newstringcopyn(jscontext *cx, const char *s,
size_t n); jsstring * js_newucstringcopyn(jscontext *cx, const char16_t *s,
size_t n); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s const char* or const char16_t * pointer to the array of characters containing the text for the js string to create. n
size_t number of characters to copy from s into the new string. description js_newstringcopyn allocates space for a javascript string and its underlying storage, and copies n characters from a c character array, s, into the new jsstring. ...
JS_SetCompartmentNameCallback
llback); name type description cx jsruntime * the runtime to set the callback function. callback jscompartmentnamecallback callback function which will be called to name each compartment (see below). callback function typedef void (* jscompartmentnamecallback)(jsruntime *rt, jscompartment *compartment, char *buf,
size_t buf
size); name type description cx jsruntime * the runtime of the compartments. compartmentcallback jscompartment * the pointer to the compartment to be named. buf char * the buffer to store the name of the compartment. buf
size size_t the maximum
size of the buffer. description js_setcompartmentnamecallback set...
JS_SetThreadStackLimit
context * the context to configure. limitaddr jsuword an address near the top of the c stack. this should be a safely writeable address well short of the actual top of the stack. description js_setthreadstacklimit sets the maximum (if stack grows upward) or minimum (downward) legal stack byte address in limitaddr for the thread or process stack used by cx. to disable stack
size checking, pass 0 for limitaddr. in a js_threadsafe build, after passing a jscontext from one thread to another, call js_setthreadstacklimit(cx, 0) after calling js_setcontextthread. (see also js_setcontextthread and js_clearcontextthread.) see also mxr id search for js_setthreadstacklimit js_setnativestackquota bug 723021 ...
JS_THREADSAFE
an active request on cx. the callback does not need to call js_beginrequest()). in particular, jsnative callbacks provide a request. this means that any potentially long-running operation in a native must be bracketed with calls to js_suspendrequest() and js_resumerequest(). jsbool socket_recv(jscontext *cx, unsigned int argc, jsval *vp) { ... rc = js_suspendrequest(cx); read_
size = recv(socket, buf,
size, flags); js_resumerequest(cx, rc); ... } garbage collection requests help make garbage collection safe when multiple threads are using the jsapi. for each thread that is in a request: almost any call into the jsapi may trigger garbage collection; but garbage collection does not happen at any other time (such as, for example, at the moment before the return ...
jsint
; typedef ... jsuword; typedef ... intn; typedef ... uintn; // following types are still provides in js/public/legacyinttypes.h, // but should not use them. typedef ... int8; typedef ... uint8; typedef ... int16; typedef ... uint16; typedef ... int32; typedef ... uint32; typedef ... int64; typedef ... uint64; description jsint and jsuint are 32-bit integer types. jsword and jsuword are pointer-
sized integer types. intn and uintn are integer types the same
size as the platform's native int type. see also bug 714728 - removes jsword/jsuword bug 730511 - removes intn/uintn bug 732306 - removes jsint bug 733260 - removes jsuint bug 708735 - deprecates {u,}int{8,16,32,64} ...
SpiderMonkey 1.8
esent, but do nothing, in non-js_threadsafe builds. this is to help applications share and reuse code regardless of whether they use threads. there are two new jsextendedclass hooks, jsextendedclass.iteratorobject and jsextendedclass.wrappedobject. both are documented but obscure. many new memory management features have been added as well. the new function js_setscriptstackquota limits the
size of the javascript stack. two new functions, js_setgczeal and js_dumpheap, aim to help developers debug gc-related problems. these functions are only present in debug builds. js_setgczeal is especially helpful. when gc zeal is enabled, gc happens extremely frequently. this makes gc-related problems easier to reproduce, reveals gc problems that you may not have noticed before, and causes gc-safety...
SpiderMonkey 45
tableprototype (bug 1211607) js_getownucpropertydescriptor (bug 1211607) js_hasownpropertybyid (bug 1211607) js_hasownproperty (bug 1211607) js_deleteucproperty (bug 1211607) js::newfunctionfromspec (bug 1054756) js::compilefornonsyntacticscope (bug 1165486) js_checkforinterrupt (bug 1058695) js::mapdelete (bug 1159469) js::mapforeach (bug 1159469) js::newsetobject (bug 1159469) js::set
size (bug 1159469) js::sethas (bug 1159469) js::setdelete (bug 1159469) js::setadd (bug 1159469) js::setclear (bug 1159469) js::setkeys (bug 1159469) js::setvalues (bug 1159469) js::setentries (bug 1159469) js::setforeach (bug 1159469) js::exceptionstackornull (bug 814497) js::copyasyncstack (bug 1160307) js::getsavedframesource (bug 1216819) js::getsavedframeline (bug 1216819) js::getsav...
The Rust programming language
take full advantage of the powerful features of modern multi-core processors. it prevents segmentation faults and guarantees thread safety, all with an easy-to-learn syntax. in addition, rust offers zero-cost abstractions, move semantics, guaranteed memory safety, threads with no data races, trait-based generics, pattern matching, type inference, and efficient c bindings, with a minimum runtime
size. to learn more about rust, you can: watch the videos below for a closer look at the power and benefits rust provides. read the book the rust programming language online. download the rust compiler, check out examples, and learn everything you could possibly wish to know at the rust official web site. rust and the future of systems programming unlocking the power of parallelism with rus...
Handling Mozilla Security Bugs
to be invited to join the security bug group. (as described previously, once added to the security bug group, that person would then have automatic access to all bugs marked security-sensitive, without having to be explicitly added to the cc list for each one.) note that, although we intend to make it relatively simple for a new person to join the security bug group, and we are not limiting the
size of the group to any arbitrary number, we do not want the group to expand without any limits whatsoever. we reserve the right to cap the membership at some reasonable level, either by refusing new applications or, if necessary and appropriate, by removing existing members of the security bug group to make room for new ones. disclosure of security vulnerabilities the security module owner, peers,...
Gecko states
ons find an object with this state, they should check to see if state_offscreen is also set. if this second state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen scrolled off state_
sizeable the object can be re
sized. for example, a user could change the
size of a window by clicking the border with a mouse and dragging the mouse. state_moveable indicates that the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing the object or child uses text-to-speech (tts) technology for description pur...
History Service Design
a visit is the visit we have come from, this is used to track visit chains in global history, so for example if clicking a link causes a redirect the from visit will allow to follow up the chain of visits. at the moment this is used when catching favicons or bookmarks for redirected pages. querying for data querying data is a basic feature for places. thanks to the underlying database, history
size has increased far more than 10 times from the previous mork based implementation, thus the need for a simple and efficient way to extract slices of data. a places query is made of of a query object (nsinavhistoryquery) and a query options object (nsinavhistoryqueryoptions) that defines the constraints results must obey to. these objects can be directly instantiated and built, setting their attri...
places.sqlite Database Troubleshooting
rned by the last pragma query. sqlite> .exit open a new shell for the new database: my_work_folder> sqlite3 places.sqlite sqlite> pragma integrity_check; if the result is not ok, the file cannot be recovered; stop here and please file a bug. let's fix the schema version. nn must be replaced with the number we had noted previously: sqlite> pragma user_version = nn; let's update the page_
size value: sqlite> pragma journal_mode = truncate; sqlite> pragma page_
size = 32768; sqlite> vacuum; sqlite> pragma journal_mode = wal; sqlite> .exit copy the new places.sqlite to the profile folder, overwriting the existing one. remove the places.sqlite-corrupt file. launch firefox. if the database is still broken (missing history, creating -corrupt file, ...), please file a bug. ...
Generic factory
y->setconstructor(&mycomponent::create); } return factory; } this example assumes that the xpcom repository is available as an interface (which it soon will be). background (this is based on my original news posting <beard-2402991733140001@h-198-93-95-151.mcom.com>.) we seem to be creating a huge number of different factory implementations. it seems to me that we can cut down on code
size (all those queryinterface, addref, release implementations) if we just use the following class for all of the simple factories: // idea: why not create a generic factory facility so we can avoid // duplication of so much nsifactory code? all we need is an allocator // function, the rest of the implementation is exactly the same. #include "nsifactory.h" class nsgenericfactory : public nsif...
Avoiding leaks in JavaScript XPCOM components
scenes. programmers writing and reviewing javascript code in mozilla should understand how code using xpcom in javascript can leak so that they can avoid leaks. this document attempts to help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks. basics of memory management creating objects that are not a fixed
size for the lifetime of the program (global variables) or a fixed
size for the lifetime of a function (stack variables) requires a system for dynamic memory allocation: a system that allocates memory from a space called the heap. the requirements for such a memory allocation system are: memory should be returned to the heap when the program no longer needs it (or soon thereafter) so that the amoun...
An Overview of XPCOM
erformance of your application. maintenance even when you are not updating a component, designing your application in a modular way can make it easier for you to find and maintain the parts of the application that you are interested in. mozilla has over four million lines of code, and no single individual understands the entire codebase. the best way to tackle a project of this
size is to divide it into smaller, more manageable pieces, use a component programming model, and to organize related sets of components into modules. the network library, for example, consists of components for each of the protocols, http, ftp, and others, which are bundled together and linked into a single library. this library is the networking module, also known as "necko." but it's not always a ...
Component Internals
this location to a less application-centric (and thus more user-centric) location. any gecko-based application may choose to locate it elsewhere. xpcom reads this file into an in-memory database. component manifests the component manifest is a mapping of files to components and components to classes. it specifies the following information: location on disk of registered components with file
size class id to location mapping contract id to class id mapping the component manifest maps component files to unique identifiers for the specific implementations (class ids), which in turn are mapped to more general component identifiers (contract ids). type library manifests another important file that xpcom reads in is the type library manifest file. this file is also located in the compon...
Using XPCOM Utilities to Make Things Easier
url. // in idl: attribute acstring data; nsembedcstring data; method->getdata(data); // now to extract the data from the url class: const char* astringurl = url.get(); note that the memory pointed to by astringurl after the call to url.get() is owned by the url string object. if you need to keep this string data around past the lifetime of the string object, you must make a copy. string
size the examples above illustrate the use of the single byte string class, nsembedcstring. the double byte version, nsembedstring, has the same functionality but the constructor takes nsastring and the .get() method returns the type prunichar*. note that prunichar is a two byte value. in the coming chapters, you'll see examples that use this version in the weblock component. smart pointers all of...
XPCOM hashtable guide
re packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. in their implementation, hashtables take the key and apply a mathematical hash function to randomize the key and then use the hash to find the location in the hashtable. good hashtable implementations will automatically re
size the hashtable in memory if extra space is needed, or if too much space has been allocated. when should i use a hashtable? hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently added or removed. hashtables should not be used for sets that need to be sorted; very small datasets (le...
Detailed XPCOM hashtable guide
re packed structures, so there is no wasted space. some: hashtables are not packed structures; depending on the implementation, there may be significant wasted memory. in their implementation, hashtables take the key and apply a mathematical hash function to randomize the key and then use the hash to find the location in the hashtable. good hashtable implementations will automatically re
size the hashtable in memory if extra space is needed, or if too much space has been allocated. when should i use a hashtable? hashtables are useful for sets of data that need swift random access; with non-integral keys or non-contiguous integral keys; or where items will be frequently added or removed. hashtables should not be used for sets that need to be sorted; very small datasets (le...
Components.utils.forceGC
this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascript. ...
Profiling XPCShell
self 427} [2,56810] cp_qi() {860-866} 835 {min 0, max 1, avg 0, sum 950, self 950} the first line tells which file was profiled. then, the next lines shows the amount of time spend in the functions in that file. the line consists of: the compile count of the function; the call count of the function; the functions name; the starting line number; the ending line number; the function's
size; the amount of time (in milliseconds) the fastest call took; the time of the slowest call; the average time spend; the total time; the time spend in the function itself is given (that is the total time excluding the time spend in functions called from this function). notes you need a trunk build from after 2007-05-28. using an earlier build will cause the profiler to hang the more advent...
XPCshell Test Manifest Expressions
comments if an expression contains a # (pound/hash) character outside of a string, the character and the rest of the line will be treated as a comment. this...
Language bindings
variables and apis defined in web content.components.utils.exportfunctionthis function provides a safe way to expose a function from a privileged scope to a less-privileged scope.components.utils.forcegccomponents.utils.forcegc lets scripts force a garbage collection cycle. the mozilla javascript engine will perform garbage collection automatically when the javascript heap grows beyond a certain
size. this mechanism doesn't account for any native (c++) xpcom objects hanging off javascript objects though. in many cases a javascript application will have internal knowledge of javascript objects referencing large (trees of) xpcom objects and know when they are no longer reachable. in this case it can be important to be able to force a garbage collection cycle from javascript. components.util...
Monitoring HTTP activity
quiring you to implement a single method, nsihttpactivityobserver.observeactivity(), which gets called each time an action of interest takes place on the http channel. ...
NS_Alloc
return values this function returns a pointer to the allocated block of memory, which is suitably aligned for any kind of variable, or null if the allocation failed. remarks this function provides a convenient way to access the xpcom memory manager. it is equivalent to calling alloc on the nsimemory instance returned from ns_getmemorymanager. ...
NS_Realloc
« xpcom api reference summary reallocates a block of memory using the xpcom memory manager. #include "nsxpcom.h" void* ns_realloc( void* aptr, pr
size a
size ); parameters aptr [in] a pointer to the block of memory to reallocate. this pointer must have been previously allocated by the xpcom memory manager, or this parameter may be null in which case this function behaves like ns_alloc. a
size [in] the
size in bytes of the block to allocate, or zero if the given block is to be freed. return values this function returns a pointer to the allocated block of memory, which is suitably aligned for any kind of variable, or null if the allocation failed. remarks this function provides a convenient way to access the xpcom memory manager. it is equivalent to calling realloc...
NS_ConvertASCIItoUTF16
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
NS_ConvertUTF16toUTF8
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
NS_ConvertUTF8toUTF16
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
NS_LossyConvertUTF16toASCII
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
Append
adatalength [in] the length of adata, measured in storage units. ...
Assign
adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. ...
Cut
« xpcom api reference summary the cut function removes a section of the string's internal buffer. void cut( index_type acutstart,
size_type acutlength ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. ...
Insert
mary the insert family of functions inserts a value into a string's internal buffer. void insert( const self_type& astring, index_type aposition ); parameters astring [in] a nsacstring to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. void insert( const char_type* adata, index_type aposition,
size_type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated...
Length
« xpcom api reference summary the length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
size_type length() const; ...
Replace
ing's internal buffer. void replace( index_type acutstart, index_type acutlength, const self_type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. astring [in] a nsacstring to append to this string. void replace( index_type acutstart,
size_type acutlength, const char_type* adata,
size_type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array to append to this string. adatalength [in] the length of adata, measured in storage units. if ...
nsACString
« xpcom api reference summary the nsacstring abstract class represents a character string composed of single-byte storage units. this class is typically used to represent ascii or utf-8 character arrays. #include "nsstringapi.h" class nsacstring { ... }; typedefs char_type [char] storage unit for this class. self_type [nsacstring] an alias for the type of this class.
size_type [pruint32] type used to represent the number of bytes stored in the string. index_type [pruint32] type used to represent an offset into the string. methods beginreading the beginreading function returns a const pointer to the first element of the string's internal buffer. endreading the endreading function returns a const char_type pointer to the element just beyond the last...
nsACString_internal
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
Append
adatalength [in] the length of adata, measured in storage units. ...
Assign
adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. ...
Insert
mmary the insert family of functions inserts a value into a string's internal buffer. void insert( const self_type& astring, index_type aposition ); parameters astring [in] a nsastring to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. void insert( const char_type* adata, index_type aposition,
size_type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to append to this string. aposition [in] an offset into the string's internal buffer specifying where to place the given characters. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated...
Length
« xpcom api reference summary the length function returns the number of storage units in the string's internal buffer (not including the null-terminator if present).
size_type length() const; ...
Replace
ring's internal buffer. void replace( index_type acutstart, index_type acutlength, const self_type& astring ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. astring [in] a nsastring to append to this string. void replace( index_type acutstart,
size_type acutlength, const char_type* adata,
size_type adatalength = pr_uint32_max ); parameters acutstart [in] the starting index of the section to remove, measured in storage units. acutlength [in] the length of the section to remove, measured in storage units. adata [in] a raw character array to append to this string. adatalength [in] the length of adata, measured in storage units. if ...
nsAString
« xpcom api reference summary the nsastring abstract class represents a character string composed of double-byte storage units. this class is typically used to represent unicode character arrays. #include "nsstringapi.h" class nsastring { ... }; typedefs char_type [prunichar] storage unit for this class. self_type [nsastring] an alias for the type of this class.
size_type [pruint32] type used to represent the number of double-byte units stored in the string. index_type [pruint32] type used to represent an offset into the string. methods beginreading the beginreading function returns a const pointer to the first element of the string's internal buffer. endreading the endreading function returns a const char_type pointer to the ele...
nsAString_internal
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsAdoptingCString
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsAdoptingString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsAutoString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsCAutoString
nst char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool...
nsCString
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsDependentCString
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsDependentCSubstring
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsDependentString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsDependentSubstring
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsEmbedCString
in] a nsembedcstring to copy into this string. nsembedcstring( const abstract_string_type& aabstractstring ); parameters aabstractstring [in] a nsacstring to copy into this string. explicit nsembedcstring( const abstract_string_type& aabstractstring ); parameters aabstractstring [in] a nsacstring to copy into this string. explicit nsembedcstring( const char_type* adata,
size_type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. remarks the default constructor sets the string's internal buffer to point to a static empty (zero-length...
nsEmbedString
ing [in] a nsembedstring to copy into this string. nsembedstring( const abstract_string_type& aabstractstring ); parameters aabstractstring [in] a nsastring to copy into this string. explicit nsembedstring( const abstract_string_type& aabstractstring ); parameters aabstractstring [in] a nsastring to copy into this string. explicit nsembedstring( const char_type* adata,
size_type adatalength = pr_uint32_max ); parameters adata [in] a raw character array to copy into this string. adatalength [in] the length of adata, measured in storage units. if equal to pr_uint32_max, then adata is assumed to be null-terminated. otherwise, adata need not be null terminated. remarks the default constructor sets the string's internal buffer to point to a static empty (zero-length...
Alloc
return values this function is infallible, therefore guaranteed to return a pointer to the newly allocated buffer. the result must be freed with a call to nsmemory::free() when it is no longer needed. ...
HeapMinimize
static nsresult heapminimize( prbool aimmediate ); parameters aimmediate [in] if true, heap minimization will occur immediately if the call was made on the main thread. if false, the flush will be scheduled to happen when the app is idle. ...
Realloc
« xpcom api reference summary the realloc function reallocates a block of memory to a new
size. static void* realloc( void* aptr,
size_t a
size ); parameters aptr [in] the address of the memory block to reallocate. this may be nsnull, in which case realloc behaves like nsmemory::alloc. a
size [in] specifies the new
size in bytes of the block of memory to allocate. this may be 0, in which case realloc behaves like nsmemory::free. return values this function returns nsnull if the memory allocation fails. otherwise, it returns a pointer to the newly allocated buffer. the result must be freed with a call to nsmemory::free when it is no longer needed. remarks if aptr is non-null, then its contents will be unchanged to the minimum of the old and new
sizes. newly allocated memo...
nsMemory
« xpcom api reference summary the nsmemory class provides static helper routines to manage memory. these routines allow easy access to xpcom's global nsimemory implementation without having to go through the service manager to get it. #include "nsmemory.h" class nsmemory { ... }; methods alloc the alloc function allocates a block of memory of a particular
size. realloc the realloc function reallocates a block of memory to a new
size. free the free function frees a block of memory that was allocated by xpcom's memory manager. heapminimize the heapminimize function attempts to shrink the
size of the heap. clone the clone function creates a copy of an existing memory block up to the
size specified. getglob...
nsPromiseFlatCString
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsPromiseFlatString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
nsXPIDLCString
2 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmutabledata pruint32 getmutabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters char** data pruint32 newlen setisvoid void setisvoid(prbool) - source ...
nsXPIDLString
prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmutabledata pruint32 getmutabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if
size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 if unable to satisfy the request due to low-memory conditions. parameters prunichar** data pruint32 newlen setisvoid void setisvoid(prbool) - sou...
imgIDecoderObserver
ssible time. void onimageisanimated( in imgirequest arequest ); parameters arequest the request on which data is available, or null if being called for an imgidecoder object. onstartcontainer() this load notification is called once enough data has been loaded from the network that we were able to parse the width and height from the image. by the time this callback is been called, the
size has been set on the container and status_
size_available has been set on the associated imgrequest. void onstartcontainer( in imgirequest arequest, in imgicontainer acontainer ); parameters arequest the request on which data is available, or null if being called for an imgidecoder object. acontainer missing description onstartdecode() this decode notification is called as so...
imgIRequest
aded from. read only. imagestatus unsigned long status flags of the status_* variety. read only. mimetype string read only. uri nsiuri the uri the image load was started with. note that this might not be the actual uri for the image (for example if http redirects happened during the load). read only. constants constant value description status_none 0x0 nothing to report. status_
size_available 0x1 we received enough image data from the network or filesystem that we know the width and height of the image, and have thus called set
size() on the container. status_load_partial 0x2 used internally by imgrequest to flag that a request is being cancelled as a result of a failure of a proxy holder and not an internal failure. at least i think that's what it does. regardless, there's...
mozIStorageError
11 the database on disk is malformed. full 13 an insertion failed because the database is full. cantopen 14 unable to open the database file. empty 16 the database is empty. schema 17 the database schema changed. toobig 18 a string or blob exceeds the
size limit. constraint 19 aborted due to a constraint violation. internal 2 an internal logic error occurred. mismatch 20 a data type mismatch occurred. misuse 21 library used incorrectly. nolfs 22 attempted to use os features not supported on the host system. ...
GroupPosition
method returns grouping information. used for tree items, list items, tab panel labels, radio buttons, etc. also used for collectons of non-text objects. void groupposition( out long agrouplevel, out long asimilaritemsingroup, out long apositioningroup ); parameters agrouplevel 1-based, similar to aria aria-level property asimilaritemsingroup 1-based, similar to aria aria-set
size property, inclusive of the current item. apositioningroup 1-based, similar to aria aria-posinset property. remark alternatively this information is exposed by nsiaccessible.attribute attribute, also see group attributes page. refer to accessible web specifications to get an idea what elements expose group information. ...
nsIAccessible
that cannot be fit into existing api methods, please refer to attributes documentation for more information. you can use nsiaccessible.attributes to get a map of attributes. keyboard shortcuts some actions on accessibles can be performed by keyboard shortcuts. following methods are used to get them nsiaccessible.defaultkeybinding(), nsiaccessible.getkeybindings(), nsiaccessible.keyboardshortcut.
size and screen position you can use nsiaccessible.getbounds() to get
size and coordinates of the accessible. layout oriented methods nsiaccessible.getchildatpoint() to get child accessible from point nsiaccessible.getaccessibletoleft(), nsiaccessible.getaccessibletoright(), nsiaccessible.getaccessibleabove() or nsiaccessible.getaccessiblebelow() to get left, right, top or below placed accessible...
nsIAccessibleStates
bject with this state, they should check to see if state_offscreen is also set. if this second state is defined, then clients can communicate the information about the object to users. for example, a list box can have both state_invisible and state_offscreen set. in this case, the client application can communicate all items in the list to users. state_offscreen 0x00010000 scrolled off. state_
sizeable 0x00020000 the object can be re
sized. for example, a user could change the
size of a window by clicking the border with a mouse and dragging the mouse. state_moveable 0x00040000 the object can be moved. for example, a user can click on the titlebar for the object and drag the object to a new location. state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology fo...
nsIAppStartup
profile selection process will take place on startup. methods createhiddenwindow() create the hidden window. void createhiddenwindow(); parameters none. createstartupstate() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) creates the initial state of the application by launching tasks specfied by "general.startup.*" prefs. note:
size_to_content may be used for width or height. boolean createstartupstate( in long awindowwidth, in long awindowheight ); parameters awindowwidth the width to make the initial window(s) opened. awindowheight the height to make the initial window(s) opened. return value true if a window was opened. destroyhiddenwindow() destroys the hidden window. this will have no effect if the hid...
nsIBlocklistPrompt
rvice.idlscriptable this interface is used, if available, by the default implementation of nsiblocklistservice to display a confirmation user interface to the user before blocking extensions or plugins. 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void prompt([array,
size_is(acount)] in nsivariant aaddons, [optional] in pruint32 acount); methods prompt() prompt the user about newly blocked addons. the prompt is then responsible for soft-blocking any addons that need to be afterwards. void prompt( [array,
size_is(acount)] in nsivariant aaddons, in pruint32 acount optional ); parameters aaddons an array of addons and plugins that are blocked. the...
nsICacheDeviceInfo
netwerk/cache/nsicachevisitor.idlscriptable this interface provides information about a cache device. inherits from: nsisupports last changed in gecko 1.7 attributes attribute type description description string get a human readable description of the cache device. read only. entrycount unsigned long get the number of stored cache entries. read only. maximum
size unsigned long get the upper limit of the
size of the data the cache can store. read only. total
size unsigned long get the total
size of the stored cache entries. read only. usagereport string get a usage report, statistics, miscellaneous data about the cache device. read only. see also nsicache nsicachevisitor ...
nsIContentView
s. fails if the view isn't valid. void scrollto( in float xpx, in float ypx ); parameters xpx the x coordinate to scroll to, in css pixels. ypx the y coordinate to scroll to, in css pixels. setscale() sets the content view's scale for each axis. void setscale( in float xscale, in float yscale ); parameters xscale horizontal scaling factor; specify 1.0 to use the natural
size of the content. yscale vertical scaling factor; specify 1.0 to use the natural
size of the content. ...
nsIDBFolderInfo
; attributes attribute type description charactersetoverride boolean expiredmark nsmsgkey expungedbytes long flags long folderdate unsigned long foldername string folder
size unsigned long highwater nsmsgkey imaphierarchyseparator wchar imaptotalpendingmessages long imapuidvalidity long imapunreadpendingmessages long knownartsset string locale astring ...
nsIDOMChromeWindow
f some xul applications create a dialog like window which has a default button but it's not created by the dialog/wizard element, the applications should call this method for the accessibility and the usability on windows at onload event. void notifydefaultbuttonloaded( in nsidomelement defaultbutton ); parameters defaultbutton the default button element of the window. restore() restores the
size and position of the window. void restore(); parameters none. setcursor() sets the mouse cursor to the specified cursor. the mouse cursor is locked to the specified cursor if it's not "auto". at that time, the cursor has been never changed by cursor moving. after you call this method with "auto", the cursor will be unlocked. void setcursor( in domstring cursor ); parameters cursor you can spe...
nsIDOMEvent
0x00004000 change 0x00008000 reset 0x00010000 submit 0x00020000 scroll 0x00040000 load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00800000 locate 0x01000000 move 0x02000000 re
size 0x04000000 forward 0x08000000 help 0x10000000 back 0x20000000 text 0x40000000 alt_mask 0x00000001 control_mask 0x00000002 shift_mask 0x00000004 meta_mask 0x00000008 methods violates the xpcom interface guidelines deserialize() boolean deserialize(...
nsIDOMHTMLAudioElement
he audio stream, specified either as a javascript array or as a numeric typed array. return value the actual number of bytes written to the stream. exceptions thrown ns_error_dom_invalid_state_err the stream has not been initialized for writing by a call to mozsetup(). ns_error_dom_type_mismatch_err the data isn't a valid data type (an array or typed array of numeric values). ns_error_dom_index_
size_err the number of samples specified doesn't divide evenly across the number of channels; you must provide exactly the same number of samples for all channels. ...
nsIDOMStorage
eitem object describing the data corresponding to the specified key, or null if no data exists for the given key. key() returns the key for the item stored at the specified index in the data store. domstring key( in unsigned long index ); parameters index the index for which the corresponding key should be returned. return value a string containing the requested key. exceptions thrown index_
size_err there is no key at the specified index. removeitem() given a key, removes the corresponding entry from the session store. void removeitem( in domstring key ); parameters key the key for which data should be removed from storage. setitem() sets the value corresponding to a given key. if the key does not already exist, a new key is added, associated with the specified value. if the key al...
nsIDOMStorage2
value a string containing the data corresponding to the specified key, or null if no data exists for the given key. key() returns the key for the item stored at the specified index in the data store. domstring key( in unsigned long index ); parameters index the index for which the corresponding key should be returned. return value a string containing the requested key. exceptions thrown index_
size_errthere is no key at the specified index. removeitem() given a key, removes the corresponding entry from local storage. void removeitem( in domstring key ); parameters key the key for which data should be removed from storage. setitem() sets the value corresponding to a given key. if the key does not already exist, a new key is added, associated with the specified value. if the key alread...
nsIDirIndex
ecified for directories. description wstring a description for the filename, which should be displayed by a viewer. lastmodified prtime last-modified time in seconds-since-epoch. if the last modified time is unknown, this value is -1. location string the fully qualified filename, expressed as a uri. this is encoded with the encoding specified in the nsidirindexparser, and is also escaped.
size long long file
size; if the
size is unknown, this value is -1. type unsigned long the type of the entry; one of the type_* constants. constants constant value description type_unknown 0 the type is unknown. type_directory 1 the directory entry represents a directory. type_file 2 the directory entry represents a file. type_symlink 3 the directory entry represents a symlink. see ...
nsIDragService
node adomnode, and the offset calculated so that the initial location for the image appears in the same screen position as where the element is located. the node must be within a document. currently, supported images are all dom nodes. if this is an html <image> or <canvas> element, the drag image is taken from the image data. if the element is in a document, it will be rendered at its displayed
size, otherwise, it will be rendered at its real
size. for other types of elements, the element is rendered into an offscreen buffer in the same manner as it is currently displayed. the document selection is hidden while drawing. the adragevent must be supplied as the current screen coordinates of the event are needed to calculate the image location. void invokedragsessionwithimage( in nsidomnode a...
nsIDragSession
nsidomdocument the document where the drag was started, which will be null if the drag originated outside the application. useful for determining if a drop originated in the same document. read only. sourcenode nsidomnode the dom node that was originally dragged to start the session, which will be null if the drag originated outside the application. read only. target
size ns
size sets the current width and height of the drag target area. it will contain the current
size of the frame that the drag is currently in. native code only! methods getdata() gets data from a drag and drop operation. can be called while the drag is in process or after the drop has completed. void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); p...
nsILocalFileMac
id setfiletypeandcreatorfrommimetype(in string amimetype); obsolete since gecko 1.9.2 attributes attribute type description bundledisplayname astring returns the display name of the application bundle (usually the human readable name of the application) read only. bundleidentifier autf8string returns the identifier of the bundle. read only. filecreator ostype native code only! file
sizewithresfork print64 returns the combined
size of both the data fork and the resource fork (if present) rather than just the
size of the data fork as returned by getfile
size() read only. filetype ostype file type and creator attributes. native code only! constants constant value description current_process_creator 0x8000000 use with setfiletype() to specify the signature of current proces...
nsIMsgFilter
booleanand, out acstring arbitraryheader ) appendterm() void nsimsgfilter::appendterm (in nsimsgsearchterm term) createterm() nsimsgsearchterm nsimsgfilter::createterm ( ) matchhdr() void nsimsgfilter::matchhdr ( in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long header
size, out boolean result ) logrulehit() void nsimsgfilter::logrulehit ( in nsimsgruleaction afilteraction, in nsimsgdbhdr aheader ) createaction() nsimsgruleaction nsimsgfilter::createaction ( ) getactionat() nsimsgruleaction nsimsgfilter::getactionat (in long aindex) appendaction() void nsimsgfilter::appendaction (in nsimsgruleaction action ) clearactionli...
nsIMsgFilterList
afilter, in string condition ) savetodefaultfile() void nsimsgfilterlist::savetodefaultfile ( ) applyfilterstohdr() void nsimsgfilterlist::applyfilterstohdr ( in nsmsgfiltertypetype filtertype, in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsgdatabase db, in string headers, in unsigned long header
size, in nsimsgfilterhitnotify listener, in nsimsgwindow msgwindow, in nsilocalfile amessagefile ) writeinattr() void nsimsgfilterlist::writeintattr ( in nsmsgfilterfileattribvalue attrib, in long value, in nsioutputstream stream ) writestrattr() void nsimsgfilterlist::writestrattr ( in nsmsgfilt...
nsIMsgSearchTerm
n string charset, in boolean charsetoverride); matchrfc2047string boolean matchrfc2047string(in string astring, in string charset, in boolean charsetoverride); matchdate boolean matchdate(in prtime atime); matchstatus boolean matchstatus(in unsigned long astatus); matchpriority boolean matchpriority(in nsmsgpriorityvalue priority); matchage boolean matchage(in prtime days); match
size boolean match
size(in unsigned long
size); matchlabel boolean matchlabel(in nsmsglabelvalue alabelvalue); matchjunkstatus boolean matchjunkstatus(in string ajunkscore); matchjunkpercent /* * test search term match for junkpercent * * @param ajunkpercent junkpercent for message (0-100, 100 is junk) * @return true if matches */ boolean matchjunkpercent(in unsigned long ...
nsIOutputStream
ata from a buffer into the stream. note: though this method is scriptable, javascript code must only pass an ascii character string as the abuf parameter. c++ code may however pass any arbitrary binary data, including data with embedded null bytes. unsigned long write( in string abuf, in unsigned long acount ); parameters abuf the buffer containing the data to be written. acount the
size of the buffer, or the maximum number of bytes to copy from the buffer. return value this method returns the number of bytes copied from the buffer (may be less than acount). exceptions thrown ns_base_stream_would_block if writing to the output stream would block the calling thread (non-blocking mode only) writefrom() this method copies data from an nsiinputstream to this nsioutputstrea...
nsIPrompt
example usage is also documented: using the button flags see also nsipromptservice ...
nsIRandomGenerator
netwerk/base/public/nsirandomgenerator.idlscriptable interface used to generate random data. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void generaterandombytes(in unsigned long alength, [retval, array,
size_is(alength)] out octet abuffer); methods generaterandombytes() generates the specified amount of random bytes. void generaterandombytes( in unsigned long alength, [retval, array,
size_is(alength)] out octet abuffer ); parameters alength the length of the data to generate. abuffer a buffer that contains random bytes of
size alength. ...
nsISHistory
tory, to erase evidence of prior page loads and so on. void purgehistory( in long numentries ); parameters numentries the number of toplevel documents to be purged from history. during purge operation, the latest documents are maintained and older numentries documents are removed from history. exceptions thrown ns_error_failure numentries is invalid or out of bounds with the
size of history. ns_success_loss_of_insignificant_data purge was vetoed. reloadcurrententry() void reloadcurrententry(); parameters none. removeshistorylistener() called to remove a listener for the session history component. listeners are notified when pages are loaded from history. note: a listener object must implement nsishistorylistener and nssupportsweakreference. void removeshistoryli...
nsIStructuredCloneContainer
riant(); astring getdataasbase64(); void initfrombase64(in astring adata,in unsigned long aformatversion); void initfromvariant(in nsivariant adata); attributes attribute type description formatversion unsigned long get the version of the structured clone algorithm which was used to generate this container's serialized buffer. read only. serializednbytes unsigned long long get the
size in bytes of this container's serialized data. read only. methods deserializetovariant() deserialize the object this container holds, returning it wrapped as an nsivariant. nsivariant deserializetovariant(); parameters none. return value an nsivariant. getdataasbase64() get this structured clone container's data as a base-64-encoded string. astring getdataasbase64(); parameters none. return v...
nsITaskbarPreview
ttribute type description active boolean indicates whether or not the preview is marked as active (currently selected) in the taskbar. controller nsitaskbarpreviewcontroller the controller for this preview. the controller provides the behavior and appearance for the taskbar preview, and is responsible for determining the
size and contents of the preview, which buttons are displayed, and how the application responds to user actions on the preview. the controller is not allowed to be null. note: neither nsitaskbartabpreview or nsitaskbarwindowpreview makes full use of the controller; see the documentation for each interface for details on which controller methods are used. tooltip domstrin...
nsITelemetry
r telemetry is recording pre-release data. does not indicate whether telemetry will send any data. that is governed by user preference and other mechanisms. histogramsnapshots jsval an object containing a snapshot from all of the currently registered histograms. { name1: {data1}, name2:{data2}...} where data consists of the following properties: min - minimal bucket
size max - maximum bucket
size histogram_type - histogram_exponential or histogram_linear counts - an array representing the values of buckets in the histogram. ranges - an array with corresponding bucket
sizes. sum - sum of the counts array. static - true for histograms defined in histograms.json, false for ones defined with newhistogram(). read only. con...
nsITextInputProcessor
nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly. ...
nsITreeBoxObject
further information about trees is given in the xul tutorial. /layout/xul/base/src/tree/public/nsitreeboxobject.idlscriptable please add a summary to this article. ...
nsIUpdatePatch
om. hashfunction astring the hash function to use when determining the integrity of the patch file. hashvalue astring the value of the hash function named in hashfunction that should be computed if the file is not corrupt. selected boolean true if this patch is currently selected as the patch to be downloaded and installed for this update transaction. false if another update is selected.
size unsigned long the
size of the patch file in bytes. state astring the state of this patch. type astring the type of patch represented by the object: "partial" a binary difference between two application versions. "complete" a complete patch containing all the replacement files to update to the new version. url astring the url from which the patch was downloaded. methods serialize() ser...
nsIWifiListener
netwerk/wifi/nsiwifilistener.idlscriptable this interface is implemented by clients interested in receiving notifications when the list of available wifi access points changes. 1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void onchange([array,
size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen); void onerror(in long error); methods onchange() called when the list of available access points changes. void onchange( [array,
size_is(alen)] in nsiwifiaccesspoint accesspoints, in unsigned long alen ); parameters accesspoints an array of nsiwifiaccesspoint objects representing all currently-available wifi access points. alen the ...
nsIWinTaskbar
ver their appearance in the taskbar. by default, there is a single taskbar preview per top level window (excluding pop-ups). this preview is represented by an nsitaskbarwindowpreview object. an application can register its own "tab" previews. these previews automatically hide the corresponding nsitaskbarwindowpreview. these don't have to correspond to tabs within the application; they can vary in
size, shape, and location. they don't even have to represent actual gui elements on the window. unlike window previews, tab previews require most of the functionality of the nsitaskbarpreviewcontroller interface be implemented. warning: this api has undergone changes that are not yet documented. among these is the addition of the method getoverlayiconcontroller(). this method is currently known to cra...
nsIXULWindow
movechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiwebbrowserchrome. contextflags pruint32 contextflags are from nsiwindowcreator2. docshell nsidocshell the docshell owning the xul for this window. read only. intrinsically
sized boolean indicates if this window is instrinsically
sized. primarycontentshell nsidocshelltreeitem the primary content shell. note: that this is a docshell tree item and therefore can not be assured of what object it is. it could be an editor, a docshell, or a browser object. or down the road any other object that supports being a docshelltreeitem query accordingly t...
nsIXmlRpcClient
ith more information on the fault. parameters listener a nsixmlrpcclientlistener that will get notified of xml-rpc events ctxt a context to be passed on to the listener methodname remote method to call arguments array of arguments to pass to the remote method count void asynccall ( in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, [array,
size_is(count)] in nsisupports arguments, in pruint32 count ); createtype() convenience: return the correct nsisupportsprimitive for a given xml-rpc type, or nsisupportsarray or nsidictionary. 'base64' isn't supported. no queryinterface call is needed, the object has been queryinterfaced to the correct interface. void createtype ( in unsigned long type, out nsiidref uuid, [iid...
nsIZipReader
= zr.getentry(entrypointer); // should return true on `entry instanceof ci.nsizipentry` console.log('entrypointer', entrypointer); /* console output * "entrypointer" "bootstrap.js" scratchpad/1:18 */ console.info('entry', entry); /* console output * "entry" xpcwrappednative_nohelper { queryinterface: queryinterface(), compression: getter,
size: getter, real
size: getter, crc32: getter, isdirectory: getter, lastmodifiedtime: getter, issynthetic: getter, permissions: getter, compression: 8 } scratchpad/1:19 */ if (!entry.isdirectory) { var inputstream = zr.getinputstream(entrypointer); reusablestreaminstance.init(inputstream); var filecontents = reusablestreaminstance.read(entry.realsiz...
nsMsgSearchAttrib
const nsmsgsearchattribvalue name = 17; const nsmsgsearchattribvalue displayname = 18; const nsmsgsearchattribvalue nickname = 19; const nsmsgsearchattribvalue screenname = 20; const nsmsgsearchattribvalue email = 21...
nsMsgSearchTerm
h term [ptr] native nsmsgsearchterm(nsmsgsearchterm); // please note the ! at the start of this macro, which means the macro // needs to enumerate the non-string attributes. ...
nsMsgSearchValue
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl use this to specify the value of a search term [ptr] native nsmsgsearchvalue(nsmsgsearchvalue); %{c++ typedef struct nsmsgsearchvalue { nsmsgsearchattribvalue attribute; union { nsmsgpriorityvalue priority; prtime date; pruint32 msgstatus; /* see msg_flag in msgcom.h */ pruint32
size; nsmsgkey key; print32 age; /* in days */ nsimsgfolder *folder; nsmsglabelvalue label; pruint32 junkstatus; pruint32 junkpercent; } u; char *string; } nsmsgsearchvalue; ...
XPCOM Interface Reference
anagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthe
sizernsiconsolelistenernsiconsolemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconverterinputstreamnsiconverteroutputstreamnsicookiensicookie2nsicookiea...
NS_CStringGetMutableData
« xpcom api reference summary the ns_cstringgetmutabledata function gives the caller write access to the string's internal buffer. #include "nsstringapi.h" pruint32 ns_cstringgetmutabledata( nsacstring& astring, pruint32 adatalength, char** adata ); parameters astring [in] a nsacstring instance to modify. adatalength [in] the number of characters to re
size the string's internal buffer to or pr_uint32_max to return the buffer as-is. adata [out] upon return, if the function was successful, then *adata references the string's internal buffer. return values this function returns the number of characters contained in the string's internal buffer (excluding any null-terminator). this value will be zero if the function failed to re
size its internal buffer to the
size requested. re...
NS_StringContainerInit
use as a nsastring. this is a low-level api. #include "nsstringapi.h" nsresult ns_stringcontainerinit( nsstringcontainer& astring ); parameters astring [in] a nsstringcontainer instance to be initialized. return values the ns_stringcontainerinit function returns ns_ok if successful. otherwise, it returns an error code. remarks the nsstringcontainer structure has unspecified
size and layout. its members may not be accessed directly. after a nsstringcontainer object has been initialized, it may be used as an ordinary nsastring object. the internal buffer allocated by a nsstringcontainer is always null-terminated. with ns_stringcontainerinit, the coder is required to call ns_stringcontainerfinish when done with the nsstringcontainer object. therefore, it is generally better...
nsMsgViewSortType
would pass a function the value: components.interfaces.nsmsgviewsorttype.bydate mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. ...
Reference Manual
he getting started guide first. if you're trying to fix a broken build, the faq might lead you to the answer more quickly. the basics design an nscomptr is designed to be a complete replacement for raw xpcom interface pointers where they are used as owning references. almost any place you could use a raw xpcom interface pointer, you should be able to use an nscomptr. an nscomptr is the exact same
size and shape as a raw xpcom interface pointer. it can be used as a member variable without introducing bloat. most of the work of being an owning reference can be done in the constructor, destructor, and assignment operators of nscomptr. whenever you `point' the nscomptr at a different xpcom object (by assignment or initialization), it must release its old value, if any, and addref the new. at its o...
Address book sync client design
ror (if any). * acookie - hmmm...cooookies! */ void onstopauthoperation(in nsresult astatus, in wstring amsg, in string acookie); /** * notify the observer that the ab sync operation has begun. ...
Filelink Providers
port number. a provider implementation can choose what information it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a form with the extra information. that url is then loaded into an iframe directly beneath the provider menulist. note: the setup dialog window should re
size itself automatically in order to fit the content of the iframe without scrollbars. custom settings fields to handle custom settings, the settings xhtml page should contain a form with the id "provider-form", with its onsubmit attribute set to "return false;". example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <input id="username" type="text...
Mail composition back end
rface: onstartsending the onstartsending interface is called when the sending operation has begun. this is called after messages creation has completed. if message creation fails, the nsimsgsend operation will return an ns_failed() return code. ns_imethod onstartsending(const char *amsgid, - the message id for the message being sent pruint32 amsg
size) = 0; - the total message
size for the message being sent onprogress the onprogress interface is called with progress notification on the send operation. ns_imethod onprogress(const char *amsgid, - the message id for the message being sent pruint32 aprogress, - the progress so far pruint32 aprogressmax) = 0; - the maximum...
Creating a Custom Column
ed to connect a column to the current columns that exist. looking in messenger.xul reveals that the columns reside inside a tree with the id "threadtree" whose columns (treecols) reside in "threadcols". to attach our column we add another treecol tag ("colreplyto") with the settings that we would like to use. don't forget to add in a splitter before the column to ensure that the user can easily re
size and drag our column around. our replyto_col_overlay.xul should now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" curren...
Theme Packaging
mozapps/files ... you must have a top-level chrome.manifest file which registers the chrome for the theme (as before) and also an install.rdf manifest that specifies metadata that is displayed in the appearance section of the add-ons manager. preview.png is a preview image which will show when double-clicked on a theme in the appearance section of the add-ons manager. it can be any
size. icon.png is a 32x32 (max. 48x48) png (may contain alpha transparency) which will show up in the appearance section of the add-ons manager. install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"...
Add to iPhoto
an apple event parameter; we aren't using this, so i'm just using a voidptr_t here. a pointer to an lsapplicationparameters structure that describes what application to launch a pointer to the first element of an array to receive the serial numbers of the launched applications; we're not using this field, but if you do, you'll probably have to declare this differently. a cfindex indicating the
size of the array specified by the previous parameter. the lsapplicationparameters structure is declared like this: this.struct_lsapplicationparameters = new ctypes.structtype('lsapplicationparameters', [ {'version': cfindex}, {'flags': optionbits}, {'app...
Declaring types
hnique: var struct = ctypes.structtype('struct'); struct.define([{ next: struct.ptr }]); arrays to declare a new array type, you use the ctypes.arraytype() method.when declaring a new array type, you provide a ctype indicating the type of each element in the array as well as an optional array length. you may declare your array either with a specific number of elements, or with no predetermined
size. this is permitted since c allows it, for the widest possible compatibility. declaring an array type with unspecified length to declare a new array type without specifying a length, you simply pass in the ctype specifying the element type when calling ctypes.arraytype(). for example, to create a type for an array of c standard i/o file pointers (perhaps for tracking a number of active files on ...
FunctionType
name of the corresponding c type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only.
size number the
size of the type, in bytes. this is the same value as the c
sizeof. read only. note: ctypes.void_t.
size is undefined. method overview methods inherited from ctype ctype array([n]) string tosource() string tostring() functiontype cdata functiontype cdata cannot be constructed. function pointer is created with functiontype.p...
PointerType
name of the corresponding c type. for structure and opaque pointer types, this is simply the string that was passed to the constructor. for other function, pointer, and array types, this should be a valid c type expression. ptr ctype returns a ctype representing the data type "pointer to this type". this is the result of calling ctypes.pointertype(the_type). read only.
size number the
size of the type, in bytes. this is the same value as the c
sizeof. read only. note: ctypes.void_t.
size is undefined. method overview methods inherited from ctype ctype array([n]) string tosource() string tostring() pointertype cdata syntax cdata pointertype(); pointertype is pointertype ctype. return value a cdata rep...
Initialization and Destruction - Plugins
reuse by a new instance with the same url. to ensure that the browser does not crash or leak memory when the saved data is discarded, the buf field should be a flat structure (a simple structure with no allocated substructures) allocated with npn_memalloc, as in this example: char* mydata = "here is some saved data.\n"; int32 mylength = strlen(mydata) + 1; *save = (npsaveddata*) npn_memalloc(
sizeof(npsaveddata)); (*save)->len = mylength; (*save)->buf = (void*) npn_memalloc(mylength); strcpy((*save)->buf, mydata); if you allocate saved instance data in npp_destroy, be sure to allocate memory with this function, since the browser can delete the saved data with the equivalent of npn_memalloc at any time. shutdown when the application no longer needs the plug-in, it is shut down and re...
Plug-in Side Plug-in API - Plugins
instance. np_initialize provides global initialization for a plug-in. npp_new creates a new instance of a plug-in. npp_newstream notifies a plug-in instance of a new data stream. npp_print requests a platform-specific print operation for an embedded or full-screen plug-in. npp_setvalue sets information about the plug-in. npp_setwindow tells the plug-in when a window is created, moved,
sized, or destroyed. np_shutdown provides global deinitialization for a plug-in. npp_streamasfile provides a local file name for the data from a stream. npp_urlnotify notifies the instance of the completion of a url request. npp_write delivers data to a plug-in instance. npp_writeready determines maximum number of bytes that the plug-in can consume. « previousnext » ...
Preferences System
to be loaded in via a dynamic overlay. you should be careful to read the higs for the platforms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate. you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted platform, as well as the height (in em) for platforms where the window
size does not change as the selected panel is changed (e.g. windows). usage in xulrunner applications when calling opendialog() to open a preferences dialog, "toolbar" should be included in the features string. not using "toolbar" will cause the preferences dialog to only display one preference pane. example: var features = "chrome,titlebar,toolbar,centerscreen,modal"; window.opendialog(url, "prefere...
Accessibility Inspector - Firefox Developer Tools
tems include: none — don't show the possible list of issues all issues — check for all types of issues contrast — check for issues with visual contrast keyboard — check for issues with navigating via a keyboard text labels — check for issues with missing text labels when you one of the menu items, firefox scans your document for the type of issues you selected. depending on the
size and complexity of your document, this may take a few seconds. when the scan is complete, the left side of the accessibility inspector panel displays only the items that have that type of issue. in the right side of the panel, the checks subpanel lists the specific issue with the selected node. for each type of issue, there is a learn more link to further information on mdn web docs about the issu...
Inspecting web app manifests - Firefox Developer Tools
successfully, you should end up with a display like the following on the manifest view: from here, you can inspect all the information in the manifest in an easy-to-digest way, making sure that it is all correct. it provides a link to the manifest file at the top which when clicked on brings up the json in a new tab. it also loads all the icon files into the view, so you can see the relative
size of them all, and any other information associated with them. list of manifest members we won't provide an exhaustive list of all the members that can appear in a web manifest here; you can already find that in our web manifest documentation. ...
Index - Firefox Developer Tools
r doesn't generally have to worry about deallocating memory. they can just create and use objects, and when the objects are no longer needed, the runtime takes care of cleaning up, and frees the memory the objects occupied. 42 dominators view starting in firefox 46, the memory tool includes a new view called the dominators view. this is useful for understanding the "retained
size" of objects allocated by your site: that is, the
size of the objects themselves plus the
size of the objects that they keep alive through references. 43 monster example this article describes a very simple web page that we'll use to illustrate some features of the memory tool. 44 tree map view the tree map view provides a visual representation of the sn...
All keyboard shortcuts - Firefox Developer Tools
settings. f1 f1 f1 toggle toolbox between the last 2 docking modes ctrl + shift + d cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font
size ctrl + + cmd + + ctrl + + decrease font
size ctrl + - cmd + - ctrl + - reset font
size ctrl + 0 cmd + 0 ctrl + 0 source editor this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead. to selec...
Basic operations - Firefox Developer Tools
heck the "memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default. taking a heap snapshot to take a snapshot of the heap, click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side. on the left, you'll see an entry for the new snapshot, including its timestamp,
size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded. to save a snapshot click "save": you'll be prompted for a name and location, and the file will be saved with an .fxsnapshot extension. to load a snapshot from an existing .fxsnaps...
Memory - Firefox Developer Tools
ding snapshots recording call stacks analyzing snapshots the tree map view is new in firefox 48, and the dominators view is new in firefox 46. once you've taken a snapshot, there are three main views the memory tool provides: the tree map view shows memory usage as a treemap. the aggregate view shows memory usage as a table of allocated types. the dominators view shows the "retained
size" of objects: that is, the
size of objects plus the
size of other objects that they keep alive through references. if you've opted to record allocation stacks for the snapshot, the aggregate and dominators views can show you exactly where in your code allocations are happening. concepts dominators example pages examples used in the memory tool documentation. monster example dom a...
Inspecting web sockets - Firefox Developer Tools
(by default, except control messages). control (available starting in firefox 76). displays messages for control frames (ping, pong, or close). this filter can be combined with the others, to display, for example, only messages for control frames sent by the browser. columns in the response pane in the response pane, you can choose to show the following information about each frame: data
size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header. expanding each message selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the response pane. ...
Performance Analysis - Firefox Developer Tools
hen loads the site twice: once with an empty browser cache, and once with a primed browser cache. this simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a table and a pie chart. the tables group resources by type, and show the total
size of each resource and the total time it took to load them. the accompanying pie chart shows the relative
size of each resource type. to get back to the network monitor's list of network requests click the "back" button on the left. clicking on a slice of the pie takes you to the network monitor for that run, with a filter automatically applied to see only that resource type. network monitor fea...
Network monitor toolbar - Firefox Developer Tools
ns a file dialog box so you can save the current contents of the network log as a har file with the extension .har. copy all as har copies the current contents of the network log to the clipboard in har format. a second toolbar area at the bottom of the network monitor provides: an icon to launch performance analysis. a summary of this page, including the number of requests, total
size, and total time. network monitor features the following articles cover different aspects of using the network monitor: network request list network request details network traffic recording performance analysis throttling ...
Network request details - Firefox Developer Tools
nection, the details pane shows any associated messages. for more information, see inspecting web sockets. cache tab if the response is cached (i.e. a 304), the cache tab displays details about that cached resource. these details include: last fetched: the date the resource was last fetched fetched count: the number of times in the current session that the resource has been fetched data
size: the
size of the resource. last modified: the date the resource was last modified. expires: the date the resource expires. device: the device the resource was fetched from (e.g. "disk"). html preview if the response is html, a preview of the rendered html appears inside the response tab, above the response payload. timings tab the timings tab provides information about how long each stage...
Select an element - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on. the selected element is shown in the html pane and its css is displayed in the css pane. the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and
size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard. w...
Select and highlight elements - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on. the selected element is shown in the html pane and its css is displayed in the css pane. the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and
size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page. click an element in the html pane to select it: you can also use the arrow keys to move around the dom with the keyboard. w...
Use the Inspector API - Firefox Developer Tools
the inspector - a warning will be shown when leaving the page, since changes made through the inspector are rewritten on reload. bindable events using on: markuploaded called when the left panel has been refreshed, after page change. ready called on first markuploaded. pseudoclass called after toggle of a pseudoclass. layout-change "low-priority change event for things like paint and re
size." ...
Page inspector keyboard shortcuts - Firefox Developer Tools
view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more information is shown for a property and a css file reference is focused). enter return enter global shortcuts these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font
size ctrl + + cmd + + ctrl + + decrease font
size ctrl + - cmd + - ctrl + - reset font
size ctrl + 0 cmd + 0 ctrl + 0 ...
Paint Flashing Tool - Firefox Developer Tools
erty. <body> <div id="container"> <div class="moving-box" id="moving-box-left-margin">transition using margin-left</div> <div class="moving-box" id="moving-box-transform">transition using transform</div> </div> </body> #container { border: 1px solid; } .moving-box { height: 20%; width:20%; margin: 2%; padding: 2%; background-color: blue; color: white; font-
size: 24px; } #moving-box-left-margin { transition: margin-left 4s; } #moving-box-transform { transition: transform 4s; } body:hover #moving-box-left-margin{ margin-left: 74%; } body:hover #moving-box-transform { transform: translate(300%); } to see the transition, move the mouse into the space below: now switch paint flashing on, and try it again. you should see that the margin-left v...
Allocations - Firefox Developer Tools
erfall view contains a link labeled "show allocation triggers". if you click this link, the devtools switches to the allocations view, and selects the region of time from the end of the last gc cycle to the start of the one you clicked on. this shows you all the allocations that collectively triggered this gc event: if you're seeing these problems, consider whether you can reduce the number or
size of the allocations you're making here. for example: can you allocate memory lazily, when it is actually needed, instead of up front? if allocating memory in a loop, can you reuse a single allocation in every loop iteration? ...
Animating CSS properties - Firefox Developer Tools
lliseconds to execute the complete flow. css property cost in the context of the rendering waterfall, some properties are more expensive than others: property type cost examples properties that affect an element's geometry or position trigger a style recalculation, a layout and a repaint. left max-width border-width margin-left font-
size properties that don't affect geometry or position, but are not rendered in their own layer, do not trigger a layout. color properties that are rendered in their own layer don't even trigger a repaint, because the update is handled in composition. transform opacity the css triggers website shows how much of the waterfall is trig...
Settings - Firefox Developer Tools
scratchpad and the style editor. detect indentation auto-indent new lines based on the current indentation. autoclose brackets determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you. indent using spaces when checked, indentation will be performed using spaces, when off, the editor will use tabs instead. tab
size the frequency of tab stops in the editor. select 2, 4, or 8. keybindings choose the default codemirror keybindings or keybindings from one of several popular editors: vim emacs sublime text advanced settings show gecko platform data a setting to control whether or not profiles should include gecko platform symbols. disable http cache disable the browser http cache to sim...
Cookies - Firefox Developer Tools
he cookies present for that origin will be listed in a table. the cookies table has the following columns: name — the name of the cookie. value — the value of the cookie. domain — the domain of the cookie. path — the path property of the cookie. expires / max-age — the time when the cookie will expire. if the cookie is a session cookie, the value of this column will be "session"
size — the
size of the cookie name plus value in bytes. httponly — is this cookie http only? secure — is this cookie a secure cookie? samesite — is this cookie a same-site cookie? same-site cookies allow servers to mitigate the risk of csrf and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain. las...
Style Editor - Firefox Developer Tools
e rules and provides a link to the line of the sheet where the rule is defined. click an item to jump to that rule in the sheet. the condition text of the rule is greyed-out if the media query doesn’t currently apply. the media sidebar works especially well with responsive design view for creating and debugging responsive layouts: from firefox 46 onwards, if an @media rule contains a screen
size in a condition, then it is made clickable: clicking it then re
sizes the screen to that
size using the responsive design view: creating and importing style sheets you can create a new style sheet by clicking the new button in the toolbar. then you can just start entering css into the new editor and watch as the new styles are applied in real time just like changes to the other sheets. you can...
Console messages - Firefox Developer Tools
each message is labeled "reflow" and shows the time taken to execute the reflow. if the reflow is a synchronous reflow triggered from javascript, it also shows a link to the line of code that triggered the reflow. click the link to open the file in the debugger. synchronous and asynchronous reflows if a change is made that invalidates the current layout — for example, the browser window is re
sized or some javascript modifies an element's css — the layout is not recalculated immediately. instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). in this way the browser can save up a collection of invalidating changes and recalculate their effect at once. however, if some javascript code reads a style...
Web console keyboard shortcuts - Firefox Developer Tools
page down through autocomplete suggestions page down page down page down scroll to start of autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end global shortcuts these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font
size ctrl + + cmd + + ctrl + + decrease font
size ctrl + - cmd + - ctrl + - reset font
size ctrl + 0 cmd + 0 ctrl + 0 ...
ANGLE_instanced_arrays.drawArraysInstancedANGLE() - Web APIs
ip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. first a glint specifying the starting index in the array of vector points. count a gl
sizei specifying the number of indices to be rendered. primcount a gl
sizei specifying the number of instances of the range of elements to execute. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if first, count or primcount are negative, a gl.invalid_value error is thrown. if gl.current_program is null, a gl.invalid_operation error...
AesCtrParams - Web APIs
er blocks are not reused from one message to the next, while the counter should ensure that counter blocks are not reused within a single message. note: see appendix b of the nist sp800-38a standard for more information. properties name a domstring. this should be set to aes-ctr. counter a buffersource — the initial value of the counter block. this must be 16 bytes long (the aes block
size). the rightmost length bits of this block are used for the counter, and the rest is used for the nonce. for example, if length is set to 64, then the first half of counter is the nonce and the second half is used for the counter. length a number — the number of bits in the counter block that are used for the actual counter. the counter must be big enough that it doesn't wrap: if the message i...
AesGcmParams - Web APIs
pt() call does not match the original data, the decryption will throw an exception. this gives you a way to authenticate associated data without having to encrypt it. the bit length of additionaldata must be ≤ 264-1. the additionaldata property is optional and may be omitted without compromising the security of the encryption operation. taglength optional a number. this determines the
size in bits of the authentication tag generated in the encryption operation and used for authentication in the corresponding decryption. according to the web crypto specification this must have one of the following values: 32, 64, 96, 104, 112, 120, or 128. the aes-gcm specification recommends that it should be 96, 104, 112, 120 or 128, although 32 or 64 bits may be acceptable in some applications:...
AnalyserNode.getByteFrequencyData() - Web APIs
en requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" output of the current audio input. for more examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...
AudioBuffer() - Web APIs
to determine the length to use for a specific number of seconds of audio, use numseconds * samplerate. numberofchannels: the number of channels for the buffer. ...
AudioBuffer.copyFromChannel() - Web APIs
estination a float32array to copy the channel's samples to. channelnumber the channel number of the current audiobuffer to copy the channel data from. startinchannel optional an optional offset into the source channel's buffer from which to begin copying samples. if not specified, a value of 0 (the beginning of the buffer) is assumed by default. return value undefined. exceptions index
sizeerror one of the input parameters has a value that is outside the accepted range: the value of channelnumber specifies a channel number which doesn't exist (that is, it's greater than or equal to the value of numberofchannels on the channel). the value of startinchannel is outside the current range of samples that already exist in the source buffer; that is, it's greater than its current le...
AudioBuffer.copyToChannel() - Web APIs
the specified channel of the audiobuffer, from the source array. syntax myarraybuffer.copytochannel(source, channelnumber, startinchannel); parameters source a float32array that the channel data will be copied from. channelnumber the channel number of the current audiobuffer to copy the channel data to. if channelnumber is greater than or equal to audiobuffer.numberofchannels, an index_
size_err will be thrown. startinchannel optional an optional offset to copy the data to. if startinchannel is greater than audiobuffer.length, an index_
size_err will be thrown. example var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var anotherarray = new float32array; // copy channel data from second channel of myarraybuffer. myarraybuffer.copyfromchannel(anotherar...
AudioBuffer.getChannelData() - Web APIs
syntax var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var nowbuffering = myarraybuffer.getchanneldata(channel); parameters channel the channel property is an index representing the particular channel to get data for. an index value of 0 represents the first channel. if the channel index value is greater than of equal to audiobuffer.numberofchannels, an index_
size_err exception will be thrown. return value a float32array. example in the following example we create a two second buffer, fill it with white noise, and then play it via an audiobuffersourcenode. the comments should clearly explain what is going on. you can also run the code live, or view the source. var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var button = do...
AudioContext.createJavaScriptNode() - Web APIs
the audiocontext.createjavascriptnode() method creates a javascriptnode which is used for directly manipulating audio data with javascript. important: this method is obsolete, and has been renamed to audiocontext.createscriptprocessor(). see also scriptprocessornode. syntax var jsnode = audioctx.createjavascriptnode(buffer
size, numinputchannels, numoutputchannels); parameters buffer
size the buffer
size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384. it controls the frequency of callbacks asking for a buffer refill. smaller
sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. numoutputchannels the number of output channels in the audio stream. exa...
AudioNode.connect() - Web APIs
thrown. this parameter is not allowed if the destination is an audioparam. return value if the destination is a node, connect() returns a reference to the destination audionode object, allowing you to chain multiple connect() calls. in some browsers, older implementations of this interface return undefined. if the destination is an audioparam, connect() returns undefined. exceptions index
sizeerror the value specified as outputindex or inputindex doesn't correspond to an existing input or output. invalidaccesserror the destination node is not part of the same audio context as the source node. notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the resul...
AudioProcessingEvent - Web APIs
rking example, see our script-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffer
size of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffer
size); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.res...
AudioWorkletGlobalScope - Web APIs
l execution context is shared across the current baseaudiocontext, it's possible to define any other variables and perform any actions allowed in worklets — apart from defining audioworkletprocessor-derived classes. properties currentframe read only returns an integer that represents the ever-increasing current sample-frame of the audio block being processed. it is incremented by 128 (the
size of a render quantum) after the processing of each audio block. currenttime read only returns a double that represents the ever-increasing context time of the audio block being processed. it is equal to the currenttime property of the baseaudiocontext the worklet belongs to. samplerate read only returns a float that represents the sample rate of the associated baseaudiocontext. methods ...
AudioWorkletNode() - Web APIs
e name of a custom parameter and value being its initial value. processoroptions optional any additional data that can be used for custom initialization of the underlying audioworkletprocessor. return value the newly constructed audioworkletnode instance. exceptions notsupportederror the specified options.outputchannelcount is 0 or larger than the current implementation supports. index
sizeerror the length of options.outputchannelcount array does not match options.numberofoutputs. example for a complete example demonstrating user-defined audio processing, see the audioworkletnode page. specifications specification status comment web audio apithe definition of 'audioworkletnode()' in that specification. working draft initial definition. ...
AudioWorkletNodeOptions - Web APIs
at can be used for custom initialization of the underlying audioworkletprocessor. usage notes when creating an audioworkletnode, these options can have various effects. if the number of inputs and number of outputs are both set to 0, a notsupportederror will be thrown and the node construction process aborted. if the length of the outputchannelcount array doesn't match numberofoutputs, an index
sizeerror will be thrown. if outputchannelcount isn't specified, and numberofinputs and numberofoutputs are both 1, the audioworkletnode's initial channel count is set to 1. this has the effect of changing the output channel count to dynamically change to the computed number of channels, based on the input's channel count and the current setting of the audionode property channelcountmode. otherwise,...
Background Tasks API - Web APIs
div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
BaseAudioContext.createAnalyser() - Web APIs
uestanimationframe() to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. for more complete applied examples/information, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code). var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ... ...
BiquadFilterNode.getFrequencyResponse() - Web APIs
the getfrequencyresponse() method of the biquadfilternode interface takes the current filtering algorithm's settings and calculates the frequency response for frequencies specified in a specified array of frequencies. the two output arrays, magresponseoutput and phaseresponseoutput, must be created before calling this method; they must be the same
size as the array of input frequency values (frequencyarray). syntax biquadfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter. magresponseoutput a float32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray. for any freq...
Blob - Web APIs
ther blob's data, use the slice() method. to obtain a blob object for a file on the user's file system, see the file documentation. the apis accepting blob objects are also listed in the file documentation. constructor blob() returns a newly created blob object which contains a concatenation of all of the data in the array passed into the constructor. instance properties blob.prototype.
size read only the
size, in bytes, of the data contained in the blob object. blob.prototype.type read only a string indicating the mime type of the data contained in the blob. if the type is unknown, this string is empty. instance methods blob.prototype.arraybuffer() returns a promise that resolves with an arraybuffer containing the entire contents of the blob as binary data. blob.prototyp...
Body.blob() - Web APIs
the blob() method of the body mixin takes a response stream and reads it to completion. it returns a promise that resolves with a blob. syntax response.blob().then(function(myblob) { // do something with myblob }); parameters none. note: if the response has a response.type of "opaque", the resulting blob will have a blob.
size of 0 and a blob.type of empty string "", which renders it useless for methods like url.createobjecturl. return value a promise that resolves with a blob. example in our fetch request example (run fetch request live), we create a new request using the request() constructor, then use it to fetch a jpg. when the fetch is successful, we read a blob out of the response using blob(), put it into an object url using url.createobjecturl, and then set that url as the s...
ByteLengthQueuingStrategy.ByteLengthQueuingStrategy() - Web APIs
backpressure is applied. return value an instance of the bytelengthqueuingstrategy object. exceptions none. examples const queuingstrategy = new bytelengthqueuingstrategy({ highwatermark: 1 }); const readablestream = new readablestream({ start(controller) { ... }, pull(controller) { ... }, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var
size = queuingstrategy.
size(chunk); specifications specification status comment streamsthe definition of 'bytelengthqueuingstrategy()' in that specification. living standard initial definition. ...
CSSRule - Web APIs
specifies the properties common to all rules, while properties unique to specific rule types are specified in the more specialized interfaces for those rules' respective types. references to a cssrule may be obtained by looking at a cssstylesheet's cssrules list. properties common to all cssrule instances cssrule.csstext represents the textual representation of the rule, e.g. "h1,h2 { font-
size: 16pt }" or "@import 'url'". to access or modify parts of the rule (e.g. the value of "font-
size" in the example) use the properties on the specialized interface for the rule's type. cssrule.parentrule read only returns the containing rule, otherwise null. e.g. if this rule is a style rule inside an @media block, the parent rule would be that cssmediarule. cssrule.parentstylesheet read only ...
CSSStyleDeclaration.setProperty() - Web APIs
th: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-
size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.flo...
CSSStyleSheet.insertRule() - Web APIs
is 0. (in older implementations, this was required. see browser compatibility for details.) return value the newly inserted rule's index within the stylesheet's rule-list. restrictions css has some intuitive and not-so-intuitive restrictions affecting where rules can be inserted. violating them will likely raise a domexception. if index > cssrulelist.length, the method aborts with an index
sizeerror. if rule cannot be inserted at index 0 due to some css constraint, the method aborts with a hierarchyrequesterror. if more than one rule is given in the rule parameter, the method aborts with a syntaxerror. if trying to insert an @import at-rule after a style rule, the method aborts with a hierarchyrequesterror. if rule is @namespace and the rule-list has more than just @import at-rules ...
CSSStyleSheet - Web APIs
ined in the stylesheet. it inherits properties and methods from its parent, stylesheet. a stylesheet consists of a collection of cssrule objects representing each of the rules in the stylesheet. the rules are contained in a cssrulelist, which can be obtained from the stylesheet's cssrules property. for example, one rule might be a cssstylerule object containing a style such as: h1, h2 { font-
size: 16pt; } another rule might be an at-rule such as @import or @media, and so forth. see the notes section for the various ways a cssstylesheet object can be obtained. properties inherits properties from its parent, stylesheet. cssrules read only returns a live cssrulelist which maintains an up-to-date list of the cssrule objects that comprise the stylesheet. this is normally used to ...
Using dynamic styling information - Web APIs
its setattribute method to specify the css property and its value. var el = document.getelementbyid('some-element'); el.setattribute('style', 'background-color:darkblue;'); be aware, however, that setattribute removes all other style properties that may already have been defined in the element's style object. if the some-element element above had an in–line style attribute of say style="font-
size: 18px", that value would be removed by the use of setattribute. ...
CanvasGradient.addColorStop() - Web APIs
the canvasgradient.addcolorstop() method adds a new color stop, defined by an offset and a color, to a given canvas gradient. syntax void gradient.addcolorstop(offset, color); parameters offset a number between 0 and 1, inclusive, representing the position of the color stop. 0 represents the start of the gradient and 1 represents the end; an index_
size_err is raised if the number is outside that range. color a css <color> value representing the color of the stop. a syntax_err is raised if the value cannot be parsed as a css <color> value. examples adding stops to a gradient this example uses the addcolorstop method to add stops to a linear canvasgradient object. the gradient is then used to fill a rectangle. html <canvas id="canvas"></canvas> javascript const canvas = docum...
CanvasGradient - Web APIs
ringcontext2d.createlineargradient() or canvasrenderingcontext2d.createradialgradient(). it can be used as a fillstyle or strokestyle. properties as an opaque object, there is no exposed property. methods there is no inherited method. canvasgradient.addcolorstop() adds a new stop, defined by an offset and a color, to the gradient. if the offset is not between 0 and 1, inclusive, an index_
size_err is raised; if the color can't be parsed as a css <color>, a syntax_err is raised. specifications specification status comment html living standardthe definition of 'canvasgradient' in that specification. living standard ...
CanvasRenderingContext2D.clearRect() - Web APIs
black. note: be aware that clearrect() may cause unintended side effects if you're not using paths properly. make sure to call beginpath() before starting to draw new items after calling clearrect(). syntax void ctx.clearrect(x, y, width, height); the clearrect() method sets the pixels in a rectangular area to transparent black (rgba(0,0,0,0)). the rectangle's corner is at (x, y), and its
size is specified by width and height. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. positive values are to the right, and negative to the left. height the rectangle's height. positive values are down, and negative are up. examples erasing the whole canvas this code snippet er...
CanvasRenderingContext2D.createImageData() - Web APIs
tical axis. height the height to give the new imagedata object. a negative value flips the rectangle around the horizontal axis. imagedata an existing imagedata object from which to copy the width and height. the image itself is not copied. return value a new imagedata object with the specified width and height. the new object is filled with transparent black pixels. errors thrown index
sizeerror thrown if either of the width or height arguments is zero. examples creating a blank imagedata object this snippet creates a blank imagedata object using the createimagedata() method. html <canvas id="canvas"></canvas> javascript the generated object is 100 pixels wide and 50 pixels tall, making 5,000 pixels in all. each pixel within an imagedata object consists of four array value...
CanvasRenderingContext2D.createRadialGradient() - Web APIs
this method returns a canvasgradient. to be applied to a shape, the gradient must first be assigned to the fillstyle or strokestyle properties. note: gradient coordinates are global, i.e., relative to the current coordinate space. when applied to a shape, the coordinates are not relative to the shape's coordinates. ...
CanvasRenderingContext2D.fillRect() - Web APIs
d.fillrect() method of the canvas 2d api draws a rectangle that is filled according to the current fillstyle. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. syntax void ctx.fillrect(x, y, width, height); the fillrect() method draws a filled rectangle whose starting point is at (x, y) and whose
size is specified by width and height. the fill style is determined by the current fillstyle attribute. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. positive values are to the right, and negative to the left. height the rectangle's height. positive values are down, and negative a...
CanvasRenderingContext2D.font - Web APIs
nderingcontext2d.font property of the canvas 2d api specifies the current text style to use when drawing text. this string uses the same syntax as the css font specifier. syntax ctx.font = value; options value a domstring parsed as css font value. the default font is 10px sans-serif. examples using a custom font in this example we use the font property to specify a custom font weight,
size, and family. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas. let f = new fontface('t...
CanvasRenderingContext2D.getImageData() - Web APIs
ative to the left. sh the height of the rectangle from which the imagedata will be extracted. positive values are down, and negative are up. return value an imagedata object containing the image data for the rectangle of the canvas specified. the coordinates of the rectangle's top-left corner are (sx, sy), while the coordinates of the bottom corner are (sx + sw, sy + sh). exceptions index
sizeerror thrown if either sw or sh are zero. securityerror the canvas contains or may contain pixels which were loaded from an origin other than the one from which the document itself was loaded. to avoid securityerror being thrown in this situation, configure cors to allow the source image to be used in this way. see allowing cross-origin use of images and canvas. example getting image data fr...
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
erty to false to retain the pixels' sharpness. note: you can adjust the smoothing quality with the imagesmoothingquality property. syntax ctx.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not. the default value is true. examples disabling image smoothing this example compares three images. the first image is drawn at its natural
size, the second is scaled to 3x and drawn with image smoothing enabled, and the third is scaled to 3x but drawn with image smoothing disabled. html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'htt...
CanvasRenderingContext2D.rect() - Web APIs
that modify the current path, this method does not directly render anything. to draw the rectangle onto a canvas, you can use the fill() or stroke() methods. note: to both create and render a rectangle in one step, use the fillrect() or strokerect() methods. syntax void ctx.rect(x, y, width, height); the rect() method creates a rectangular path whose starting point is at (x, y) and whose
size is specified by width and height. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. positive values are to the right, and negative to the left. height the rectangle's height. positive values are down, and negative are up. examples drawing a rectangle this example creates a re...
CanvasRenderingContext2D.strokeRect() - Web APIs
a rectangle that is stroked (outlined) according to the current strokestyle and other context settings. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. syntax void ctx.strokerect(x, y, width, height); the strokerect() method draws a stroked rectangle whose starting point is at (x, y) and whose
size is specified by width and height. parameters x the x-axis coordinate of the rectangle's starting point. y the y-axis coordinate of the rectangle's starting point. width the rectangle's width. positive values are to the right, and negative to the left. height the rectangle's height. positive values are down, and negative are up. examples a simple stroked rectangle this example draws...
CanvasRenderingContext2D.translate() - Web APIs
s vertically on the grid. parameters x distance to move in the horizontal direction. positive values are to the right, and negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. an unmoved square of the same
size is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically. the first square is shifted by those amounts from its default position. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillr...
Drawing shapes with canvas - Web APIs
draws a filled rectangle. strokerect(x, y, width, height) draws a rectangular outline. clearrect(x, y, width, height) clears the specified rectangular area, making it fully transparent. each of these three functions takes the same parameters. x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle. width and height provide the rectangle's
size. below is the draw() function from the previous page, but now it is making use of these three functions. rectangular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25...
Drawing text - Web APIs
text is filled using the current strokestyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default
size. there are some more properties which let you adjust the way the text gets displayed on the canvas: font = value the current text style being used when drawing text. this string uses the same syntax as the css font property. the default font is 10px sans-serif. textalign = value text alignment setting. possible values: start, end, left, right or center. the default value is start. textbase...
Finale - Web APIs
better and more powerful games that can be run in any standards-compliant web browser. other web apis these apis might be useful when working further with canvas and graphics: webgl advanced api for rendering complex graphics, including 3d. svg scalable vector graphics let you describe images as sets of vectors (lines) and shapes in order to allow them to scale smoothly regardless of the
size at which they're drawn. web audio the web audio api provides a powerful and versatile system for controlling audio on the web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more. questions stack overflow questions tagged with "canvas". comments about this tutorial – the mdn documentation...
Optimizing canvas - Web APIs
tes and use integers instead sub-pixel rendering occurs when you render objects on a canvas without whole values. ctx.drawimage(myimage, 0.3, 0.5); this forces the browser to do extra calculations to create the anti-aliasing effect. to avoid this, make sure to round all co-ordinates used in calls to drawimage() using math.floor(), for example. don’t scale images in drawimage cache various
sizes of your images on an offscreen canvas when loading as opposed to constantly scaling them in drawimage(). use multiple layered canvases for complex scenes in your application, you may find that some objects need to move or change frequently, while others remain relatively static. a possible optimization in this situation is to layer your items using multiple <canvas> elements. for example, let...
Canvas tutorial - Web APIs
duced in webkit by apple for the os x dashboard, <canvas> has since been implemented in browsers. today, all major browsers support it. before you start using the <canvas> element is not very difficult, but you do need a basic understanding of html and javascript. the <canvas> element is not supported in some older browsers, but is supported in recent versions of all major browsers. the default
size of the canvas is 300 pixels × 150 pixels (width × height). but custom
sizes can be defined using the html height and width property. in order to draw graphics on the canvas we use a javascript context object, which creates graphics on the fly. in this tutorial basic usage drawing shapes applying styles and colors drawing text using images transformations compositing and clipping basi...
Canvas API - Web APIs
etelementbyid() method gets a reference to the html <canvas> element. next, the htmlcanvaselement.getcontext() method gets that element's context—the thing onto which the drawing will be rendered. the actual drawing is done using the canvasrenderingcontext2d interface. the fillstyle property makes the rectangle green. the fillrect() method places its top-left corner at (10, 10), and gives it a
size of 150 units wide by 100 tall. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprender...
ContentIndex.getAll() - Web APIs
sponding html document. needs to be under the scope of the current service worker. category: optional a string defining the category of content. can be: '' an empty string, this is the default. homepage article video audio icons: optional an array of image resources, defined as an object with the following data: src: a url string of the source image.
sizes: optional a string representation of the image
size. type: optional the mime type of the image. exceptions no exceptions are thrown. if there are no items in the content index, an empty array is returned. examples the below example shows an asynchronous function that retrieves items within the content index and iterates over each entry, building a list for the interface. asy...
ContentIndex - Web APIs
ere we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index. ...
Content Index API - Web APIs
ere we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index. ...
ConvolverNode.buffer - Web APIs
or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect. this is normally a simple recording of as-close-to-an-impulse as can be found in the space you want to model. for example, if you want to model the reverb in your bathroom, you might set up a microphone near the door to record the sound of a balloon pop or synthe
sized impulse from the sink. that audio recording could then be used as the buffer. this audiobuffer must have the same sample-rate as the audiocontext or an exception will be thrown. at the time when this attribute is set, the buffer and the state of the attribute will be used to configure the convolvernode with this impulse response having the given normalization. the initial value of this attribut...
CountQueuingStrategy.CountQueuingStrategy() - Web APIs
re backpressure is applied. return value an instance of the countqueuingstrategy object. exceptions none. examples const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const writablestream = new writablestream({ // implement the sink write(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var
size = queuingstrategy.
size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy()' in that specification. living standard initial definition. ...
CustomElementRegistry.define() - Web APIs
.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-
size: 0.8rem;' + 'width: 200px;' + 'display: inline-block;' + 'border: 1px solid black;' + 'padding: 10px;' + 'background: white;' + 'border-radius: 10px;' + 'opacity: 0;' + 'trans...
DOMError - Web APIs
the domerror interface describes an error object that contains an error name. properties domerror.name read only returns a domstring representing one of the error type names (see below). domerror.message read only returns a domstring representing a message or description associated with the given error type name. error types type description index
sizeerror the index is not in the allowed range (e.g. thrown in a range object). hierarchyrequesterror the node tree hierarchy is not correct. wrongdocumenterror the object is in the wrong document. invalidcharactererror the string contains invalid characters. nomodificationallowederror the object can not be modified. notfounderror the object can not...
DOMException - Web APIs
r name. error names common error names are listed here. some apis define their own sets of names, so this is not necessarily a complete list. note: because historically the errors were identified by a numeric value that corresponded with a named variable defined to have that value, some of the entries below indicate the legacy code value and constant name that were used in the past. index
sizeerror the index is not in the allowed range. for example, this can be thrown by the range object. (legacy code value: 1 and legacy constant name: index_
size_err) hierarchyrequesterror the node tree hierarchy is not correct. (legacy code value: 3 and legacy constant name: hierarchy_request_err) wrongdocumenterror the object is in the wrong document. (legacy code value: 4 and legacy constant na...
DOMMatrix - Web APIs
otherwise, a typeerror exception is thrown. frommatrix() creates a new mutable dommatrix object given an existing matrix or a dommatrixinit dictionary which provides the values for its properties. usage notes the matrix defined by the dommatrix interface is comprised of four rows of four columns each. while it's beyond the scope of this article to explain the mathematics involved, this 4×4
size is enough to describe any transformation you might apply to either 2d or 3d geometries. [m11m21m31m41m12m22m32m42m13m23m33m43m14m24m34m44]\left [ \begin{matrix} m_{11} & m_{21} & m_{31} & m_{41} \\ m_{12} & m_{22} & m_{32} & m_{42} \\ m_{13} & m_{23} & m_{33} & m_{43} \\ m_{14} & m_{24} & m_{34} & m_{44} \end{matrix} \right ] the positions of the 16 elements (m11 through m44) which comprise t...
Binary strings - Web APIs
ining only ascii characters (i.e., characters whose code point does not exceed 127). for instance, the string "hello world!" belongs to the ascii subset, while the string "ÀÈÌÒÙ" does not. a binary string is a concept similar to the ascii subset, but instead of limiting the range to 127, it allows code points until 255. its purpose however is not to represent characters, but binary data. the
size of the data so represented is twice as big as it would be in normal binary format, however this will not be visible to the final user, since the length of javascript strings is calculated using two bytes as the unit. binary strings are not part of the javascript language design. however at least one native function requires binary strings as its input, btoa(): invoking it on a string that contai...
DataTransfer.setDragImage() - Web APIs
enter, use values that are half the width and height of the image. this method must be called in the dragstart event handler. syntax void datatransfer.setdragimage(img | element, xoffset, yoffset); arguments img | element an image element element to use for the drag feedback image. if element is an img element, then set the drag data store bitmap to the element's image (at its intrinsic
size); otherwise, set the drag data store bitmap to an image generated from the given element (the exact mechanism for doing so is not currently specified). xoffset a long indicating the horizontal offset within the image. yoffset a long indicating the vertical offset within the image. return value void example this example shows how to use the setdragimage() method. note the example ref...
Document: DOMContentLoaded event - Web APIs
>reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconte...
Document.cookie - Web APIs
o. keep in mind that the more cookies you have, the more data will be transferred between the server and the client for each request. this will make each request slower. it is highly recommended for you to use whatwg dom storage if you are going to keep "client-only" data. rfc 2965 (section 5.3, "implementation limits") specifies that there should be no maximum length of a cookie's key or value
size, and encourages implementations to support arbitrarily large cookies. each browser's implementation maximum will necessarily be different, so consult individual browser documentation. the reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstorage): the ser...
Document: readystatechange event - Web APIs
>reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconte...
EXT_color_buffer_float - Web APIs
to render a variety of floating point formats. webgl extensions are available using the webglrenderingcontext.getextension() method. for more information, see also using extensions in the webgl tutorial. availability: this extension is available to webgl 2 contexts only. for webgl 1, see the ext_color_buffer_half_float and webgl_color_buffer_float extensions. extended methods the following
sized formats become color-renderable: gl.r16f, gl.rg16f, gl.rgba16f, gl.r32f, gl.rg32f, gl.rgba32f, gl.r11f_g11f_b10f. color-renderable means: the webglrenderingcontext.renderbufferstorage() method now accepts these formats. framebuffers with attached textures of these formats may now be framebuffer_complete. examples gl must be a webgl2renderingcontext. this extension does not work...
EXT_sRGB - Web APIs
the functionality of this extension is available on the webgl2 context by default. the constants in webgl2 are: gl.srgb, gl.srgb8, gl.srgb8_alpha8 and gl.framebuffer_attachment_color_encoding. constants this extension exposes the following constants, which can be used in the teximage2d(), texsubimage2d(), renderbufferstorage() and getframebufferattachmentparameter() methods. ext.srgb_ext un
sized srgb format that leaves the precision up to the driver. ext.srgb_alpha_ext un
sized srgb format with un
sized alpha component. ext.srgb8_alpha8_ext
sized (8-bit) srgb and alpha formats. ext.framebuffer_attachment_color_encoding_ext returns the framebuffer color encoding (gl.linear or ext.srgb_ext). examples var ext = gl.getextension('ext_srgb'); var texture = gl.createtexture(); gl.bindt...
Element: DOMMouseScroll event - Web APIs
the value's sign. note: trusted events are never sent with a value of 0 for detail. trusted events are never fired with 0. note: if the platform's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is computed using the line height of the nearest scrollable ancestor element of the event's target. if that element's font
size is smaller than mousewheel.min_line_scroll_amount, that preference's value is used as the line height. ...
Element: auxclick event - Web APIs
ptured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied. html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-
size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; } result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice). specification specification status ui eventsthe definition of 'auxcl...
Element: compositionend event - Web APIs
xample" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...
Element: compositionstart event - Web APIs
xample" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...
Element: compositionupdate event - Web APIs
xample" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } input[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => ...
Element: error event - Web APIs
ass="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const im...
Element.getBoundingClientRect() - Web APIs
syntax domrect = element.getboundingclientrect(); value the returned value is a domrect object which is the union of the rectangles returned by getclientrects() for the element, i.e., the css border-boxes associated with the element. the result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. ...
Element.getClientRects() - Web APIs
} span, li, th, td { border: 1px solid green; } javascript the javascript code draws the client rects for all html elements that have css class withclientrectsoverlay assigned. function addclientrectsoverlay(elt) { /* absolutely position a div over each client rect so that its border width is the same as the rectangle's width. note: the overlays will be out of place if the user re
sizes or zooms. */ var rects = elt.getclientrects(); for (var i = 0; i != rects.length; i++) { var rect = rects[i]; var tablerectdiv = document.createelement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.sc...
Element: keydown event - Web APIs
g to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element. ...
Element: keyup event - Web APIs
g to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element. ...
Element.shadowRoot - Web APIs
root to an existing element. syntax var shadowroot = element.shadowroot; value a shadowroot object instance, or null if the associated shadow root was attached with its mode set to closed. (see element.attachshadow() for further details). examples the following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a
size and color specified in the element's attributes. inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updatestyle(), which actually applies the
size and color to the element. you'll see that we are passing it this (the custom element itself) as a parameter. connectedcallback() { console.log('custom square element ...
ElementCSSInlineStyle.style - Web APIs
yle values, it is preferred to use the individual properties of style (as in elt.style.color = '...') as using elt.style.csstext = '...' or elt.setattribute('style', '...') sets the complete inline style for the element by overriding the existing inline styles. note that the property names are in camel-case and not kebab-case while setting the style using elt.style.<property> (i.e., elt.style.font
size, not elt.style.font-
size). a style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; bo...
Event.eventPhase - Web APIs
ce</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-
size:80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function remo...
Event.msConvertURL() - Web APIs
return; } for (var i = 0; i < filelist.length; i++) { var file = filelist[i]; var url = url.createobjecturl(file); if (evt.converturl) { // use standard if available. evt.converturl(file, "specified", url); } else { evt.msconverturl(file, "specified", url); } console.log("local file: " + file.name + " (" + file.
size + ")"); bloblist.push(file); } // for } // handlepaste see also microsoft api extensions ...
EventTarget.addEventListener() - Web APIs
). for ie, we modify the preceding example to: if (el.addeventlistener) { el.addeventlistener('click', modifytext, false); } else if (el.attachevent) { el.attachevent('onclick', modifytext); } there is a drawback to attachevent(): the value of this will be a reference to the window object, instead of the element on which it was fired. the attachevent() method could be paired with the onre
size event to detect when certain elements in a web page were re
sized. the proprietary mselementre
size event, when paired with the addeventlistener method of registering event handlers, provides similar functionality as onre
size, firing when certain html elements are re
sized. polyfill you can work around addeventlistener(), removeeventlistener(), event.preventdefault(), and event.stoppropagation() n...
EventTarget - Web APIs
methods eventtarget.addeventlistener() registers an event handler of a specific event type on the ev...
Using Fetch - Web APIs
ed with request.mode no-cors. response: guard for a headers obtained from a response (response.headers). immutable: mostly used for serviceworkers; renders a headers object read-only. note: you may not append or set a request guarded headers’ content-length header. similarly, inserting set-cookie into a response header is not allowed: serviceworkers are not allowed to set cookies via synthe
sized responses. response objects as you have seen above, response instances are returned when fetch() promises are resolved. the most common response properties you'll use are: response.status — an integer (default value 200) containing the response status code. response.statustext — a string (default value "ok"), which corresponds to the http status code message. response.ok — seen in...
FileReader: abort event - Web APIs
t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { re
size: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...
FileReader: load event - Web APIs
t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { re
size: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...
FileReader: loadend event - Web APIs
t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { re
size: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...
FileReader: loadstart event - Web APIs
t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { re
size: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...
FileReader: progress event - Web APIs
t-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { re
size: none; } js const fileinput = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") {...
FileSystemEntry - Web APIs
resents a file. if it's not a file, this value is false. name read only a usvstring containing the name of the entry (the final part of the path, after the last "/" character). methods this interface defines the following methods. copyto() copies the file or directory to a new location on the file system. getmetadata() obtains metadata about the file, such as its modification date and
size. getparent() returns a filesystemdirectoryentry representing the entry's parent directory. moveto() moves the file or directory to a new location on the file system, or renames the file or directory. remove() removes the specified file or directory. you can only remove directories which are empty. tourl() creates and returns a url which identifies the entry. this url uses the url scheme "...
FullscreenOptions.navigationUI - Web APIs
value the value of the navigationui property must be one of the following strings. the default is "auto". "hide" the browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element. "show" the browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived
size of the screen) will be clamped to leave room for this user interface. "auto" the browser will choose which of the above settings to apply. this is the default value. example in this example, the entire document is placed into full-screen mode by calling requestfullscreen() on the document's document.documentelement, which is the document's root <html> element. let elem = document.documentel...
Guide to the Fullscreen API - Web APIs
ode checks for the existence of the requestfullscreen() method before calling it. presentation differences it's worth noting a key difference here between the gecko and webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". webkit doesn't do this; instead, it centers the fullscreen element at the same
size in a screen that's otherwise black. to get the same fullscreen behavior in webkit, you need to add your own "width: 100%; height: 100%;" css rules to the element yourself: #myvideo:-webkit-full-screen { width: 100%; height: 100%; } on the other hand, if you're trying to emulate webkit's behavior on gecko, you need to place the element you want to present inside another element, which you'l...
Using the Gamepad API - Web APIs
yid("controller" + j); var buttons = d.getelementsbyclassname("button"); for (i = 0; i < controller.buttons.length; i++) { var b = buttons[i]; var val = controller.buttons[i]; var pressed = val == 1.0; if (typeof(val) == "object") { pressed = val.pressed; val = val.value; } var pct = math.round(val * 100) + "%"; b.style.background
size = pct + " " + pct; if (pressed) { b.classname = "button pressed"; } else { b.classname = "button"; } } var axes = d.getelementsbyclassname("axis"); for (i = 0; i < controller.axes.length; i++) { var a = axes[i]; a.innerhtml = i + ": " + controller.axes[i].tofixed(4); a.setattribute("value", controller.axes[i] + 1); } } req...
GlobalEventHandlers.onanimationcancel - Web APIs
ml <div class="main"> <div id="box" onanimationcancel="handlecancelevent(event);"> <div id="text">box</div> </div> </div> <div class="button" id="togglebox"> hide the box </div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; 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 ...
GlobalEventHandlers.onchange - Web APIs
syntax target.onchange = functionref; functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it. ...
GlobalEventHandlers.oninput - Web APIs
each alteration to an element's value. syntax target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents. ...
GlobalEventHandlers.onscroll - Web APIs
croll handler can be assigned to an object at a time. for greater flexibility, you can pass a scroll event to the eventtarget.addeventlistener() method instead. example this example monitors scrolling on a <textarea>, and logs the element's vertical scroll position accordingly. html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-
size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment html living standardthe definition of 'onscroll' in that specification. ...
GlobalEventHandlers.ontransitioncancel - Web APIs
and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. in addition, we also use a click event to make the box dissappear (display: none;), showing how it triggers the transitioncancel event to fire. html this simply creates a <div> which we'll style with css below to make into a box that re
sizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and
size change, and causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color:...
GlobalEventHandlers.ontransitionend - Web APIs
nds and the animation begins. example in this example, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition. this could also be used to trigger animations or other effects, to allow chaining of reactions. html this simply creates a <div> which we'll style with css below to make into a box that re
sizes and changes color and such. <div class="box"></div> css the css below styles the box and applies a transition effect which makes the box's color and
size change, and causes the box to rotate, while the mouse cursor hovers over it. .box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color:...
GlobalEventHandlers - Web APIs
is raised. globaleventhandlers.onprogress is an eventhandler representing the code to be called when the progress event is raised. globaleventhandlers.onratechange is an eventhandler representing the code to be called when the ratechange event is raised. globaleventhandlers.onreset is an eventhandler representing the code to be called when the reset event is raised. globaleventhandlers.onre
size is an eventhandler representing the code to be called when the re
size event is raised. globaleventhandlers.onscroll is an eventhandler representing the code to be called when the scroll event is raised. globaleventhandlers.onseeked is an eventhandler representing the code to be called when the seeked event is raised. globaleventhandlers.onseeking is an eventhandler representing the code to...
HTMLBaseFontElement - Web APIs
fied in the hexadecimal #rrggbb format. htmlbasefontelement.face is a domstring representing a list of one or more font names. the document text in the default style is rendered in the first font face that the client's browser supports. if no font listed is installed on the local system, the browser typically defaults to the proportional or fixed-width font for that system. htmlbasefontelement.
size is a domstring representing the font
size as either a numeric or relative value. numeric values range from 1 to 7 with 1 being the smallest and 3 the default. relative value starts with a '+' or a '-'. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment document object model (dom) level 2 html specifi...
HTMLCanvasElement.height - Web APIs
the htmlcanvaselement.height property is a positive integer reflecting the height html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used. this is one of the two properties, the other being htmlcanvaselement.width, that controls the
size of the canvas. syntax var pxl = canvas.height; canvas.height = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the height of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.height); // 300 specifications specification status comment html living standardthe definit...
HTMLCanvasElement.toDataURL() - Web APIs
if the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported. chrome also supports the image/webp type. ...
HTMLCanvasElement.width - Web APIs
the htmlcanvaselement.width property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. this is one of the two properties, the other being htmlcanvaselement.height, that controls the
size of the canvas. syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); // 300 specifications specification status comment html living standardthe definition o...
HTMLElement.hidden - Web APIs
here and do awesome things awesomely to make the world more awesome!</p> </div> css the content is styled using the css below. .panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-
size: 175%; } result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification. living standard html 5.1the definition of 'htmlelement.hidden' in that specification. recommendation html5the definition of 'htmlelement.hidden' in that specification. recommendation ...
HTMLFontElement - Web APIs
implements the document object model (dom) representation of the font element. the html font element <font> defines the font
size, font face and color of text. properties inherits properties from its parent, htmlelement. htmlfontelement.color is a domstring that reflects the color html attribute, containing either a named color or a color specified in the hexadecimal #rrggbb format. htmlfontelement.face is a domstring that reflects the face html attribute, containing a comma-separated list of one or more font names. htmlfontelement.
size is a domstring that reflects the
size html attribute, containing either a font
size number ranging from 1 to 7 or a relative
size to the
size attribute of the <basefont> element, for example -2 or +1. methods no specific method; inherits methods...
HTMLFrameSetElement - Web APIs
raised. windoweventhandlers.onpagehide is an eventhandler representing the code to be called when the pagehide event is raised. windoweventhandlers.onpageshow is an eventhandler representing the code to be called when the pageshow event is raised. windoweventhandlers.onpopstate is an eventhandler representing the code to be called when the popstate event is raised. windoweventhandlers.onre
size is an eventhandler representing the code to be called when the re
size event is raised. windoweventhandlers.onstorage is an eventhandler representing the code to be called when the storage event is raised. windoweventhandlers.onunload is an eventhandler representing the code to be called when the unload event is raised. specifications specification status comment ht...
HTMLImageElement.loading - Web APIs
initial page load. they justt don't affect the timing of the load event. that means that when load fires, it's possible that any lazy-loaded images located in the visual viewport may not yet be visible. preventing element shift during image lazy loads when an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the browser will determine the final
size of the <img> element based on the style and intrinsic
size of the image, then reflow the document as needed to update the positions of elements based on any
size change made to the element to fit the image. to prevent this reflow from occurring, you should explicitly specify the
size of the image's presentation using the image element's width and height attributes. by establishing the intrinsic ...
HTMLImageElement.lowSrc - Web APIs
ity might have a lowsrc version saved at 15%. reduced color depth; a primary image in 32-bit color might have an alternate image in 8-bit color. important: the lowsrc property is obsolete and should not be used. instead, you should use an image format which loads progressively (such as progressive jpeg). or simply make sure your images are all well-optimized and balanced for appearance versus
size. usage notes lowsrc is a strange case. it was never technically part of the html specification (it was a mozilla extension to html); however, html 5 does list it among the obsolete attributes. 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 se...
HTMLImageElement.srcset - Web APIs
entifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances. each image candidate string contains an image url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property. the srcset property, along with the
sizes property, are a crucial component in designing responsive web sites, as they can be used together to make pages that use appropriate images for the rendering situation. syntax htmlimageelement.srcset = imagecandidatestrings; let srcset = htmlimageelement.srcset; value a usvstring containing a comma-separated list of one or more image candidate strings to be used when determining which image...
HTMLInputElement.select() - Web APIs
the htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field. syntax element.select(); example click the button in this example to select all the text in the <input> element. html <input type="text" id="text-box"
size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); } result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus(). in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <i...
HTMLInputElement.setRangeText() - Web APIs
text. "start"moves the selection to just before the inserted text. "end" moves the selection to just after the inserted text. "preserve" attempts to preserve the selection. this is the default. example click the button in this example to replace part of the text in the text box. the newly inserted text will be highlighted (selected) afterwards. ...
HTMLInputElement.setSelectionRange() - Web APIs
ptional a string indicating the direction in which the selection is considered to have been performed. possible values: "forward" "backward" "none" if the direction is unknown or irrelevant. default value. example click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla"). ...
HTMLSelectElement.selectedOptions - Web APIs
selected, the collection is empty and returns a length of 0. example in this example, a <select> element with a number of options is used to let the user order various food items. ...
HTMLTableElement.deleteRow() - Web APIs
the row that should be deleted. however, the special index -1 can be used to remove the very last row of a table. return value no return value errors thrown if the number of the row to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the table, the exception index_
size_err is thrown. example this example uses javascript to delete a table's second row. html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> <tr><td>cell 3.1</td><td>cell 3.2</td><td>cell 3.3</td></tr> </table> javascript let table = document.queryselector('table'); // delete second row table.deleterow(1); ...
HTMLTableElement.insertRow() - Web APIs
the case if document.createelement() had been used to create the new <tr> element. syntax var newrow = htmltableelement.insertrow(index); htmltableelement is a reference to an html <table> element. parameters index optional the row index of the new row. if index is -1 or equal to the number of rows, the row is appended as the last row. if index is greater than the number of rows, an index
sizeerror exception will result. if index is omitted it defaults to -1. return value newrow is an htmltablerowelement that references the new row. example this example uses insertrow(-1) to append a new row to a table. we then use htmltablerowelement.insertcell() to insert a new cell in the new row. (to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the ...
HTMLTableRowElement.insertCell() - Web APIs
insertcell() to create a new <th> element though. syntax var newcell = htmltablerowelement.insertcell(index); htmltablerowelement is a reference to an html <tr> element. parameters index optional index is the cell index of the new cell. if index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. if index is greater than the number of cells, an index
sizeerror exception will result. if index is omitted it defaults to -1. return value newcell is an htmltablecellelement that references the new cell. example this example uses htmltableelement.insertrow() to append a new row to a table. we then use insertcell(0) to insert a new cell in the new row. (to be valid html, a <tr> must have at least one <td> element.) finally, we add some text to the c...
Drag Operations - Web APIs
rag feedback image. event.datatransfer.setdragimage(image, xoffset, yoffset); three arguments are necessary. the first is a reference to an image. this reference will typically be to an <img> element, but it can also be to a <canvas> or any other element. the feedback image will be generated from whatever the image looks like on screen, although for images, they will be drawn at their original
size. the second and third arguments to the setdragimage() method are offsets where the image should appear relative to the mouse pointer. it is also possible to use images and canvases that are not in a document. this technique is useful when drawing custom drag images using the canvas element, as in the following example: function dragwithcustomimage(event) { const canvas = document.createelemen...
History.pushState() - Web APIs
with the new history entry created by pushstate(). whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. the state object can be anything that can be serialized. because firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a
size limit of 640k characters on the serialized representation of a state object. if you pass a state object whose serialized representation is larger than this to pushstate(), the method will throw an exception. if you need more space than this, you're encouraged to use sessionstorage and/or localstorage. title most browsers currently ignore this parameter, although they may use it in the future. p...
Working with the History API - Web APIs
with the new history entry created by pushstate(). whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. the state object can be anything that can be serialized. because firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a
size limit of 640k characters on the serialized representation of a state object. if you pass a state object whose serialized representation is larger than this to pushstate(), the method will throw an exception. if you need more space than this, you're encouraged to use sessionstorage and/or localstorage. title all browsers but safari currently ignore this parameter, although they may use it in ...
IIRFilterNode.getFrequencyResponse() - Web APIs
the getfrequencyresponse() method of the iirfilternode interface takes the current filtering algorithm's settings and calculates the frequency response for frequencies specified in a specified array of frequencies. the two output arrays, magresponseoutput and phaseresponseoutput, must be created before calling this method; they must be the same
size as the array of input frequency values (frequencyarray). syntax iirfilternode.getfrequencyresponse(frequencyarray, magresponseoutput, phaseresponseoutput); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter. magresponseoutput a float32array to receive the computed magnitudes of the freqency response for each frequency value in the frequencyarray. phaseresponseoutp...
ImageCapture.getPhotoCapabilities() - Web APIs
lves with a photocapabilities object containing the ranges of available configuration options. syntax const capabilitiespromise = imagecaptureobj.getphotocapabilities() return value a promise that resolves with a photocapabilities object. example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the
size of an input range. this example also shows how the imagecapture object is created using a mediastreamtrack retrieved from a device's mediastream. const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideo...
ImageCapture.getPhotoSettings() - Web APIs
h: the desired image width as an integer. the user agent selects the closest width value to this setting if it only supports discrete widths. redeyereduction: a boolean indicating whether the red-eye reduction should be used if it is available. example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotosettings() to modify the
size of an input range. this example also shows how the imagecapture object is created using a mediastreamtrack retrieved from a device's mediastream. const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideot...
ImageData() - Web APIs
containing the underlying pixel representation of the image. if no such array is given, an image with a transparent black rectangle of the specified width and height will be created. width an unsigned long representing the width of the image. height an unsigned long representing the height of the image. this value is optional if an array is given: the height will be inferred from the array's
size and the given width. return value a new imagedata object. errors thrown index
sizeerror thrown if array is specified, but its length is not a multiple of (4 * width) or (4 * width * height). examples creating a blank imagedata object this example creates an imagedata object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels. let imagedata = new imagedata(...
ImageData - Web APIs
e underlying pixel data of an area of a <canvas> element. it is created using the imagedata() constructor or creator methods on the canvasrenderingcontext2d object associated with a canvas: createimagedata() and getimagedata(). it can also be used to set a part of the canvas by using putimagedata(). constructors imagedata() creates an imagedata object from a given uint8clampedarray and the
size of the image it contains. if no array is given, it creates an image of a transparent black rectangle. note that this is the most common way to create such an object in workers as createimagedata() is not available there. properties imagedata.data read only is a uint8clampedarray representing a one-dimensional array containing the data in the rgba order, with integer values between 0 and 25...
Browser storage limits and eviction criteria - Web APIs
r: persistent. basically, the persistent folder was renamed to permanent a while ago to keep upgrades/migration simpler. note: users shouldn’t add their own directories or files under <profile>/storage. this will cause storage initialization to fail; for example, open() will fire an error event. storage limits the maximum browser storage space is dynamic — it is based on your hard drive
size. the global limit is calculated as 50% of free disk space. in firefox, an internal browser tool called the quota manager keeps track of how much disk space each origin is using up, and deletes data if necessary. so if your hard drive is 500 gb, then the total storage for a browser is 250 gb. if this is exceeded, a process called origin eviction comes into play, deleting an entire origin's worth ...
KeyboardLayoutMap - Web APIs
.entries read only returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). keyboardlayoutmap.keys read only returns a new array iterator object that contains the keys for each index in the array. keyboardlayoutmap.
size read only returns the number of elements in the keyboardlayoutmap object. keyboardlayoutmap.values read only returns a new array iterator object that contains the values for each index in the keyboardlayoutmap object. methods keyboardlayoutmap.foreach() read only executes a provided function once for each element of keyboardlayoutmap. keyboardlayoutmap.get() returns the elem...
LargestContentfulPaint - Web APIs
uring load. properties largestcontentfulpaint.element the element that is the current largest contentful paint. largestcontentfulpaint.rendertime the time the element was rendered to the screen. may not be available if the element is a cross-origin image loaded without the timing-allow-origin header. largestcontentfulpaint.loadtime the time the element was loaded. largestcontentfulpaint.
size the intrinsic
size of the element returned as the area (width * height). largestcontentfulpaint.id the id of the element. this property returns an empty string when there is no id. largestcontentfulpaint.url if the element is an image, the request url of the image. methods largestcontentfulpaint.tojson() returns the above properties as json. examples the following example shows how ...
Location - Web APIs
hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-
size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; left:50%; margin-left:-50%; font-
size:40%; line-height:1.5; background:black;} [title]:hover:before, :target:before...
LockedFile.readAsArrayBuffer() - Web APIs
ge in the future. summary the readasarraybuffer method is used to read the content of the lockedfile object and provide the result of that reading as an arraybuffer. in many ways, it performs like the filereader.readasarraybuffer() method. the reading operation starts at the position given by the lockedfile.location property. syntax var request = instanceoflockedfile.readasarraybuffer(
size); parameters
size a number representing the number of bytes to read in the file. return a filerequest object to handle the success or failure of the operation. in case of success, the request's result is an arraybuffer representing the data that have been read. specifications specification status comment filesystem api editor's draft draft proposal ...
LockedFile.readAsText() - Web APIs
s and the behavior may change in the future. summary the readastext method is used to read the content of the lockedfile object and provide the result of that reading as a string. in many ways, it performs like the filereader.readastext() method. the reading operation starts at the position given by the lockedfile.location property. syntax var request = instanceoflockedfile.readastext(
size[, encoding]); parameters
size a number representing the number of bytes to read in the file. encoding optional a string indicating the encoding to use for the returned data. by default, utf-8 is assumed if this parameter is not specified. return a filerequest object to handle the success or failure of the operation. in case of success, the request's result is a string representing the d...
LockedFile - Web APIs
pointer within the file. events handler lockedfile.oncomplete the complete event is triggered each time a read or write operation is successful. lockedfile.onabort the abort event is triggered each time the abort() method is called. lockedfile.onerror the error event is triggered each time something goes wrong. methods lockedfile.getmetadata() allows to retrieve the file metadata (
size and date of the last modification). returns a filerequest. lockedfile.readasarraybuffer() allows to retrieve a part of the content of the file as an arraybuffer. returns a filerequest object. lockedfile.readastext() allows to retrieve a part of the content of the file as a string. returns a filerequest object. lockedfile.write() allows to write some data in the file starting at the location...
MediaImage - Web APIs
the media session api's mediaimage dictionary describes the images associated with the media resource mediametadata. its contents can be displayed by the user agent in appropriate contexts, like player interface to show the current playing video or audio track. properties src the url from which user agent can fetch the image's data.
sizes specifies the resource in multiple
sizes so that user agent does not have to scale a single image. type the mime type hint for the user agant. note that it is just a hint so that user agent may ignore images of types it does not support; user agent still may use mime type sniffing after downloading the image to determine its type. specifications specification status comment media session standardthe definition of 'medi...
MediaKeyStatusMap - Web APIs
methods mediakeystatusmap.entries() read only returns a new iterator object containing an array of [key, value] for each element in the status map, in insertion order. mediakeystatusmap.foreach(callback[, argument]) read only calls callback once for each key-value pair in the status map, in insertion order. if argument is present it will be passed to the callback. ...
MediaSettingsRange - Web APIs
the mediasettingsrange interface of the the mediastream image capture api provides the possible range and value
size of photocapabilities.imageheight and photocapabilities.imagewidth. a photocapabilities object can be retrieved by calling imagecapture.photocapabilities(). properties mediasettingsrange.max returns the maximum value of this settings. mediasettingsrange.min returns the minimum value of this setting. mediasettingsrange.step returns the minimum difference between consecutive values of this setting. example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the
size of an input range. const input = document.queryselector('input[type="range"]'); var imagecaptu...
MediaStreamTrack.getConstraints() - Web APIs
or application has specified are required or acceptable for the included constrainable properties. constraints can be used to ensure that the media meets certain guidelines you prefer. for example, you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or acceptable
sizes or ranges of
sizes. see capabilities, constraints, and settings for details on how to work with constrainable properties. syntax const constraints = track.getconstraints() return value a mediatrackconstraints object which indicates the constrainable properties the web site or app most recently set using applyconstraints(). the properties in the returned object are listed in the same order as...
MediaStream Image Capture API - Web APIs
conversely, the api allows the capabilities to be configured within the constraints what the device allows. mediastream image capture concepts and usage the process of retrieving an image or video stream happens as described below. ...
Using the MediaStream Recording API - Web APIs
eckbox to toggle it checked/unchecked. in web dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. ...
MediaStream Recording API - Web APIs
// optional frames per second argument. var stream = canvas.capturestream(25); var recordedchunks = []; console.log(stream); var options = { mimetype: "video/webm; codecs=vp9" }; mediarecorder = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function handledataavailable(event) { console.log("data-available"); if (event.data.
size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ... } } function download() { var blob = new blob(recordedchunks, { type: "video/webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; a.
Transcoding assets for Media Source Extensions - Web APIs
mp4 file is not guaranteed to work with mse. this means that metadata within the container is spread out and not lumped together. to check whether an mp4 file is a proper mp4 stream, you can again use the mp4info utility to list the atoms of an mp4. note: the fragmented version is slightly larger than the original, due to additional metadata spread throughout the file. this is usually a file
size increase of 1 percent or less. fragmenting if you have an asset that is not already an mp4, ffmpeg can handle emitting a properly fragmented mp4 during the transcode process, with the -movflags frag_keyframe+empty_moov command line flag: $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly ...
Microsoft API extensions - Web APIs
msstereo3dpackingmode msstereo3drendermode onmsvideoformatchanged onmsvideoframestepcompleted onmsvideooptimallayoutchanged msfirstpaint pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementre
size document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols msputpropertyenabled mswriteprofilermark ...
MutationObserver - Web APIs
cations until and unless observe() is called again. observe() configures the mutationobserver to begin receiving notifications through its callback function when dom changes matching the given options occur. takerecords() removes all pending notifications from the mutationobserver's notification queue and returns them in a new array of mutationrecord objects. mutation observer & customize re
size event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post. // select the node that will be observed for mutations const targetnode = document.getelementbyid('some-id'); // options for the observer (which mutations to observe) const config = { attributes: true, childlist: true, subtree: true }; // callback function to execut...
msSaveBlob - Web APIs
saving file. return value true is returned as long as the download notification bar is displayed, or false if a failure occured. notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header, where x-download-options removes the file open button from the browser file download dialog: content-length: <blob.
size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> x-download-options: noopen specifications not part of any specifications. ...
msSaveOrOpenBlob - Web APIs
me); parameters blob a blob to be saved. defaultname the file name to be used when saving file. return value true is returned as long as the download notification bar is displayed, or false if a failure occurred. notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header: content-length: <blob.
size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> specifications not part of any specifications. ...
Node.isConnected - Web APIs
ment.body.appendchild(test); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-
size: 0.8rem; width: 200px; display: inline-block; border: 1px solid black; padding: 10px; background: white; border-radius: 10px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // returns true polyfill node.iscon...
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
l when using the webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage. texture a webgltexture object whose image to attach. level a glint specifying the mipmap level of the texture image to be attached. must be 0. baseviewindex a glint specifying the base view index of the framebuffer object attachment. numviews a gl
sizei specifying the number of views of the framebuffer object attachment. return value none. exceptions a gl.invalid_enum error is thrown if target is not gl.framebuffer. attachment is not one of the accepted attachment points. a gl.invalid_value error is thrown if level is not 0. if numviews is less than one or more than max_views_ovr. a gl.invalid_operation er...
OfflineAudioContext.OfflineAudioContext() - Web APIs
y the parameters for the offlineaudiocontext() constructor as either the same set of parameters as are inputs into the audiocontext.createbuffer() method, or by passing those parameters in an options object. either way, the individual parameters are the same. numberofchannels an integer specifying the number of channels the resulting audiobuffer should have. length an integer specifying the
size of the buffer to create for the audio context, in sample-frames, where one sample-frame is a unit that can contain a single sample of audio data for every channel in the audio data. for example, a 5-second buffer with a samplerate of 48000hz would have a length of 5 * 48000 = 240000 sample-frames. samplerate the sample-rate of the linear audio data in sample-frames per second. all user agents a...
OfflineAudioContext.length - Web APIs
the length property of the offlineaudiocontext interface returns an integer representing the
size of the buffer in sample-frames. syntax var length = offlineaudiocontext.length; value an integer representing the
size of the buffer in sample-frames. specifications specification status comment web audio apithe definition of 'length' in that specification. working draft initial definition. ...
OfflineAudioContext.suspend() - Web APIs
the suspend() method of the offlineaudiocontext interface schedules a suspension of the time progression in the audio context at the specified time and returns a promise. this is generally useful at the time of manipulating the audio graph synchronously on offlineaudiocontext. note that the maximum precision of suspension is the
size of the render quantum and the specified suspension time will be rounded down to the nearest render quantum boundary. for this reason, it is not allowed to schedule multiple suspends at the same quantized frame. also scheduling should be done while the context is not running to ensure the precise suspension. syntax offlineaudiocontext.suspend(suspendtime).then(function() { ... }); parameters suspendtime a double specifying the suspend time, in seconds. r...
OffscreenCanvas.convertToBlob() - Web APIs
efault value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob {
size: 334, type: "image/png" } specifications currently drafted as a proposal: offscreencanvas. ...
OffscreenCanvas.convertToBlob() - Web APIs
efault value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob {
size: 334, type: "image/png" } specifications specification status comment html living standardthe definition of 'offscreencanvas: converttoblob' in that specification. living standard ...
OffscreenCanvas.convertToBlob() - Web APIs
efault value for image quality is used. other arguments are ignored. return value a promise returning a blob object representing the image contained in the canvas. examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); // ... some drawing using the gl context ... offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob {
size: 334, type: "image/png" } specifications currently drafted as a proposal: offscreencanvas. ...
PannerNode.coneInnerAngle - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
PannerNode.coneOuterAngle - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
PannerNode.coneOuterGain - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
PannerNode.orientationX - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
PannerNode.orientationY - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
PannerNode.orientationZ - Web APIs
tion return [x, 0, z]; }; now we can create our audiocontext, an oscillator and a pannernode: const context = new audiocontext(); const osc = new oscillatornode(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the
size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the
size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is ro...
Path2D - Web APIs
en control points and radius, connected to the previous point by a straight line. path2d.ellipse() adds an elliptical arc to the path which is centered at (x, y) position with the radii radiusx and radiusy starting at startangle and ending at endangle going in the given direction by anticlockwise (defaulting to clockwise). path2d.rect() creates a path for a rectangle at position (x, y) with a
size that is determined by width and height. specifications specification status comment html living standardthe definition of 'path2d' in that specification. living standard ...
PaymentAddress - Web APIs
o store shipping or payment address information. it may be useful to refer to the universal postal union web site's addressing s42 standard materials, which provide information about international standards for postal addresses. properties paymentaddress.addressline read only an array of domstring objects providing each line of the address not included among the other properties. the exact
size and content varies by country or location and can include, for example, a street name, house number, apartment number, rural delivery route, descriptive instructions, or post office box number. paymentaddress.country read only a domstring specifying the country in which the address is located, using the iso-3166-1 alpha-2 standard. the string is always given in its canonical upper-case form. ...
Payment Request API - Web APIs
ayment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred language. accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. a browser could also adjust the font
size or color contrast of the payment sheet, making it more comfortable for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directly in the browser. a browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things. consistent error handling: the browser ...
Performance.memory - Web APIs
syntax timinginfo = performance.memory attributes jsheap
sizelimit the maximum
size of the heap, in bytes, that is available to the context. totaljsheap
size the total allocated heap
size, in bytes. usedjsheap
size the currently active segment of js heap, in bytes. specifications none. ...
Performance.onresourcetimingbufferfull - Web APIs
= performance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired. examples the following example sets a callback function on the onresourcetimingbufferfull property. function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffer
size(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification. candidate recommendation initial definition. ...
Performance: resourcetimingbufferfull event - Web APIs
timing buffer is full. bubbles yes cancelable yes interface event event handler property onresourcetimingbufferfull examples the following example sets a callback function on the onresourcetimingbufferfull property. ...
PerformanceFrameTiming - Web APIs
adding-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/performanceframetiming" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-
size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraini...
Performance API - Web APIs
methods on the performance interface. performance timeline level 2 candidate recommendation adds serializer to the performanceentry interface as well as adding the performanceobserver interface and callback resource timing level 1 candidate recommendation adds the performanceresourcetiming interface. adds the clearresourcetimings() method, the setresourcetimingbuffer
size() method, and the onresourcetimingbufferfull event handler to the performance interface. also adds the timing-allow-origin response header. resource timing level 2 working draft adds the nexthopprotocol, workerstart, transfer
size, encodedbody
size, and decodedbody
size properties to the performanceresourcetiming interface. resource timing level 3 editor's draft ...
PhotoCapabilities - Web APIs
only returns a mediasettingsrange object indicating the image width range supported by the user agent. photocapabilities.filllightmode read only returns an array of available fill light options. options may include auto, off, or flash. example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the
size of an input range. this example also shows how the imagecapture object is created using a mediastreamtrack retrieved from a device's mediastream. const input = document.queryselector('input[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideo...
RTCConfiguration.certificates - Web APIs
description if this property isn't included in the configuration, a set of certificates is automatically generated for each instance of rtcpeerconnection. although a given dtls connection only uses a single certificate, providing multiple options in the certificates list may improve the odds of establishing a connection by increasing the chances a mutually-compatible encryption algorithm and key
size may be found. the method by which a browser decides which certificate to use is implementation-dependent. some browsers may simply choose the first listed certificate and ignore the rest of the list; others may take a different approach. using certificates when you wish to provide your own certificates for use by an rtcpeerconnection instead of having the rtcpeerconnection generate them automa...
RTCDtlsTransport - Web APIs
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/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-...
RTCOutboundRtpStreamStats - Web APIs
times this sender received a slice loss indication (sli) frame from the remote peer, indicating that one or more consecutive video macroblocks have been lost or corrupted. available only for video streams. targetbitrate a value indicating the bit rate the rtcrtpsender's codec is configured to attempt to achieve in its output media. totalencodedbytestarget a cumulative sum of the target frame
sizes (the targeted maximum
size of the frame in bytes when the codec is asked to compress it) for all of the frames encoded so far. this will likely differ from the total of the actual frame
sizes. totalencodetime a floating-point value indicating the total number of seconds that have been spent encoding the frames encoded so far by this rtcrtpsender. trackid the id of the rtcsenderaudiotrackatta...
RTCPeerConnection.sctp - Web APIs
being used by the rtcpeerconnection for transmitting and receiving on its data channels, or null if sctp negotiation hasn't happened. example var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message
size that can be sent var sctp = pc.sctp; var maxmessage
size = sctp.maxmessage
size; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.sctp' in that specification. candidate recommendation initial specification. ...
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
decoded)) { framestring = `decoded ${framesdecoded} frames for a frame rate of ${framerate.tofixed(2)} fps.<br>`; } let logentry = `<div class="stats-entry"><h2>report id: ${endremoteoutbound.id}</h2>` + `remote peer sent ${packetssent} packets ${timestring}.<br>` + `${framestring}` + `data
size: ${bytessent} bytes.</div>`; statsbox.innerhtml += logentry; } else { statsbox.innerhtml += `<div class="stats-error">unable to find initial statistics for id ${endremoteoutbound.id}.</div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection met...
RTCRtcpParameters - Web APIs
the rtcrtcpparameters dictionary provides parameters of an rtcp connection. it's used as the value of the rtcp property of the parameters of an rtcrtpsender or rtcrtpreceiver. properties cname the canonical name (cname) being used by rtcp. this is used, for example, in sdes (sdp security descriptions) messages, described in rfc 4568. this property cannot be changed once initialized. reduced
size a boolean value indicating whether or not reduced
size rtcp is configured. if this value is true, reduced
size rtcp (described in rfc 5506) is in effect. if false, compund rtcp is in use, as found in rfc 3550. this property cannot be changed once initialized. examples this example obtains the canonical name (cname) being used for rtcp on an rtcrtpsender or rtcrtpreceiver. function getrtpcnam...
RTCRtpEncodingParameters.scaleResolutionDownBy - Web APIs
the rtcrtpencodingparameters dictionary's scaleresolutiondownby property can be used to specify a factor by which to reduce the
size of a video track during encoding. this property is only available for tracks whose kind is video. syntax rtpencodingparameters.scaleresolutiondownby = scalingfactor; rtpencodingparameters = { scaleresolutiondownby: scalingfactor }; value a double-precison floating-point number specifying the amount by which to reduce the
size of the video during encoding. the default value, 1.0, means that the video will be encoded at its original
size. a value of 2.0 would reduce the
size of the video by a factor of 2 both horizontally and vertically, resulting in a video 25% the original
size. a value less than 1.0 would cause the video to get larger rather than smal...
RTCRtpEncodingParameters - Web APIs
using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's
size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the
size of the original. the value must not be less than 1.0 (you can't use this to scale the video up). specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpencodi...
RTCRtpSendParameters.encodings - Web APIs
using the rid header extension. this parameter cannot be modified using setparameters(). its value can only be set when the transceiver is first created. scaleresolutiondownby only used for senders whose track's kind is video, this is a double-precision floating-point value specifying a factor by which to scale down the video during encoding. the default value, 1.0, means that the sent video's
size will be the same as the original. a value of 2.0 scales the video frames down by a factor of 2 in each dimension, resulting in a video 1/4 the
size of the original. the value must not be less than 1.0 (you can't use this to scale the video up). specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsendpa...
Range.setEnd() - Web APIs
h the range should end. endoffset an integer greater than or equal to zero representing the offset for the end of the range from the start of endnode. return value undefined. exceptions exceptions are thrown as domexception objects of the following types: invalidnodetypeerror the node specified by endnode is a doctype node; range endpoints cannot be located inside a doctype node. index
sizeerror the value specified by endoffset is either greater than or equal to the length of the node or is less than zero. usage notes if the endnode is a node of type text, comment, or cdatasection, then endoffset is the number of characters from the start of endnode. for other node types, endoffset is the number of child nodes between the start of the endnode. example const range = document.cr...
ReadableByteStreamController - Web APIs
resents a controller allowing control of a readablestream's state and internal queue. byte stream controllers are for byte streams. constructor none. readablebytestreamcontroller instances are created automatically during readablestream construction. properties readablebytestreamcontroller.byobrequest read only returns the current byob pull request. readablebytestreamcontroller.desired
size read only returns the desired
size required to fill the stream's internal queue. methods readablebytestreamcontroller.close() closes the associated stream. readablebytestreamcontroller.enqueue() enqueues a given chunk in the associated stream. readablebytestreamcontroller.error() causes any future interactions with the associated stream to error. examples tbd. specifications ...
ReadableStreamDefaultController.error() - Web APIs
he error you want future interactions to fail with. return value undefined. exceptions typeerror the source object is not a readablestreamdefaultcontroller, or the stream is not readable for some other reason. examples the a readable stream with an underlying push source and backpressure support example in the spec provides a good example of using readablestreamdefaultcontroller.desired
size to manually detect when the stream is full and apply backpressure, and also of using error() to manually trigger a stream error if another part of the system it relies on fails. specifications specification status comment streamsthe definition of 'error()' in that specification. living standard initial definition. ...
ReadableStreamDefaultController - Web APIs
the readablestreamdefaultcontroller interface of the streams api represents a controller allowing control of a readablestream's state and internal queue. default controllers are for streams that are not byte streams. constructor none. readablestreamdefaultcontroller instances are created automatically during readablestream construction. properties readablestreamdefaultcontroller.desired
size read only returns the desired
size required to fill the stream's internal queue. methods readablestreamdefaultcontroller.close() closes the associated stream. readablestreamdefaultcontroller.enqueue() enqueues a given chunk in the associated stream. readablestreamdefaultcontroller.error() causes any future interactions with the associated stream to error. examples in the following ...
RsaPssParams - Web APIs
properties name a domstring. this should be set to rsa-pss. saltlength a long integer representing the length of the random salt to use, in bytes. rfc 3447 says that "typical salt lengths" are either 0 or the length of the output of the digest algorithm that was selected when this key was generated. for example, if you use sha-256 as the digest algorithm, this could be 32. the maximum
size of saltlength is given by: math.ceil((key
sizeinbits - 1)/8) - digest
sizeinbytes - 2 so for a key length of 2048 bits and a digest output
size of 32 bytes, the maximum
size would be 222. examples see the examples for subtlecrypto.sign() and subtlecrypto.verify(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.rsaps...
StorageEstimate - Web APIs
the estimate() method returns an object that conforms to this dictionary when its promise resolves. these values are only estimates for several reasons, including both performance and preventing storage capacity data from being used for fingerprinting purposes. see the individual property pages for details. properties quota secure context a numeric value in bytes which provides a conservative approximation of the total storage the user's device or computer has available for the site origin or web app. ...
Using writable streams - Web APIs
in our demo works. constructing a writable stream to create a writable stream, we use the writablestream() constructor; the syntax looks complex at first, but actually isn’t too bad. the syntax skeleton looks like this: const stream = new writablestream({ start(controller) { }, write(chunk,controller) { }, close(controller) { }, abort(reason) { } }, { highwatermark,
size() }); the constructor takes two objects as parameters. the first object is required, and creates a model in javascript of the underlying sink the data is being written to. the second object is optional, and allows you to specify a custom queueing strategy to use for your stream, which takes the form of an instance of bytelengthqueuingstrategy or countqueuingstrategy. the first object can contai...
StylePropertyMapReadOnly - Web APIs
the stylepropertymapreadonly interface of the the css typed object model api provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration. retrieve an instance of this interface using element.computedstylemap(). properties stylepropertymapreadonly.
size returns an unsinged long integer containing the
size of the stylepropertymapreadonly object. methods stylepropertymapreadonly.entries() returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well). stylepropertymapreadonly.foreach() executes a provided function once for each element of stylepropertymapreadonly. styl...
SubtleCrypto.decrypt() - Web APIs
aintext. exceptions the promise is rejected when the following exceptions are encountered: invalidaccesserror raised when the requested operation is not valid for the provided key (e.g. invalid encryption algorithm, or invalid key for the specified encryption algorithm). operationerror raised when the operation failed for an operation-specific reason (e.g. algorithm parameters of invalid
sizes, or there was an error decrypting the ciphertext). supported algorithms the decrypt() method supports the same algorithms as the encrypt() method. examples note: you can try the working examples on github. rsa-oaep this code decrypts ciphertext using rsa-oaep. see the complete code on github. function decryptmessage(privatekey, ciphertext) { return window.crypto.subtle.decrypt( {...
SubtleCrypto.digest() - Web APIs
t use this in cryptographic applications) sha-256 sha-384 sha-512. data is an arraybuffer or arraybufferview containing the data to be digested. return value digest is a promise that fulfills with an arraybuffer containing the digest. supported algorithms digest algorithms, also known as cryptographic hash functions, transform an arbitrarily large block of data into a fixed-
size output, usually much shorter than the input. they have a variety of applications in cryptography. sha-1 this algorithm is specified in fips 180-4, section 6.1, and produces an output 160 bits long. warning: this algorithm is now considered vulnerable and should not be used for cryptographic applications. sha-256 this algorithm is specified in fips 180-4, section 6.2, and produces an output...
SubtleCrypto.encrypt() - Web APIs
ext". exceptions the promise is rejected when the following exceptions are encountered: invalidaccesserror raised when the requested operation is not valid for the provided key (e.g. invalid encryption algorithm, or invalid key for the specified encryption algorithm). operationerror raised when the operation failed for an operation-specific reason (e.g. algorithm parameters of invalid
sizes, or aes-gcm plaintext longer than 2³⁹−256 bytes). supported algorithms the web crypto api provides four algorithms that support the encrypt() and decrypt() operations. one of these algorithms — rsa-oaep — is a public-key cryptosystem. the other three encryption algorithms here are all symmetric algorithms, and they're all based on the same underlying cipher, aes (advanced encryptio...
SubtleCrypto.sign() - Web APIs
uitable for signing. supported algorithms the web crypto api provides four algorithms that can be used for signing and signature verification. three of these algorithms — rsassa-pkcs1-v1_5, rsa-pss, and ecdsa — are public-key cryptosystems that use the private key for signing and the public key for verification. these systems all use a digest algorithm to hash the message to a short fixed
size before signing. the choice of digest algorithm is passed into the generatekey() or importkey() functions. the fourth algorithm — hmac — uses the same algorithm and key for signing and for verification: this means that the verification key must be kept secret, which in turn means that this algorithm is not suitable for many signature use cases. it can be a good choice however when the signer ...
Text.splitText() - Web APIs
wly created node has no data. separated text nodes can be concatenated using the node.normalize() method. syntax newnode = textnode.splittext(offset) parameters offset the index immediately before which to break the text node. return value returns a newly created text node that contains the text after the specified offset point. exceptions thrown a domexception with a value of index_
size_err is thrown if the specified offset is negative or is greater than the number of 16-bit units in the node's text; a domexception with a value of no_modification_allowed_err is thrown if the node is read-only. example in this example, the text of a <p> is split into two text nodes, and a <u> is inserted between them. html <p>foobar</p> javascript const p = document.queryselector('p'); // ...
TimeRanges.end() - Web APIs
returns the time offset at which a specified time range ends. syntax endtime = timeranges.end(index) parameters index is the range number to return the ending time for. exceptions index_
size_err a domexception thrown if the specified index doesn't correspond to an existing range. example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specification ...
TimeRanges.start() - Web APIs
returns the time offset at which a specified time range begins. syntax starttime = timeranges.start(index) parameters index is the range number to return the starting time for. exceptions index_
size_err a domexception thrown if the specified index doesn't correspond to an existing range. example given a video element with the id "myvideo": var v = document.getelementbyid("myvideo"); var buf = v.buffered; var numranges = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded. specifications specific...
Touch.radiusX - Web APIs
summary returns the x radius of the ellipse that most closely circumscribes the area of contact with the touch surface. the value is in css pixels of the same scale as touch.screenx. this value, in combination with touch.radiusy and touch.rotationangle constructs an ellipse that approximates the
size and shape of the area of contact between the user and the screen. this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var xradius = touchitem.radiusx; return value x...
Touch.radiusY - Web APIs
summary returns the y radius of the ellipse that most closely circumscribes the area of contact with the touch surface. the value is in css pixels of the same scale as touch.screenx. this value, in combination with touch.radiusx and touch.rotationangle constructs an ellipse that approximates the
size and shape of the area of contact between the user and the screen. this may be a large ellipse representing the contact between a fingertip and the screen or a small one representing the tip of a stylus, for example. note: this attribute has not been formally standardized. it is specified in the touch events – level 2 draft specification and not in touch events recommendation. this attribute is not widely implemented. syntax var yradius = touchitem.radiusy; return value yradius the ...
Touch.rotationAngle - Web APIs
this may be a relatively large ellipse representing the contact between a fingertip and the screen or a small area representing the tip of a stylus, for example. note: this attribute has not been formally standardized. ...
UIEvent.layerX - Web APIs
ake the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid"
size="7" /><br /> pagex:<input type="text" name="pagexcoords"
size="7" /> pagey:<input type="text" name="pageycoords"
size="7" /><br /> layerx:<input type="text" name="layerxcoords"
size="7" /> layery:<input type="text" name="layerycoords"
size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. browser compatibility the compatibility table on...
UIEvent.layerY - Web APIs
ake the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid"
size="7" /><br /> pagex:<input type="text" name="pagexcoords"
size="7" /> pagey:<input type="text" name="pageycoords"
size="7" /><br /> layerx:<input type="text" name="layerxcoords"
size="7" /> layery:<input type="text" name="layerycoords"
size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. ...
UIEvent.pageY - Web APIs
an> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid"
size="7" /><br /> pagex:<input type="text" name="pagexcoords"
size="7" /> pagey:<input type="text" name="pageycoords"
size="7" /><br /> layerx:<input type="text" name="layerxcoords"
size="7" /> layery:<input type="text" name="layerycoords"
size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification. ...
sourceCapabilities - Web APIs
lifts their finger off of a touchscreen, several uievents may be generated including touchend, mousedown, click, and focus. all of these events must have the same sourcecapabilities representing the touchscreen. a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web platform. for example, many user agents allow a window to be re
sized with a mouse or a keyboard, but this detail is not exposed to the web platform in any way, and so the sourcecapabilities of a re
size event will typically be null. syntax var idc = event.sourcecapabilities value an instance of inputdevicecapabilities. specifications specification status comment inputdevicecapabilitiesthe definition of 'sourcecapabilities' in that spe...
USBEndpoint - Web APIs
ble data transfer for small payloads. data sent through an interrupt endpoint is guaranteed to be delivered or generate an error and is also given dedicated bus time for transmission. "isochronous" - provides unreliable data transfer for payloads that must be delivered periodically. they are given dedicated bus time but if a deadline is missed the data is dropped. usbendpoint.packet
size returns the
size of the packets that data sent through this endpoint will be divided into. examples while sometimes the developer knows ahead of time the exact layout of a device's endpoints there are cases where this must be discovered at runtime. for example, a usb serial device must provide bulk input and output endpoints but their endpoint numbers will depend on what other interfaces the ...
WebGL2RenderingContext.bindBufferRange() - Web APIs
the webgl2renderingcontext.bindbufferrange() method of the webgl 2 api binds a range of a given webglbuffer to a given binding point (target) at a given index. syntax void gl.bindbufferrange(target, index, buffer, offset,
size); parameters target a glenum specifying the target for the bind operation. possible values: gl.transform_feedback_buffer gl.uniform_buffer index a gluint specifying the index of the target. buffer a webglbuffer which to bind to the binding point (target). offset a glintptr specifying the starting offset.
size a gl
sizeiptr specifying the amount of data that can be read from the buffer. return value none. examples gl.bindbufferrange(gl.transform_feedback_buffer, 1, buffer, 0, 4); specifications specification status ...
WebGL2RenderingContext.copyTexSubImage3D() - Web APIs
evel. xoffset a glint specifying the x offset within the texture image. yoffset a glint specifying the y offset within the texture image. zoffset a glint specifying the z offset within the texture image. x a glint specifying the x coordinate of the lower left corner where to start copying. y a glint specifying the y coordinate of the lower left corner where to start copying. width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. return value none. examples gl.copytexsubimage3d(gl.texture_3d, 0, 0, 0, 0, 0, 0, 16, 16); specifications specification status comment webgl 2.0the definition of 'copytexsubimage3d' in that specification. editor's draft initial definition. opengl es 3.0the ...
WebGL2RenderingContext.drawArraysInstanced() - Web APIs
ip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. first a glint specifying the starting index in the array of vector points. count a gl
sizei specifying the number of indices to be rendered. instancecount a gl
sizei specifying the number of instances of the range of elements to execute. return value none. examples gl.drawarraysinstanced(gl.points, 0, 8, 4); specifications specification status comment webgl 2.0the definition of 'drawarraysinstanced' in that specification. editor's draft initial de...
WebGL2RenderingContext.getActiveUniforms() - Web APIs
yntax any gl.getactiveuniforms(program, uniformindices, pname); parameters program a webglprogram containing the active uniforms. uniformindices an array of gluint specifying the indices of the active uniforms to query. pname a glenum specifying which information to query. possible values: gl.uniform_type: returns an array of glenum indicating the types of the uniforms. gl.uniform_
size: returns an array of gluint indicating the
sizes of the uniforms. gl.uniform_block_index: returns an array of glint indicating the block indices of the uniforms. gl.uniform_offset: returns an array of glint indicating the uniform buffer offsets. gl.uniform_array_stride: returns an array of glint indicating the strides between the elements. gl.uniform_matrix_stride: returns an array of gli...
WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed information about a given target. syntax any gl.getindexedparameter(target, index); parameters target a glenum specifying the target for which to return information. possible values: gl.transform_feedback_buffer_binding: returns a webglbuffer. gl.transform_feedback_buffer_
size: returns a gl
sizeiptr. gl.transform_feedback_buffer_start: returns a glintptr. gl.uniform_buffer_binding: returns a webglbuffer. gl.uniform_buffer_
size: returns a gl
sizeiptr. gl.uniform_buffer_start: returns a glintptr. index a gluint specifying the index of the target that is queried. return value depends on the requested information (as specified with target). examples var binding = gl.g...
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
gl.depth_attachment: invalidates the framebuffer's depth buffer. gl.stencil_attachment: invalidates the framebuffer's stencil buffer. gl.depth_stencil_attachment: invalidates both the framebuffer's depth and stencil buffer. x a glint specifying the left origin of the pixel rectangle to invalidate. y a glint specifying the bottom origin of the pixel rectangle to invalidate. width a gl
sizei specifying the width of the pixel rectangle to invalidate. height a gl
sizei specifying the height of the pixel rectangle to invalidate. return value none. examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1], 0, 0, 256, 256); specifications specification status comme...
WebGL2RenderingContext.texImage3D() - Web APIs
is a luminance component, alpha is 1.0. gl.luminance_alpha: each component is a luminance/alpha component. gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rgui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb_aplha8 gl.rgb5_a1 gl.rgba4444 gl.rgba16f gl.rgba32f gl.rgba8ui width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. depth a gl
sizei specifying the depth of the texture. border a glint specifying the width of the border. must be 0. format a glenum specifying the format of the texel data. the correct combinations with internalformat are listed in this table. type a glenum specifying the data type of the texel d...
WebGL2RenderingContext.texStorage2D() - Web APIs
a the webgl_compressed_texture_etc extension, though. gl.compressed_r11_eac gl.compressed_signed_r11_eac gl.compressed_rg11_eac gl.compressed_signed_rg11_eac gl.compressed_rgb8_etc2 gl.compressed_rgba8_etc2_eac gl.compressed_srgb8_etc2 gl.compressed_srgb8_alpha8_etc2_eac gl.compressed_rgb8_punchthrough_alpha1_etc2 gl.compressed_srgb8_punchthrough_alpha1_etc2 width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. return value none. examples gl.texstorage2d(gl.texture_2d, 1, gl.rgb8, 256, 256); specifications specification status comment webgl 2.0the definition of 'texstorage2d' in that specification. editor's draft initial definition for webgl. opengl es 3.0the defi...
WebGL2RenderingContext.texSubImage3D() - Web APIs
l.texture_2d_array: a two-dimensional array texture. level a glint specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the x offset within the texture image. yoffset a glint specifying the y offset within the texture image. zoffset a glint specifying the z offset within the texture image. width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. depth a gl
sizei specifying the depth of the texture. format a glenum specifying the format of the texel data. possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. gl.rgb: discards the alpha components and reads the red, green and blue components...
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the webgl2renderingcontext.vertexattribipointer() method of the webgl 2 api specifies integer data formats and locations of vertex attributes in a vertex attributes array. syntax void gl.vertexattribipointer(index,
size, type, stride, offset); parameters index a gluint specifying the index of the vertex attribute that is to be modified.
size a glint specifying the number of components per vertex attribute. must be 1, 2, 3, or 4. type a glenum specifying the data type of each component in the array. must be one of: gl.byte, gl.unsigned_byte, gl.short, gl.unsigned_short, gl.int, or gl.unsigned_int. stride a gl
sizei specifying the offset in bytes between the beginning of consecutive vertex attributes. offset a glintptr specifying an offset in bytes of the first componen...
WebGLRenderingContext.copyTexImage2D() - Web APIs
, blue and alpha components are read from the color buffer. gl.luminance: each color component is a luminance component, alpha is 1.0. gl.luminance_alpha: each component is a luminance/alpha component. x a glint specifying the x coordinate of the lower left corner where to start copying. y a glint specifying the y coordinate of the lower left corner where to start copying. width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. border a glint specifying the width of the border. must be 0. return value none. examples gl.copyteximage2d(gl.texture_2d, 0, gl.rgba, 0, 0, 512, 512, 0); specifications specification status comment webgl 1.0the definition of 'copyteximage2d' in that specification. r...
WebGLRenderingContext.copyTexSubImage2D() - Web APIs
mage level and level n is the nth mipmap reduction level. xoffset a glint specifying the horizontal offset within the texture image. yoffset a glint specifying the vertical offset within the texture image. x a glint specifying the x coordinate of the lower left corner where to start copying. y a glint specifying the y coordinate of the lower left corner where to start copying. width a gl
sizei specifying the width of the texture. height a gl
sizei specifying the height of the texture. return value none. examples gl.copytexsubimage2d(gl.texture_2d, 0, 0,0, 0, 0, 16, 16); specifications specification status comment webgl 1.0the definition of 'copytexsubimage2d' in that specification. recommendation initial definition. opengl es 2.0the defi...
WebGLRenderingContext.drawArrays() - Web APIs
ip: draws a straight line to the next vertex. gl.line_loop: draws a straight line to the next vertex, and connects the last vertex back to the first. gl.lines: draws a line between a pair of vertices. gl.triangle_strip gl.triangle_fan gl.triangles: draws a triangle for a group of three vertices. first a glint specifying the starting index in the array of vector points. count a gl
sizei specifying the number of indices to be rendered. return value none. exceptions if mode is not one of the accepted values, a gl.invalid_enum error is thrown. if first or count are negative, a gl.invalid_value error is thrown. if gl.current_program is null, a gl.invalid_operation error is thrown. examples gl.drawarrays(gl.points, 0, 8); specifications specification statu...
WebGLRenderingContext.getTexParameter() - Web APIs
gl.texture_compare_func glenum comparison function gl.lequal (default value), gl.gequal, gl.less, gl.greater, gl.equal, gl.notequal, gl.always, gl.never. gl.texture_compare_mode glenum texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_immutable_format glboolean immutability of the texture format and
size true or false. gl.texture_immutable_levels gluint ? any uint values. gl.texture_max_level glint maximum texture mipmap array level any int values. gl.texture_max_lod glfloat texture maximum level-of-detail value any float values. gl.texture_min_lod glfloat texture minimum level-of-detail value any ...
WebGLRenderingContext.getVertexAttrib() - Web APIs
pname); parameters index a gluint specifying the index of the vertex attribute. pname a glenum specifying the information to query. possible values: gl.vertex_attrib_array_buffer_binding: returns the currently bound webglbuffer. gl.vertex_attrib_array_enabled: returns a glboolean that is true if the vertex attribute is enabled at this index. otherwise false. gl.vertex_attrib_array_
size: returns a glint indicating the
size of an element of the vertex array. gl.vertex_attrib_array_stride: returns a glint indicating the number of bytes between successive elements in the array. 0 means that the elements are sequential. gl.vertex_attrib_array_type: returns a glenum representing the array type. one of gl.byte, gl.unsigned_byte, gl.short, gl.unsigned_short, ...
WebGLRenderingContext.readPixels() - Web APIs
rmat, type, glintptr offset); void gl.readpixels(x, y, width, height, format, type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels. y a glint specifying the first vertical pixel that is read from the lower left corner of a rectangular block of pixels. width a gl
sizei specifying the width of the rectangle. height a gl
sizei specifying the height of the rectangle. format a glenum specifying the format of the pixel data. possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. gl.rgb: discards the alpha components and reads the red, green and blue components. gl.rgba: red, green, blue and alpha components ...
WebGLRenderingContext.renderbufferStorage() - Web APIs
a32f_ext: rgba 32-bit floating-point type. ext.rgb32f_ext: rgb 32-bit floating-point type. when using the ext_srgb extension: ext.srgb8_alpha8_ext: 8-bit srgb and alpha. when using a webgl 2 context and the ext_color_buffer_float extension: gl.r16f gl.rg16f gl.rgba16f gl.r32f gl.rg32f gl.rgba32f gl.r11f_g11f_b10f width a gl
sizei specifying the width of the renderbuffer in pixels. height a gl
sizei specifying the height of the renderbuffer in pixels. return value none. examples gl.renderbufferstorage(gl.renderbuffer, gl.rgba4, 256, 256); specifications specification status comment webgl 1.0the definition of 'renderbufferstorage' in that specification. recommendation initial definiti...
WebGLRenderingContext.scissor() - Web APIs
scissor() method of the webgl api sets a scissor box, which limits the drawing to a specified rectangle. syntax void gl.scissor(x, y, width, height); parameters x a glint specifying the horizontal coordinate for the lower left corner of the box. default value: 0. y a glint specifying the vertical coordinate for the lower left corner of the box. default value: 0. width a non-negative gl
sizei specifying the width of the scissor box. default value: width of the canvas. height a non-negative gl
sizei specifying the height of the scissor box. default value: height of the canvas. return value none. exceptions if either width or height is a negative value, a gl.invalid_value error is thrown. examples when the scissor test is enabled, only pixels within the scissor box can be modif...
WebGLRenderingContext.texSubImage2D() - Web APIs
specifying the level of detail. level 0 is the base image level and level n is the nth mipmap reduction level. xoffset a glint specifying the lower left texel x coordinate of a width-wide by height-wide rectangular subregion of the texture array. yoffset a glint specifying the lower left texel y coordinate of a width-wide by height-wide rectangular subregion of the texture array.. width a gl
sizei specifying the width of the texture in texels. height a gl
sizei specifying the height of the texture in texels. format a glenum specifying the format of the texel data. possible values: gl.alpha: discards the red, green and blue components and reads the alpha component. gl.rgb: discards the alpha components and reads the red, green and blue components. gl.rgba: red, green, blue and a...
Boilerplate 1 - Web APIs
en. html <p>[ some descriptive text about the example. ]</p> <button>[ optional button element. ...
Clearing by clicking - Web APIs
the event handler removes // itself, because it only needs to run once. window.removeeventlistener(evt.type, setupwebgl, false); // adding the same click event handler to both canvas and // button. var canvas = document.queryselec...
Color masking - Web APIs
not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-
size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.query...
Detect WebGL - Web APIs
is not unique to webgl. this is also done in other graphics {̣{glossary("api")}}, such as the canvas 2d rendering context. however, the properties and variables you can tweak are different for each api. <p>[ here would go the result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-
size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it. window.addeventlistener("load", function() { var paragraph = document.queryselector("p"), button = document.queryselector("button"); // adding click event handler to button. button.addeventlistener("click", ...
Simple color animation - Web APIs
var timer; // click event handlers. var button = document.queryselector("#animation-onoff"); var verb = document.queryselector("strong");...
WebGL by example - Web APIs
color when the user clicks. simple color animation a very basic color animation, done by clearing the webgl drawing buffer with a different random color every second. color masking modifying random colors by applying color masking and thus limiting the range of displayed colors to specific shades. basic scissoring how to draw simple rectangles and squares with scissoring operations. canvas
size and webgl the example explores the effect of setting (or not setting) the canvas
size to its element
size in css pixels, as it appears in the browser window. boilerplate 1 the example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make webgl initialization easier. scissor animation some animation fun with scissoring and...
Using textures in WebGL - Web APIs
eates a webgl buffer into which we'll store the texture coordinates for each face, then we bind that buffer as the array we'll be writing into. the texturecoordinates array defines the texture coordinates corresponding to each vertex of each face. note that the texture coordinates range from 0.0 to 1.0; the dimensions of textures are normalized to a range of 0.0 to 1.0 regardless of their actual
size, for the purpose of texture mapping. once we've set up the texture mapping array, we pass the array into the buffer, so that webgl has that data ready for its use. updating the shaders the shader program also needs to be updated to use the textures instead of solid colors. the vertex shader we need to replace the vertex shader so that instead of fetching color data, it instead fetches the te...
WebGL types - Web APIs
stants. glboolean boolean a boolean. glbitfield unsigned long a bit field that stores multiple, logical bits. used for example in webglrenderingcontext.clear(). glbyte byte 8-bit twos complement signed integer. glshort short 16-bit twos complement signed integer. glint long 32-bit twos complement signed integer. gl
sizei long used for
sizes (e.g. width and height of the drawing buffer). glintptr long long special type for pointer arithmetic. gl
sizeiptr long long special type for pointer arithmetic. glubyte octet 8-bit twos complement unsigned integer. glushort unsigned short 16-bit twos complement unsigned integer. gluint unsigned long...
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
let's take a dive into the code to see how it works now. on receiving a description in the revised code, if the received message is an sdp description, we check to see if it arrived while we're attempting to transmit an offer. if the received message is an offer and the local peer is the impolite peer,...
A simple RTCDataChannel sample - Web APIs
disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the entered text. this <div> will be the first peer in the channel. <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin"
size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages. this <div> block will be the second peer. <div class="messagebox" id="receivebox"> <p>messages received:</p> </div> the javascript code while you can just look at the code i...
WebRTC API - Web APIs
stun or turn server). rtcrtpcontributingsource contains information about a given contributing source (csrc) including the most recent time a packet that the source contributed was played out. events bufferedamountlow the amount of data currently buffered by the data channel—as indicated by its bufferedamount property—has decreased to be at or below the channel's minimum buffered data
size, as specified by bufferedamountlowthreshold. close the data channel has completed the closing process and is now in the closed state. its underlying data transport is completely closed at this point. you can be notified before closing completes by watching for the closing event instead. closing the rtcdatachannel has transitioned to the closing state, indicating that it will be closed soon. y...
WebSocket.send() - Web APIs
tes required to represent the utf-8 string. arraybuffer you can send the underlying binary data used by a typed array object; its binary data contents are queued in the buffer, increasing the value of bufferedamount by the requisite number of bytes. blob specifying a blob enqueues the blob's raw data to be transmitted in a binary frame. the value of bufferedamount is increased by the byte
size of that raw data. arraybufferview you can send any javascript typed array object as a binary frame; its binary data contents are queued in the buffer, increasing the value of bufferedamount by the requisite number of bytes. exceptions thrown invalid_state_err the connection is not currently open. syntax_err the data is a string that has unpaired surrogates. note: gecko's implem...
Writing a WebSocket server in C# - Web APIs
t methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel. both sides of the channel have reading and writing capability. properties: int available this property indicates how many bytes of data have been sent. the value is zero until networkstream.dataavailable is true. networkstream methods: write(byte[] buffer, int offset, int
size) writes bytes from buffer, offset and
size determine length of message. read(byte[] buffer, int offset, int
size) reads bytes to buffer. offset and
size determine the length of the message. let us extend our example. tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); //enter to an infinite cycle to be able t...
Fundamentals of WebXR - Web APIs
iew and mixed reality devices to achieve a wide enough field of view that the user's eyes are tricked into believing that the virtual world completely surrounds them, the fov needs to at least approach the width of the binocular vision area. basic headsets typically start around 90° or so, while the best headsets generally have a field of view of around 150°. because the fov is a matter of the
size of the lenses and how close they are to the user's eyes, there are limitations on how wide the fov can get without installing lenses into the user's eyeballs. a wide fov can substantially improve the user's sense of immersion. however, increasing the fov can also increase the weight and cost of the headset. degrees of freedom the term degrees of freedom is an indication of how much freedom of ...
Basic concepts behind Web Audio API - Web APIs
use this call, you will get a mono buffer with just one channel), that when played back on an audiocontext running at 44100hz, will be automatically resampled to 44100hz (and therefore yield 44100 frames), and last for 1.0 second: 44100 frames/44100hz = 1 second. note: audio resampling is very similar to image resizing. say you've got a 16 x 16 image, but you want it to fill a 32x32 area. you re
size (or resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the re
sized image taking up less space. resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound. planar versus interleaved buffers the web audio api uses a planar buffer fo...
Example and tutorial: Simple synth keyboard - Web APIs
dius: 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 { 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%; ...
Background audio processing using AudioWorklet - Web APIs
represented as a float32array whose values are the individual audio samples. by specification, each block of audio your process() function receives contains 128 frames (that is, 128 samples for each channel), but it is planned that this value will change in the future, and may in fact vary depending on circumstances, so you should always check the array's length rather than assuming a particular
size. it is, however, guaranteed that the inputs and outputs will have the same block length. each input can have a number of channels. a mono input has a single channel; stereo input has two channels. surround sound might have six or more channels. so each input is, in turn, an array of channels. that is, an array of float32array objects. then, there can be multiple inputs, so the inputlist is an a...
Web Audio API - Web APIs
oparam interface represents an audio-related parameter, like one of an audionode. it can be set to a specific value or a change in value, and can be scheduled to happen at a specific time and following a specific pattern. audioparammap provides a maplike interface to a group of audioparam interfaces, which means it provides the methods foreach(), get(), has(), keys(), and values(), as well as a
size property. baseaudiocontext the baseaudiocontext interface acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively. you wouldn't use baseaudiocontext directly — you'd use its features via one of these two inheriting interfaces. the ended event the ended event is fired when playback has stopped because the e...
Window.captureEvents() - Web APIs
of the specified type. syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.re
size, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised in the dom by ...
Window: error event - Web APIs
ass="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } button { height: 2rem; margin: .5rem; } img { width: 0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-erro...
Window.fullScreen - Web APIs
e privileges, it will not throw an exception and instead just silently fail. this is to prevent scripts designed to set this property in internet explorer from breaking. return value isinfullscreen a boolean. possible values: true: the window is in full screen mode. false: the window is not in full screen mode. notes switching between regular window and full screen will fire the "re
size" event on the corresponding window. example if (window.fullscreen) { // it's fullscreen! } else { // not fullscreen! } ...
Window.innerWidth - Web APIs
terior height of the window—the height of the layout viewport—can be obtained from the innerheight property. syntax let intviewportwidth = window.innerwidth; value an integer value indicating the width of the window's layout viewport in pixels. this property is read-only, and has no default value. to change the window's width, use one of the window methods for resizing windows, such as re
sizeby() or re
sizeto(). usage notes if you need to obtain the width of the window minus the scrollbar and borders, use the root <html> element's clientwidth property instead. the innerwidth property is available on any window or object that behaves like a window, such as a frame or tab. example // this will return the width of the viewport var intframewidth = window.innerwidth; // this will retu...
Window: load event - Web APIs
>reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { re
size: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.textcontent =''; window.settimeout(() => { window.location.reload(true); }, 200); }); window.addeventlistener('load', (event) => { log.textconten...
Privileged features - Web APIs
minimizable this setting can only apply to dialog windows; minimizable requires dialog=yes. if minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. ...
Window.personalbar - Web APIs
visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the various toolbars can change the
size of the window rather dramatically, and may affect the layout of your page. specifications specification status comment html living standardthe definition of 'window.personalbar' in that specification. living standard html5the definition of 'window.personalbar' in that specification. recommendation ...
Window.releaseEvents() - Web APIs
ts of a specific type. syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.re
size, event.select, event.submit, event.unload. example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup). see also window.captureevents ( ). specification this is not part of any specification. browser compatibility the compatibility table in this pa...
Window.showModalDialog() - Web APIs
the dialog box in pixels. dialogleft: left distance of the dialog box from the left edge of the desktop. dialogwidth: width the width of the dialog box in pixels. dialogtop: top distance of the dialog box from the top edge of the desktop. resizable: {on | off | yes | no | 1 | 0 } if this argument's value is on, yes, or 1, the dialog window can be re
sized by the user; otherwise its
size is fixed. the default value is no. scroll: {on | off | yes | no | 1 | 0 } if on, yes, or 1, the dialog window has scroll bars; otherwise its
size is fixed. default is no. note: firefox does not implement the dialoghide, edge, status, or unadorned arguments. examples try out showmodaldialog(). notes showmodaldialog() was briefly standardized ...
Window.statusbar - Web APIs
visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the various toolbars can change the
size of the window rather dramatically, and may affect the layout of your page. specifications specification status comment html living standardthe definition of 'window.statusbar' in that specification. living standard html5the definition of 'window.statusbar' in that specification. recommendation ...
Window.toolbar - Web APIs
visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above. also be aware that dynamically updating the visibilty of the various toolbars can change the
size of the window rather dramatically, and may affect the layout of your page. see also: window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.statusbar specifications specification status comment html living standardthe definition of 'window.toolbar' in that specification. living standard html5the definition of 'window.toolbar' ...
self.createImageBitmap() - Web APIs
r none (default) or flipy. premultiplyalpha: specifies whether the bitmap's color channels should be premultiplied by the alpha channel. one of none, premultiply, or default (default). colorspaceconversion: specifies whether the image should be decoded using color space conversion. either none or default (default). the value default indicates that implementation-specific behavior is used. re
sizewidth: a long integer that indicates the output width. re
sizeheight: a long integer that indicates the output height. re
sizequality: specifies the algorithm to be used for resizing the input to match the output dimensions. one of pixelated, low (default), medium, or high. return value a promise which resolves to an imagebitmap object containing bitmap data from the given rectangle. exa...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
ying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-
size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-
size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play<...
WritableStream.WritableStream() - Web APIs
signal success or failure. the reason parameter contains a domstring describing why the stream was aborted. queuingstrategy optional an object that optionally defines a queuing strategy for the stream. this takes two parameters: highwatermark a non-negative integer — this defines the total number of chunks that can be contained in the internal queue before backpressure is applied.
size(chunk) a method containing a parameter chunk — this indicates the
size to use for each chunk, in bytes. note: you could define your own custom queuingstrategy, or use an instance of bytelengthqueuingstrategy or countqueuingstrategy for this object value. if no queuingstrategy is supplied, the default used is the same as a countqueuingstrategy with a high water mark of 1. return va...
WritableStreamDefaultWriter.ready - Web APIs
syntax var promise = writablestreamdefaultwriter.ready; value a promise. example the following example shows two uses of the ready property. the first uses ready to ensure that the writablestream is done writing and thus able to receive data before sending a binary chunk. ...
WritableStreamDefaultWriter - Web APIs
writablestreamdefaultwriter() creates a new writablestreamdefaultwriter object instance. properties writablestreamdefaultwriter.closedread only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the writer's lock is released, or rejects if the stream errors. writablestreamdefaultwriter.desired
sizeread only returns the desired
size required to fill the stream's internal queue. writablestreamdefaultwriter.readyread only returns a promise that resolves when the desired
size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure. methods writablestreamdefaultwriter.abort() aborts the stream, signaling th...
Sending and Receiving Binary Data - Web APIs
usly, using the post method, and firefox's non-standard sendasbinary(). var req = new xmlhttprequest(); req.open("post", url, true); // set headers and mime-type appropriately req.setrequestheader("content-length", 741); req.sendasbinary(abody); line 4 sets the content-length header to 741, indicating that the data is 741 bytes long. obviously you need to change this value based on the actual
size of the data being sent. line 5 uses the sendasbinary() method to initiate the request. note: this non-standard sendasbinary method is considered deprecated as of gecko 31 (firefox 31 / thunderbird 31 / seamonkey 2.28) and will be removed soon. the standard send(blob data) method can be used instead as explained above. you can also send binary content by passing an instance of the nsifileinputs...
Using XMLHttpRequest - Web APIs
eq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... // progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcomputable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ... ...
XRBoundedReferenceSpace.boundsGeometry - Web APIs
propriate for the underlying platform or xr hardware. in order to reduce the risk of the room boundaries being used for fingerprinting purposes, each point in the boundsgeometry array may be rounded or adjusted by some amount. the specification recommends that browsers shift the points to the nearest 5 centimeters (while avoiding going outside the physical limitations of the hardware). boundary
size xrboundedreferencespace is not intended to be used for very large bounded areas. instead, it's meant to be used for one-room spaces with no more than around 15 meters of available movement space in any direction from the native origin. that said, the bounds extend upward indefinitely, since the bounds are defined in only two dimensions. if you need to create a multi-room space, or a space which...
XRBoundedReferenceSpace - Web APIs
tially unrestricted space around the viewer's position. these bounds are defined using an array of points, each of which defines a vertex in a polygon inside which the user is allowed to move. this is typically used when the xr system is capable of tracking the user's physical movement within a limited distance of their starting position. the specified bounds may, in fact, describe the shape and
size of the room the user is located in, in order to let the webxr site or application prevent the user from colliding with the walls or other obstacles in the real world. at a minimum, the boundaries indicate the area in which the xr device is capable of tracking the user's movement. see the article using bounded reference spaces for details on how bounded spaces work and why they're useful. proper...
XRInputSourceArray - Web APIs
the interface xrinputsourcearray represents a live list of webxr input sources, and is used as the return value of the xrsession property inputsources. each entry is an xrinputsource representing one input device connected to the webxr system. in addition to being able to access the input sources in the list using standard array notation (that is, with index numbers in
size square brackets), methods are available to allow the use of iterators and the foreach() method is also available. properties the following properties are available on xrinputsourcearray objects. length read only the number of xrinputsource objects in the list. methods the following methods are available on xrinputsourcearray objects. you may also use the features of the symbol type. entries() returns an ite...
XRReferenceSpace: reset event - Web APIs
nstead of allowing this to happen, you can integrate the emulatedposition into the teleportation offset calculated prior to calling getoffsetreferencespace() to create a new reference space whose updated effective origin is adjusted by the distance the viewer's position jumped since the previous frame. this way, the user's position only changes once rather than twice. the effect of discontinuity
size the reset event won't be fired when the discontinuity is small enough that the device is able to regain tracking within the same tracking area. nor will be be fired at an unbounded reference space as it makes small adjustments to its native origin over time to maintain the space's stability in the vicinity of the user; only large discontinuities will trigger a reset. examples to add a handler ...
XRViewport - Web APIs
properties height read only the height, in pixels, of the viewport. width read only the width, in pixels, of the viewport. x read only the offset from the origin of the destination graphics surface (typically a xrwebgllayer) to the left edge of the viewport, in pixels. y read only the offset from the origin of the viewport to the bottom edge of the viewport; webgl's coordinate system places (0, 0) at the bottom left corner of the surface. ...
XRWebGLLayer() - Web APIs
ere is no support for requesting a specific mode yet. the default value is true. depth optional a boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. the default is true. framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel
size for the frame buffer. the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. the default is 1.0. ignoredepthvalues optional a boolean value which indicates whether or not to ignore the contents of the depth buffer while compositin...
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
for example, a value of 1.0 indicates that the frame buffer should be the same resolution as the actual display, while a value of 0.5 indicates that the frame buffer should be half the resolution of the display. ...
XRWebGLLayerInit - Web APIs
ere is no support for requesting a specific mode yet. the default value is true. depth optional a boolean value which, if true, requests that the new layer have a depth buffer; otherwise, no depth layer is allocated. the default is true. framebufferscalefactor optional a floating-point value which is used to scale the image during compositing, with a value of 1.0 represents the default pixel
size for the frame buffer. the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution. the default is 1.0. ignoredepthvalues optional a boolean value which indicates whether or not to ignore the contents of the depth buffer while compositin...
Using ARIA: Roles, states, and properties - Accessibility
ion attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-set
size microsoftedge-specific properties x-ms-aria-flowfrom ...
ARIA: dialog role - Accessibility
cus can be dropped to the beginning of the page. for most dialogs, the expected behavior is that the dialog's tab order wraps, which means that when the user tabs through the focusable elements in the dialog, the first focusable element will be focused after the last one has been reached. in other words, the tab order should be contained within and by the dialog. if the dialog can be moved or re
sized, ensure that these actions must be performable by keyboard users as well as mouse users. similarly, if a dialog provides special features like toolbars or context menus, these must be reachable and operable by keyboard users as well. dialogs can be modal or non-modal. when a modal dialog appears on the screen, it's not possible to interact with any page content outside the dialog. in other word...
An overview of accessible web applications and widgets - Accessibility
the tooltip. the example shows a simple web form with tooltips containing instructions associated with the entry fields. in this example, the html for the tooltip has the form shown in example 2a. line 9 sets the aria-hidden state to true. example 2a. html for a tooltip <div class="text"> <label id="tp1-label" for="first">first name:</label> <input type="text" id="first" name="first"
size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" /> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b. note that there is no custom classname used, only the status of the aria-hidden attribute on line 1. exampl...
HTML To MSAA - Accessibility
llet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @
size > 1 role_system_ list n/a n/a state_system_ multiselectable if multiselectable n/a n/a n/a select @
size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed ...
-moz-image-rect - CSS: Cascading Style Sheets
blocks. clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <div> blocks. css the css defines one container style, then the styles for the four boxes that comprise the complete image. the container looks like this: #container { width:267px; height:272px; top:100px; left:100px; position:absolute; font-
size:16px; text-shadow:white 0px 0px 6px; text-align:center; } then the four boxes defining the segments of the image are defined. let's look at them one at a time. #box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image. it defines a ...
-webkit-mask-box-image - CSS: Cascading Style Sheets
re: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image. <gradient> a -webkit-gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the
size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height). repeat the mask image is repeated as many times as is necessary to span the border box. may include a partial image if the mask image does not divide evenly into the border box. stretch the mask image...
:read-only - CSS: Cascading Style Sheets
x; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-
size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification. living standard no change. html5the definition of ':read-only' in that specification.
:read-write - CSS: Cascading Style Sheets
confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-
size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification. living standard no change. html5the definition of ':read-write' in that specificatio...
:where() - CSS: Cascading Style Sheets
"https://github.com/mdn">a link</a>. </footer> </article> in this somewhat-contrived example, we have two articles that each contain a section, an aside, and a footer. they differ by the classes used to mark the child elements. ...
@counter-style - CSS: Cascading Style Sheets
scriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. each additive tuple consists of a counter symbol and a non negative integer weight. the additive tuples must be specified in the descending order of their weights. speak-as describes how to read out the counter style in speech synthe
sizers, such as screen readers. for example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor. formal syntax @counter-style <counter-style-name> { [ system: <counter-system>; ] | [ symbols: <counter-symbols>; ] | [ additive-symbols: <additive-symbols>; ] | [ negative: <negativ...
font-weight - CSS: Cascading Style Sheets
d to the different styles of the same font family, and then use the font-weight descriptor to explicitly specify the font face's weights. the values for the css descriptor is same as that of its corresponding font property. there are generally limited weights available for a particular font family. when a specified weight doesn't exist, a nearby weight is used. fonts lacking bold are often synthe
sized by the user agent. to prevent this, use font-synthesis property. syntax /* single values */ font-weight: normal; font-weight: bold; font-weight: 400; /* multiple values */ font-weight: normal bold; font-weight: 300 500; the font-weight property is described using any one of the values listed below. values normal normal font weight. same as 400. bold bold font weight. same as 700. <n...
unicode-range - CSS: Cascading Style Sheets
udes a single character in it, meaning that only this character will be styled with this font. we could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set. html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-
size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status comment css fonts module level 3the definition of 'unicode-range' in that specification. candidate recommendation initial definition ...
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
.. } /* similarly: */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (max-resolution: 2dppx) { ... } examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-
size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } } result specifications specification status comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification. living standard initial standardization safari css reference 'media query extension...
height - CSS: Cascading Style Sheets
re can be used to apply styles based on the height of the viewport (or the page box, for paged media). syntax the height feature is specified as a <length> value representing the viewport height. it is a range feature, meaning that you can also use the prefixed min-height and max-height variants to query minimum and maximum values, respectively. ...
light-level - CSS: Cascading Style Sheets
cult to read. for example: bright daylight. examples this code will likely not work on any devices (device compatibility is low). @media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-
size: 2em; } } specifications specification status comment media queries level 5the definition of 'light-level' in that specification. editor's draft initial definition. ...
width - CSS: Cascading Style Sheets
width css media feature can be used to test the width of the viewport (or the page box, for paged media). syntax the width feature is specified as a <length> value representing the viewport width. it is a range feature, meaning that you can also use the prefixed min-width and max-width variants to query minimum and maximum values, respectively. ...
orientation - CSS: Cascading Style Sheets
lerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. landscape the document should be locked into landscape orientation. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the
size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification. working draft initial definition ...
user-zoom - CSS: Cascading Style Sheets
the user cannot zoom in or out. accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the
size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification. working draft initial definition ...
zoom - CSS: Cascading Style Sheets
ctor of a document defined by the @viewport at-rule. a zoom factor of 1.0 or 100% corresponds to no zooming. larger values are zoomed in. smaller values are zoomed out. syntax /* keyword value */ zoom: auto; /* <number> values */ zoom: 0.8; zoom: 2.0; /* <percentage> values */ zoom: 150%; values auto the user agent will set the document's initial zoom factor. the user agent may use the
size of canvas area on which the document is rendered to determine that factor. <number> a non-negative number used as the zoom factor. <percentage> a non-negative percentage value used as the zoom factor. formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <num...
Attribute selectors - CSS: Cascading Style Sheets
the css attribute selector matches elements based on the presence or value of a given attribute. /* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-
size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr. [attr=value] represents elements with an attribute name of attr whose value is exactly value. [attr~=value] represents elements with an attribute name of a...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
to animate and a button that will play (or replay) the animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. ...
Using multiple backgrounds - CSS: Cascading Style Sheets
d1, background 2, ..., backgroundn; } you can do this with both the shorthand background property and the individual properties thereof except for background-color. that is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-
size. example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, ...
Using URL values for the cursor property - CSS: Cascading Style Sheets
ed cursor. note: starting with gecko 2.0, gecko also supports the svg image format for cursors. however, the svg image must contain a length-valued (not percentage-valued) height and width on its root svg node. javascript, css animation, and declarative smil inside an svg image are ignored; you can't use svg to create an animated cursor, for example. in gecko (firefox) the limit of the cursor
size is 128×128px. larger cursor images are ignored. however, you should limit yourself to the
size 32×32 for maximum compatibility with operating systems and platforms. (due to a bug in gecko 1.9.2-1.9.2.6, firefox 3.6-3.6.6 on windows limits to 32×32px. this is fixed in later versions.) translucent cursors are not supported on windows releases earlier than xp. this is a limitation of the operat...
CSS Basic User Interface - CSS: Cascading Style Sheets
css basic user interface is a css module that lets you define the rendering and functionality of features related to the user interface. reference properties appearance box-sizing cursor ime-mode nav-down nav-left nav-right nav-up outline outline-width outline-style outline-color outline-offset re
size text-overflow user-select guides using url values for the cursor property explains how a url can be used with the cursor property to produce custom cursors. specifications specification status comment css basic user interface module level 4 working draft css basic user interface module level 3 recommendation css level 2 (revision 1) recommendation initial definition. ...
Box alignment in Flexbox - CSS: Cascading Style Sheets
etting a margin of auto on one item in a set of flex items all aligned to start, we can create a split navigation. this works well with flexbox and the alignment properties. as soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space. the gap properties row-gap column-gap gap creating fixed
size gaps between items on the main axis, the column-gap property will create fixed
size gaps between adjacent items. on the cross axis the row-gap property will create spacing between adjacent flex lines, therefore flex-wrap must also be set to wrap for this to have any effect. reference css properties justify-content align-content place-content justify-items align-items place-items ali...
CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual formatting model. ...
Basic Concepts of Multicol - CSS: Cascading Style Sheets
a multicol container then column-count will act as a maximum number of columns. therefore the behaviour as described for column-width will happen, until the number of columns in column-count is reached. after this point no more columns will be drawn, and the extra space is distributed evenly between the existing columns, even if there is enough room for more columns of the specified column-width
size. when using both properties together you may get fewer columns than specified in the value for column-count. in this next example we use column-width of 200px and column-count of 2. even if there is space for more than two columns, we get two. if there is not enough space for two columns of 200px, however, we get one. the columns shorthand you can use the columnsshorthand to set column-coun...
Using multi-column layouts - CSS: Cascading Style Sheets
many columns as necessary, possibly overflowing to the right. therefore, if the height is constrained, by setting the css height or max-height properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. this mode is also much more efficient for layout. column gaps there is a gap between columns. the recommended default is 1em. this
size can be changed by applying the column-gap property to the multi-column block: example 6 html <div id="column_gap"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderi...
CSS Multi-column Layout - CSS: Cascading Style Sheets
css multi-column layout is a module of css that adds support for multi-column layouts. support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap
sizes between columns, and column dividing lines (known as column rules) along with their appearance. basic example in the following example the column-count property has been applied to the element with a class of container. as the value of column-count is 3, the content is arranged into 3 columns of equal
size. relationship to fragmentation multiple-column layout is closely related to paged media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation...
CSS Device Adaptation - CSS: Cascading Style Sheets
css device adaptation is a module of css that lets you define the
size, zoom factor, and orientation of the viewport. reference at-rules @viewport specifications specification status comment css device adaptation working draft initial definition ...
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
ok at how the alignment and justification properties work in flexbox. to center our box we use the align-items property to align our item on the cross axis, which in this case is the block axis running vertically. we use justify-content to align the item on the main axis, which in this case the inline axis running horizontally. you can take a look at the code of this example below. change the
size of the container or nested element and the nested element always remains centered. properties that control alignment the properties we will look at in this guide are as follows. justify-content — controls alignment of all items on the main axis. align-items — controls alignment of all items on the cross axis. align-self — controls alignment of an individual flex item on the cross a...
OpenType font features guide - CSS: Cascading Style Sheets
position) position variants are used to enable typographic superscript and subscript glyphs. these are designed to work with the surrounding text without altering the baseline or line spacing. this is one of the key benefits over using the <sub> or sup elements. capitals (font-variant-caps) one of the more common use cases for opentype features is proper small caps. these are capital letters
sized to fit better amongst lower case letters and are generally used for acronyms and abbreviations. numerals (font-variant-numeric) there are several different styles of numerals commonly included in fonts: 'lining' figures are all the same height and on the same baseline. 'oldstyle' figures are mixed height and designed to have the appearance of ascenders and descenders like other lower cas...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
re for your smallest screen devices too. if a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source. create a responsive, and responsible grid with a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen
sizes and devices. grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. the key here is to keep testing, a very simple test is to tab around the document. does that order still make sense? check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. if so that would be a ...
CSS Grid Layout - CSS: Cascading Style Sheets
like tables, grid layout enables an author to align elements into columns and rows. 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. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. ...
CSS Images - CSS: Cascading Style Sheets
css images is a module of css that defines what types of images can be used (the <image> type, containing urls, gradients and other types of images), how to re
size them and how they, and other replaced content, interact with the different layout models. reference properties image-orientation image-rendering image-resolution object-fit object-position functions linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() conic-gradient() repeating-conic-gradient() url() element() image() cross-fade() data types <gradient> <image> guides using css gradients presents a specific type of css images, gradients, and how to create and use these. implementing image sprites in css describes the common technique grouping several i...
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
n-inline sets all the inline margins. padding-block sets the block padding. padding-inline sets the inline padding. margin examples the mapped margin properties of margin-inline-start, margin-inline-end, margin-block-start, and margin-inline-end can be used instead of their physical counterparts. in the example below i have created two boxes and added different
sized margins to each edge. i have added an extra container with a border in order to make the margin more obvious to see. one box uses physical properties and the other logical properties. try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the sec...
CSS Masking - CSS: Cascading Style Sheets
that defines means, including masking and clipping, for partially or fully hiding portions of visual elements. reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-
size mask-type specifications specification status comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification. recommendation initial definition ...
CSS Properties Reference - CSS: Cascading Style Sheets
op-color bordertopcolor border-top-style bordertopstyle border-top-width bordertopwidth border-width borderwidth clear clear clip clip color color cursor cursor display display filter filter float cssfloat font font font-family fontfamily font-
size font
size font-variant fontvariant font-weight fontweight height height left left letter-spacing letterspacing line-height lineheight list-style liststyle list-style-image liststyleimage list-style-position liststyleposition list-style-type liststyletype margin mar...
Shapes from box values - CSS: Cascading Style Sheets
e outside border edge. this shape follows all of the normal border radius shaping rules for the outside of the border. you still have a border, even if you have not used the css border property. in this case it will be the same as padding-box, the shape defined by the outside padding edge. in the example below you can see how the text now follows the line created by the border. change the border
size and the content follows it. padding-box the padding-box value defines the shape enclosed by the outside padding edge. this shape follows all of the normal border radius shaping rules for the inside of the border. if you have no padding then padding-box is the same as content-box. content-box the content-box value defines the shape enclosed by the outside content edge. each corner radius o...
CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-
size text-align text-align-last text-indent text-justify text-
size-adjust text-transform white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text. css text module level 3 working draft css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
Introducing the CSS Cascade - CSS: Cascading Style Sheets
this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the web developer. which css entities participate in the cascade only css declarations, that is property/value pairs, participate in the cascade. this means that at-rules containing entities other than declarations, such as a @font-face rule containing descriptors, don't participate in the cascade. ...
Comments - CSS: Cascading Style Sheets
omments have no effect on the layout of a document. syntax comments can be placed wherever white space is allowed within a style sheet. they can be used on a single line, or traverse multiple lines. /* comment */ examples /* a one-line comment */ /* a comment which stretches over several lines */ /* the comment below is used to disable specific styling */ /* span { color: blue; font-
size: 1.5em; } */ notes the /* */ comment syntax is used for both single and multiline comments. there is no other way to specify comments in external style sheets. however, when using the <style> element, you may use <!-- --> to hide css from older browsers, although this is not recommended. as with most programming languages that use the /* */ comment syntax, comments cannot be nested. in other w...
Inline formatting context - CSS: Cascading Style Sheets
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 vertical writing mode. if there is a float within the same block formatting context however, the float will cause the line boxes that wrap the float to become shorter. ...
Card - CSS: Cascading Style Sheets
display: grid; grid-template-rows: max-content 200px 1fr; } the heading track is set to max-content, which prevents it from stretching. i have decided that i want my image to live within a track that is 200 pixels tall. i then set the next track — which is where the content lives — to 1fr. this means it will take up any additional space. if the track does have a footer it will be auto-
sized, as rows created in the implicit grid are auto-
sized by default. therefore this will fit the content added to it. note: the various elements in separate cards do not align with each other, as each card is an independent grid. the proposed subgrid feature of grid level 2 would give a solution to this issue. useful fallbacks or alternative methods flexbox could be used to lay out the card, in...
Column layouts - CSS: Cascading Style Sheets
umns, with all heights being equal. multiple rows of columns lined up by row and column. the recipes you need to choose different layout methods in order to achieve your requirements. a continuous thread of content — multi-column layout if you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. the columns must all be the same
size, and you are unable to target an individual column or the content of an individual column. you can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule. download this example use multicol when: you want your text to display in newspaper-like columns. you have a set of small items you want to break into columns. you do not need...
Recipe: Media objects - CSS: Cascading Style Sheets
ave chosen to use grid layout for the media object as it allows me to control the layout in two dimensions when i need to. this means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object. another reason to use grid layout is in order that i can use fit-content() for the track sizing of the image. by using fit-content with a maximum
size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the
size of that image — the max-content
size. if the image is larger, the track stops growing at 200 pixels and as the image has a max-width of 100% applied, it scales down so that it continues to fit inside the column. by using grid-template-areas to achieve the layout, i can see the pattern in the c...
Sticky footers - CSS: Cascading Style Sheets
r grid container. choices made in the above example we achieve the sticky footer using css grid layout. the .wrapper has a minimum height of 100% which means it is as tall as the container it is in. we then create a single column grid layout with three rows, one row for each part of our layout. grid auto-placement will place our items in source order and so the header goes into the first auto
sized track, the main content into the 1fr track and the footer into the final auto
sized track. the 1fr track will take up all available space and so grows to fill the gap. alternate method if you need compatibility with browsers that do not support grid layout you can also use flexbox to create a sticky footer. the flexbox example starts out in the same way, but we use display:flex rather than ...
Using media queries - CSS: Cascading Style Sheets
the not or only logical operators, the media type is optional and the all type will be implied. all suitable for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthe
sizers. deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in media queries 4 and shouldn't be used. the aural type has been replaced by speech, which is similar. media features media features describe specific characteristics of the user agent, output device, or environme...
Shorthand properties - CSS: Cascading Style Sheets
ne declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed information, including css3 properties. font properties the following declarations ... font-style: italic; font-weight: bold; font-
size: .8em; line-height: 1.2; font-family: arial, sans-serif; ... can be shortened to the following: font: italic bold .8em/1.2 arial, sans-serif; this shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-
size-adjust: none (css2.0 / css3), font-stretch: normal (css3). border properties with borders, the width, color, and style can be s...
animation-fill-mode - CSS: Cascading Style Sheets
nite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default). html <p>move your mouse over the gray box!</p> <div class="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-
size: 0; } 100% { font-
size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples. specifications specification status comment css animationsthe definition of 'animation-fill-mode' in th...
animation - CSS: Cascading Style Sheets
utton class="pause" title="pause"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s slidein;</div> <div class="animation a3"></div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-
size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
meterchunk firefox removed in firefox 64. progresschunk firefox removed in firefox 64. progresschunk-vertical firefox removed in firefox 64. radio-container firefox removed in firefox 64. radio-label firefox removed in firefox 64. radiomenuitem firefox removed in firefox 64. re
sizer firefox removed in firefox 63 re
sizerpanel firefox removed in firefox 63. scrollbarbutton-down firefox removed in firefox 63. scrollbarbutton-left firefox removed in firefox 63. scrollbarbutton-right firefox removed in firefox 63. scrollbarbutton-up firefox removed in firefox 63. sep...
backdrop-filter - CSS: Cascading Style Sheets
e-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-
size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specificati...
backface-visibility - CSS: Cascading Style Sheets
div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-
size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, ...
border-bottom-left-radius - CSS: Cascading Style Sheets
f the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-bottom-right-radius - CSS: Cascading Style Sheets
f the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-end-end-radius - CSS: Cascading Style Sheets
; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-end-start-radius - CSS: Cascading Style Sheets
r-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-image-outset - CSS: Cascading Style Sheets
fied, it applies to all four sides. if two values are specified, the first applies to the top and bottom and the second to the left and right. if three values are specified, the first applies to the top, the second to the left and right, and the third to the bottom. if four values are specified, they apply to the top, right, bottom, and left in that order (clockwise). values <length> the
size of the border-image outset as a dimension — a number with a unit. <number> the
size of the border-image outset as a multiple of the element's corresponding border-widths. for example, if an element has border-width: 1em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem. formal definition initial value0applies toall elements, excep...
border-radius - CSS: Cascading Style Sheets
is a <length> or a <percentage> denoting a radius to use for the border in the bottom-right corner of the element's box. it is used only in the three- and four-value syntaxes. bottom-left is a <length> or a <percentage> denoting a radius to use for the border in the bottom-left corner of the element's box. it is used only in the four-value syntax. <length> denotes the
size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. negative values are invalid. <percentage> denotes the
size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. negativ...
border-spacing - CSS: Cascading Style Sheets
hen one <length> value is specified, it defines both the horizontal and vertical spacings between cells. when two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows). values <length> the
size of the spacing as a fixed value. formal definition initial value0applies totable and inline-table elementsinheritedyescomputed valuetwo absolute lengthsanimation typediscrete formal syntax <length> <length>? examples spacing and padding table cells this example applies a spacing of .5em vertically and 1em horizontally between a table's cells. note how, along its outside edges, the table's...
border-start-end-radius - CSS: Cascading Style Sheets
start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-start-start-radius - CSS: Cascading Style Sheets
tart-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-style - CSS: Cascading Style Sheets
order is set, it won't be displayed. dotted displays a series of rounded dots. the spacing of the dots is not defined by the specification and is implementation-specific. the radius of the dots is half the computed value of the same side's border-width. dashed displays a series of short square-ended dashes or line segments. the exact
size and length of the segments are not defined by the specification and are implementation-specific. solid displays a single, straight, solid line. double displays two straight lines that add up to the pixel
size defined by border-width. groove displays a border with a carved appearance. it is the opposite...
border-top-left-radius - CSS: Cascading Style Sheets
f the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
border-top-right-radius - CSS: Cascading Style Sheets
f the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of the ellipse to use for the border in that corner. the second value is a <length> or a <percentage> denoting the vertical semi-major axis of the ellipse to use for the border in that corner. values <length-percentage> denotes the
size of the circle radius or the semi-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agen...
bottom - CSS: Cascading Style Sheets
c(); formal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed. ...
box-flex - CSS: Cascading Style Sheets
ex value of each of the content elements. content elements that have zero flex do not grow. if only one content element has nonzero flex, then it grows to fill the available space. content elements that have the same flex grow by the same absolute amounts. if the flex value is set using the element's flex attribute, then the style is ignored. to make xul elements in a containing box the same
size, set the containing box's equal
size attribute to the value always. this attribute does not have a corresponding css property. a trick to make all content elements in a containing box the same
size, is to give them all a fixed
size (e.g. height: 0), and the same box-flex value greater than zero (e.g. -moz-box-flex: 1). formal definition initial value0applies toelements that are direct children ...
break-after - CSS: Cascading Style Sheets
ding</h2> <p>in finibus viverra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-
size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-
size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidat...
break-before - CSS: Cascading Style Sheets
ding</h2> <p>in finibus viverra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-
size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-
size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candid...
clear - CSS: Cascading Style Sheets
element is moved below the margin edge of all relevant floats. this affects the position of later floats, since later floats cannot be positioned higher than earlier ones. the floats that are relevant to be cleared are the earlier floats within the same block formatting context. if an element contains only floated elements, its height collapses to nothing. if you want it to always be able to re
size, so that it contains floating elements inside it, you need to self-clear its children. this is called clearfix, and one way to do it is to add clear to a replaced ::after pseudo-element on it. #container::after { content: ""; display: block; clear: both; } syntax /* keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* global...
<color> - CSS: Cascading Style Sheets
d color of multiple document interface. background desktop background. buttonhighlight the color of the border facing the light source for 3-d elements that appear 3-d due to that layer of surrounding border. buttonshadow the color of the border away from the light source for 3-d elements that appear 3-d due to that layer of surrounding border. captiontext text in caption,
size box, and scrollbar arrow box. should be used with the activecaption background color. inactiveborder inactive window border. inactivecaption inactive window caption. should be used with the inactivecaptiontext foreground color. inactivecaptiontext color of text in an inactive caption. should be used with the inactivecaption background color. infobackground background color...
Computed value - CSS: Cascading Style Sheets
special values inherit, initial, unset, and revert. doing the computation needed to reach the value described in the "computed value" line in the property's definition table. the computation needed to reach a property's computed value typically involves converting relative values (such as those in em units or percentages) to absolute values. for example, if an element has specified values font-
size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font
size). however, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. additionally, unitless numbers specified on the line-height pro...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
ine flex containers. if you create a flex container using the single value of inline-flex you will have an inline-level box with flex children. the children behave in the same way as the flex children of a block-level container. the only thing that has changed is that the parent is now an inline-level box. it therefore behaves like other inline-level things, and doesn't take up the full width (or
size in the inline dimension) that a block-level box does. this means that some following text could come up alongside the flex container. the same is true when working with grid layout. using display: grid will give you a block-level box, which creates a grid formatting context for the direct children. using display: inline-grid will create an inline-level box, which creates a grid formatting cont...
flex-shrink - CSS: Cascading Style Sheets
in use, flex-shrink is used alongside the other flex properties flex-grow and flex-basis, and normally defined using the flex shorthand. 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. ...
font-kerning - CSS: Cascading Style Sheets
n stored in the font is disabled. formal definition initial valueautoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="input">av t. ...
font-style - CSS: Cascading Style Sheets
s italic is used instead. if neither is available, the style is artificially simulated. oblique <angle> selects a font classified as oblique, and additionally specifies an angle for the slant of the text. if one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. if no oblique faces are available, the browser will synthe
size an oblique version of the font by slanting a normal face by the specified amount. valid values are degree values of -90deg to 90deg inclusive. if an angle is not specified, an angle of 14 degrees is used. positive values are slanted to the end of the line, while negative values are slanted towards the beginning. in general, for a requested angle of 14 degrees or greater, larger angles are pref...
font-variant-numeric - CSS: Cascading Style Sheets
ine. it corresponds to the opentype values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. it corresponds to the opentype values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same
size. it corresponds to the opentype values pnum. tabular-nums activating the set of figures where numbers are all of the same
size, allowing them to be easily aligned like in tables. it corresponds to the opentype values tnum. <numeric-fraction-values> these values controls the glyphs used to display fractions. two values are possible: diagonal-fractions activating the set of figures wher...
font-variant-position - CSS: Cascading Style Sheets
ffect on the line-height and other box characteristics. syntax the font-variant-position property is specified as one of the keyword values listed below. values normal deactivates alternate superscript and subscript glyphs. sub activates subscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthe
sized glyphs. super activates superscript alternate glyphs. if, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthe
sized glyphs. formal definition initial valuenormalapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub ...
font-variation-settings - CSS: Cascading Style Sheets
any axis can be used as long as it is given a unique 4-character axis. some will end up becoming more common, and may even become registered over time. note: registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. note that font designers aren't forced follow this practice in any way, and some ...
<gradient> - CSS: Cascading Style Sheets
cial type of <image> that consists of a progressive transition between two or more colors. 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. a css gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element to which it applies. syntax the <gradient> data type is defined with one of the function types listed below. linear gradient linear gradients transition colors progressively along an imaginary line. they are generated with the linear-gradient() function. radial gradient radial gradients transition colors progres...
grid-area - 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. if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. ...
height - CSS: Cascading Style Sheets
intrinsic preferred height. min-content the intrinsic minimum height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, )). accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text
size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the height of the containin...
image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm. the property applies to an element itself, to any images set in its other properties, and to its descendants. the user agent will scale an image when the page author specifies dimensions other than its natural
size. scaling may also occur due to user interaction (zooming). for example, if the natural
size of an image is 100×100px, but its actual dimensions are 200×200px (or 50×50px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. this property has no effect on non-scaled images. syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-renderin...
image-set() - CSS: Cascading Style Sheets
for high pixel density screens. resolution and bandwidth differ by device and network access. the image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the browser picks the most appropriate for the device and settings. resolution can be used as a proxy for file
size — a user agent on a slow mobile connection with a high-resolution screen may prefer to receive lower-resolution images rather than waiting for a higher resolution image to load. image-set() allows the author to provide options rather than determining what each individual user needs. syntax image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resol...
<length-percentage> - CSS: Cascading Style Sheets
ils of the individual syntaxes allowed by this type. examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-
size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-
size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. therefore, all of t...
line-height-step - CSS: Cascading Style Sheets
oblock containersinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit. the line box in <h1> does not fit into one step unit and thus occupies two, but it is still centered within the two step unit. :root { font-
size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-
size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specifications specification status comment css rhythmic sizingthe definition of 'line-height-step' in that specification. working draft initial definition. ...
linear-gradient() - CSS: Cascading Style Sheets
adients follows the same rules as color stops in svg gradients. note also that the first example above does not exactly render as depicted in mozilla firefox (particularly version 80.0b3). you'll have to set the html height property to 100% or 100vh to render as depicted. description as with any gradient, a linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred
size, nor a preferred ratio. its concrete
size will match the
size of the element it applies to. to create a linear gradient that repeats so as to fill its container, use the repeating-linear-gradient() function instead. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, linear-gradient() won't work on background-color and other pr...
margin-block-end - CSS: Cascading Style Sheets
ode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
margin-block-start - CSS: Cascading Style Sheets
directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-block: 10px 20px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text
size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. cons...
margin-inline-end - CSS: Cascading Style Sheets
mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-end: 10px; /* an absolute length */ margin-inline-end: 1em; /* relative to the text
size */ margin-inline-end: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-end: auto; /* global values */ margin-inline-end: inherit; margin-inline-end: initial; margin-inline-end: unset; it relates to margin-block-start, margin-block-end, and margin-inline-start, which define the other margins of the element. values the margin-inline-end propert...
margin-inline-start - CSS: Cascading Style Sheets
de, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-start: 10px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text
size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. values the margin-inline-start property takes the same values as the margin-left propert...
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. ...
margin - CSS: Cascading Style Sheets
all four sides. when two values are specified, the first margin applies to the top and bottom, the second to the left and right. when three values are specified, the first margin applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the
size of the margin as a fixed value. <percentage> the
size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a suitable margin to use. for example, in certain cases this value can be used to center an element. formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</...
mask-border-outset - CSS: Cascading Style Sheets
all four sides. when two values are specified, the first outset applies to the top and bottom, the second to the left and right. when three values are specified, the first outset applies to the top, the second to the left and right, the third to the bottom. when four values are specified, the outsets apply to the top, right, bottom, and left in that order (clockwise). values <length> the
size of the mask border outset as a dimension. <number> the
size of the mask border outset as a multiple of the corresponding border-width. formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation type...
mask-clip - CSS: Cascading Style Sheets
= <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-
size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option ...
mask-composite - CSS: Cascading Style Sheets
mation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-
size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.ad...
min-height - CSS: Cascading Style Sheets
in-height: min-content; min-height: fit-content(20em); /* global values */ min-height: inherit; min-height: initial; min-height: unset; values <length> defines the min-height as an absolute value. <percentage> defines the min-height as a percentage of the containing block's height. auto the browser will calculate and select a min-height for the specified element. none no limit on the
size of the box. max-content the intrinsic preferred min-height. min-content the intrinsic minimum min-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and...
min-width - CSS: Cascading Style Sheets
ontent; min-width: min-content; min-width: fit-content(20em); /* global values */ min-width: inherit; min-width: initial; min-width: unset; values <length> defines the min-width as an absolute value. <percentage> defines the min-width as a percentage of the containing block's width. auto the browser will calculate and select a min-width for the specified element. none no limit on the
size of the box. max-content the intrinsic preferred min-width. min-content the intrinsic minimum min-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row ...
offset-position - CSS: Cascading Style Sheets
nd the second represents the vertical position. if only one value is specified, the second value is assumed to be center. if three or four values are used, the length-percentage values are offsets for the preceding keyword value(s). for more explanation of these value types, see background-position. ...
offset - CSS: Cascading Style Sheets
g closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: referto
sizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcomputed valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageo...
order - CSS: Cascading Style Sheets
definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block. the flexible box layout module automatically creates blocks of equal vertical
size and uses as much horizontal space as available. html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; } result specifications ...
orphans - CSS: Cascading Style Sheets
aph continues on a following page.) syntax values <integer> the minimum number of lines that can stay by themselves at the bottom of a fragment before a fragmentation break. the value must be positive. formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax <integer> examples setting a minimum orphan
size of three lines html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one. it is used to demonstrate how orphans work.</p> <p>this is the third paragraph. it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } ...
overflow-wrap - CSS: Cascading Style Sheets
such as a space between two words). anywhere to prevent overflow, an otherwise unbreakable string of characters — like a long word or url — may be broken at any point if there are no otherwise-acceptable break points in the line. no hyphenation character is inserted at the break point. soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic
sizes. break-word the same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are not considered when calculating min-content intrinsic
sizes. formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomp...
padding-block-end - CSS: Cascading Style Sheets
, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-block-end: 10px; /* an absolute length */ padding-block-end: 1em; /* a length relative to the text
size */ /* <percentage> value */ padding-block-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-botto...
padding-block-start - CSS: Cascading Style Sheets
d text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-block-start: 10px; /* an absolute length */ padding-block-start: 1em; /* a length relative to the text
size */ /* <percentage> value */ padding-block-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, pad...
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
padding-bottom - CSS: Cascading Style Sheets
* <length> values */ padding-bottom: 0.5em; padding-bottom: 0; padding-bottom: 2cm; /* <percentage> value */ padding-bottom: 10%; /* global values */ padding-bottom: inherit; padding-bottom: initial; padding-bottom: unset; the padding-bottom property is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the
size of the padding as a fixed value. must be nonnegative. <percentage> the
size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line...
padding-inline-end - CSS: Cascading Style Sheets
lity, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-inline-end: 10px; /* an absolute length */ padding-inline-end: 1em; /* a length relative to the text
size */ /* <percentage> value */ padding-inline-end: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bot...
padding-inline-start - CSS: Cascading Style Sheets
, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ padding-inline-start: 10px; /* an absolute length */ padding-inline-start: 1em; /* a length relative to the text
size */ /* <percentage> value */ padding-inline-start: 5%; /* a padding relative to the block container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, ...
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
padding-left - CSS: Cascading Style Sheets
ion. syntax /* <length> values */ padding-left: 0.5em; padding-left: 0; padding-left: 2cm; /* <percentage> value */ padding-left: 10%; /* global values */ padding-left: inherit; padding-left: initial; padding-left: unset; the padding-left property is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the
size of the padding as a fixed value. must be nonnegative. <percentage> the
size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line...
padding-right - CSS: Cascading Style Sheets
yntax /* <length> values */ padding-right: 0.5em; padding-right: 0; padding-right: 2cm; /* <percentage> value */ padding-right: 10%; /* global values */ padding-right: inherit; padding-right: initial; padding-right: unset; the padding-right property is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the
size of the padding as a fixed value. must be nonnegative. <percentage> the
size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line...
padding-top - CSS: Cascading Style Sheets
declaration. syntax /* <length> values */ padding-top: 0.5em; padding-top: 0; padding-top: 2cm; /* <percentage> value */ padding-top: 10%; /* global values */ padding-top: inherit; padding-top: initial; padding-top: unset; the padding-top property is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the
size of the padding as a fixed value. must be nonnegative. <percentage> the
size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. it also applies to ::first-letter and ::first-line...
padding - CSS: Cascading Style Sheets
four sides. when two values are specified, the first padding applies to the top and bottom, the second to the left and right. when three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise). values <length> the
size of the padding as a fixed value. <percentage> the
size of the padding as a percentage, relative to the width of the containing block. formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and ta...
perspective - CSS: Cascading Style Sheets
a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-
size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, ...
row-gap (grid-row-gap) - 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. css grid layout initially defined the grid-row-gap property. this prefixed property is being replaced by row-gap. however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above. ...
scroll-margin-inline-end - CSS: Cascading Style Sheets
e overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled 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 val...
scroll-margin-inline-start - CSS: Cascading Style Sheets
e overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled 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 margi...
scroll-margin-inline - CSS: Cascading Style Sheets
e overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled 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 val...
scroll-margin - CSS: Cascading Style Sheets
e overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point. the child elements are styled 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 margi...
scroll-snap-coordinate - CSS: Cascading Style Sheets
iv> </div> <div> <p>at coordinate (50, 0)</p> <div class="scrollcontainer coordinate50"> <div>1</div> <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; ...
scroll-snap-destination - CSS: Cascading Style Sheets
ollcontainer destination50"> <div>1</div> <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-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-
size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-
size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollco...
scroll-snap-stop - CSS: Cascading Style Sheets
ndatory-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) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } html <div ...
scroll-snap-type-x - CSS: Cascading Style Sheets
-snap-type-x: unset; syntax values none when the visual viewport of this scroll container is scrolled horizontally, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled horizontally. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or re
sized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled horizontally considering the user agent's scroll parameters. if content is added, moved, deleted or re
sized the scroll offset may be adjusted to maintain the resting on that snap point. formal def...
scroll-snap-type-y - CSS: Cascading Style Sheets
roll-snap-type-y: unset; syntax values none when the visual viewport of this scroll container is scrolled vertically, it must ignore snap points. mandatory the visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled vertically. that means it snaps on that point when the scroll action finished, if possible. if content is added, moved, deleted or re
sized the scroll offset will be adjusted to maintain the resting on that snap point. proximity the visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled vertically considering the user agent's scroll parameters. if content is added, moved, deleted or re
sized the scroll offset may be adjusted to maintain the resting on that snap point. formal defin...
scrollbar-width - CSS: Cascading Style Sheets
if the author does not provide an alternative scrolling mechanism. while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative. wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. and introduced in wcag 2.1, criterion 2.5.5 (target
size) advises that touch targets should be at least 44px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised). mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding ...
text-align-last - CSS: Cascading Style Sheets
mputed valueas specifiedanimation typediscrete formal syntax auto | start | end | left | right | center | justify examples justifying the last line <p>integer elementum massa at nulla placerat varius. suspendisse in libero risus, in interdum massa. vestibulum ac leo vitae metus faucibus gravida ac in neque. nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> css p { font-
size: 1.4em; text-align: justify; text-align-last: center; } results specifications specification status comment css text module level 3the definition of 'text-align-last' in that specification. working draft initial definition ...
text-decoration-skip-ink - CSS: Cascading Style Sheets
ion typediscrete formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> css p { font-
size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink { text-decoration-skip-ink: none; } .skip-ink-all{ text-decoration-skip-ink: all; } result specifications specification status comment css text decoration module level 4the definition of 'text-decoration-skip-ink' in that specificatio...
text-decoration-skip - CSS: Cascading Style Sheets
a decorating box never draws over its own box decoration. formal definition initial valueobjectsapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-
size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status comment css text decoration module level 4the definition of 'text-decoration-skip' in that specification. working draft initial definition ...
text-decoration - CSS: Cascading Style Sheets
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. text decorations are drawn across descendant text elements. this means that if an element specifies a text decoration, then a child element can't remove the decoration. for example, in the markup <p>this text has <em>some empha
sized words</em> in it.</p>, the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. the style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined. however, the rule em { text-decoration: overline; } would cause a second decoration to appear on "some empha
sized words". constituent properties this pr...
text-justify - CSS: Cascading Style Sheets
que sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="char"><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. ...
text-overflow - CSS: Cascading Style Sheets
is this keyword value will display an ellipsis ('…', u+2026 horizontal ellipsis) to represent clipped text. the ellipsis is displayed inside the content area, decreasing the amount of text displayed. if there is not enough space to display the ellipsis, it is clipped. <string> the <string> to be used to represent clipped text. the string is displayed inside the content area, shortening the
size of the displayed text. if there is not enough space to display the string itself, it is clipped. fade this keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge. fade( <length> | <percentage> ) this function clips the overflowing inline content and applies a fade-out effect near the edge of the line ...
text-underline-position - CSS: Cascading Style Sheets
amet feugiat tortor volutpat quis. nam eget sodales quam. aliquam accumsan tellus ac erat posuere.</p> <p class="vertical">lorem ipsum dolor sit amet, consectetur adipiscing elit. nullam consectetur ac turpis vel laoreet. nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. nam eget sodales quam. aliquam accumsan tellus ac erat posuere.</p> our css looks like this: p { font-
size: 1.5rem; text-transform: capitalize; text-decoration: underline; text-decoration-thickness: 2px; } .horizontal { text-underline-position: under; } .vertical { writing-mode: vertical-rl; text-underline-position: left; } in this example we set both the paragraphs to have a thick underline. in the horizontal text we use text-underline-position: under; to put the underline below all th...
top - CSS: Cascading Style Sheets
working draft adds behavior for sticky positioning. css level 2 (revision 1)the definition of 'top' in that specification. recommendation initial definit...
perspective() - CSS: Cascading Style Sheets
rspective-box-far"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> <p>with perspective (4cm):</p> <div class="perspective-box-closer"> <div class="face front">a</div> <div class="face top">b</div> <div class="face left">c</div> </div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-
size: 100px; text-align: center; } p + div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { backgroun...
scale() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. this scaling transformation is characterized by a two-dimensional vector. its coordinates define how much scaling is done in each direction. if both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. ...
scale3d() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. ...
scaleX() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. it modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalex(-1) defines an axial symmetry, with a vertical axis passing through the origin (as specified by the transform-origin property). note: scalex(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1). syntax scalex(s) values s is a <number> representing the scaling factor to apply on the abscissa of each point of the element. ...
scaleY() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scaley(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the transform-origin property). note: scaley(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1). ...
scaleZ() - CSS: Cascading Style Sheets
its result is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. ...
transform-style - CSS: Cascading Style Sheets
de>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .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(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background:...
transform - CSS: Cascading Style Sheets
otion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. ...
transition-timing-function - CSS: Cascading Style Sheets
nding property as specified by the transition-property property, which acts as a transition-property list. if there are fewer timing functions specified than in the transition-property list, the user agent must calculate which value is used by repeating the list of values until there is one for each transition property. if there are more timing functions, the list is simply truncated to the right
size. in both cases, the css declaration stays valid. syntax /* keyword values */ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-out; transition-timing-function: ease-in-out; transition-timing-function: linear; transition-timing-function: step-start; transition-timing-function: step-end; /* function values */ transition-timing-function: steps...
width - CSS: Cascading Style Sheets
referred width. min-content the intrinsic minimum width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, <length-percentage>)). accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text
size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage o...
zoom - CSS: Cascading Style Sheets
the non-standard zoom css property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. however, unlike css transforms, zoom affects the layout
size of the element. /* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal
size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document. only supported by webkit (and possibly blink). <percentage> zoom factor. 100% is equivalent to normal. values ...
CSS: Cascading Style Sheets
b developer? we have put together a course that includes all the essential information you need to work towards your goal. get started tutorials our css learning area features multiple modules that teach css from the ground up — no previous knowledge required. css first steps css (cascading style sheets) is used to style and layout web pages — for example, to alter the font, color,
size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. this module provides a gentle beginning to your path towards css mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to html. css building blocks this module carries on where css first steps left off — now you've gained...
WAI ARIA Live Regions/API Support - Developer guides
eful for heuristics. often, changes in a page that are directly caused by a user's keystrokes should be read. they are synchronous with what the user is doing and can thus likely be read without disorienting the user. once the user presses the next key the speech will move on to echoing that key anyway. the screen reader may wish to take other factors into account, such as the type of change, the
size of the change, where the change occured, etc. this is a potential area for innovation in screen readers. most recent occurance user input? key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer callbacks, xmlhttprequest callbacks, etc. are neutral. they are only counted ...
Guide to Web APIs - Developer guides
ution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rre
size observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Adding captions and subtitles to HTML5 video - Developer guides
on> <button id="subtitles" type="button" data-state="subtitles">cc</button> </div> css changes the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward. no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-
size:16px; font-
size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below. subtitle implementation a lot of what we do to access the video subtitles revolves around javascript. similar to the video controls, i...
Video player styling basics - Developer guides
the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons. each button has some basic styling: .controls button { border:none; cursor:pointer; background:transparent; background-
size:contain; background-repeat:no-repeat; } by default, all <button> elements have a border, so this is removed. since background images will be used to display appropriate icons, the background colour of the button is set to be transparent, non-repeated, and the element should fully contain the image. simple :hover and :focus states are then set for each button that simply alters the opacity of...
Challenge solutions - Developer guides
enting out a rule challenge comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red. solution one way to do this is to put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the
size in the browser's default serif font. solution add the following style declaration to the strong rule: font: 200% serif; if you use separate declarations for font-
size and font-family, then the font-style setting on the first paragraph is not overridden. color three-digit color codes challenge in your css file, change all the color names to 3-digit color codes without affecting the r...
Overview of events and handlers - Developer guides
on of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. the global object window emits an event called 'load' when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 're
size' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top of the dom node in the html page. the ...
Event developer guide - Developer guides
he web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d transforms. that is different, but similar, to the change in device vertical orientation. the window in which the browser is displayed can trigger events; for example, change
size if the user maximizes the window or otherwise changes it. the process loading of a web page can trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user. the user interaction with the web page contents can trigger events. the events triggered by user interaction evolved during the early years of browser de...
Graphics on the Web - Developer guides
uct graphics on-the-fly, or manipulate images after the fact. these articles provide insight into how you can accomplish this. 2d graphics canvas the <canvas> element provides apis to draw 2d graphics using javascript. svg scalable vector graphics (svg) lets you use lines, curves, and other geometric shapes to render graphics. with vectors, you can create images that scale cleanly to any
size. view all... 3d graphics webgl a guide to getting started with webgl, the 3d graphics api for the web. this technology lets you use standard opengl es in web content. video using html5 audio and video embedding video and/or audio in a web page and controlling its playback. webrtc the rtc in webrtc stands for real-time communications, a technology that enables audio/video streamin...
Index - Developer guides
ode) and regardless of the encoding used requires web content to declare what encoding was used. 32 mobile web development intermediate, needsexample this page provides an overview of some of the main techniques needed to design web sites that work well on mobile devices. 33 a hybrid approach mobile, responsive design, web development no approach is a one-
size-fits-all solution. web applications that want to heavily modify the content or user flow for mobile users should probably go for a separate mobile site. content-oriented pages that don’t need to modify their content for mobile users will be satisfied with responsive design. if you need to slightly alter the site’s message for mobile users, but want to reap the benefits of a responsive design,...
Printing - Developer guides
you wish to use different styles to enhance the appearance of your content on paper. you wish to use higher resolution images for a better result. you want to adjust the user experience of printing, such as presenting a specially-formatted version of your content before printing begins. ...
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
magereceived() is called to handle the "load" event on the htmlimageelement that receives the downloaded image. this event is triggered once the downloaded data is all available. it begins by creating a new <canvas> element that we'll use to convert the image into a data url, and by getting access to the canvas's 2d drawing context (canvasrenderingcontext2d) in the variable context. the canvas's
size is adjusted to match the received image, then the image is drawn into the canvas using drawimage(). the canvas is then inserted into the document so the image is visible. now it's time to actually save the image locally. to do this, we use the web storage api's local storage mechanism, which is accessed through the localstorage global. the canvas method todataurl() is used to convert the image i...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
ding permitted aria roles tab, presentation or none dom interface htmlheadingelement attributes these elements only include the global attributes. the align attribute is obsolete; don't use it. usage notes heading information may be used by user agents, for example, to construct a table of contents for a document automatically. avoid using heading tags to re
size text. instead, use the css font-
size property. headings use
size to indicate their relative importance, but css is preferred for general-purpose resizing. avoid skipping heading levels: always start from <h1>, next use <h2> and so on. you should only use one <h1> per page. using more than one will not result in an error, but using only one is seen as a best practice. it makes logical sense — ...
<aside>: The Aside element - HTML: Hypertext Markup Language
that accepts flow content. note that an <aside> element must not be a descendant of an <address> element. implicit aria role complementary permitted aria roles feed, none, note, presentation, region, search dom interface htmlelement attributes this element only includes the global attributes. usage notes do not use the <aside> element to tag parenthe
sized text, as this kind of text is considered part of the main flow. examples using <aside> this example uses <aside> to mark up a paragraph in an article. the paragraph is only indirectly related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first released to theatres in 1989. </p> <aside> <p> the movie earned $87 million...
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
set the value to block to improve control over positioning and layout, unless you want it to sit within a text block or similar. you can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. you can't however style the individual components inside the audio player (e.g. change the button
size or icons, change the font, etc.), and the controls are different across the different browsers. to get a consistent look and feel across browsers, you'll need to create custom controls; these can be marked up and styled in whatever way you want, and then javascript can be used along with the htmlmediaelement api to wire up their functionality. video player styling basics provides some useful st...
<body>: The Document Body element - HTML: Hypertext Markup Language
s finished loading. onmessage function to call when the document has received a message. onoffline function to call when network communication has failed. ononline function to call when network communication has been restored. onpopstate function to call when the user has navigated session history. onredo function to call when the user has moved forward in undo transaction history. onre
size function to call when the document has been re
sized. onstorage function to call when the storage area has changed. onundo function to call when the user has moved backward in undo transaction history. onunload function to call when the document is going away. rightmargin the margin of the right of the body. this method is non-conforming, use css margin-right property on the element ins...
<br>: The Line Break element - HTML: Hypertext Markup Language
thub.com/mdn/interactive-examples and send us a pull request. as you can see from the above example, a <br> element is included at each point where we want the text to break. the text after the <br> begins again at the start of the next line of the text block. note: do not use <br> to create margins between paragraphs; wrap them in <p> elements and use the css margin property to control their
size. attributes this element's attributes include the global attributes. deprecated attributes clear indicates where to begin the next line after the break. styling with css the <br> element has a single, well-defined purpose — to create a line break in a block of text. as such, it has no dimensions or visual output of its own, and there is very little you can do to style it. you can se...
<col> - HTML: Hypertext Markup Language
the alignment characters specified by the char attribute. valign this attribute specifies the vertical alignment of the text within each cell of the column. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the
size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <col> element. because <td> elements are not descendan...
<colgroup> - HTML: Hypertext Markup Language
e alignment character specified by the char attribute. valign this attribute specifies the vertical alignment of the text within each cell of the column. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the
size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <colgroup> element. because <td> elements are not des...
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
esource being embedded. type the mime type to use to select the plug-in to instantiate. width the displayed width of the resource, in css pixels. this must be an absolute value; percentages are not allowed. usage notes you can use the object-position property to adjust the positioning of the embedded object within the element's frame, and the object-fit property to control how the object's
size is adjusted to fit within the frame. examples <embed type="video/quicktime" src="movie.mov" width="640" height="480" title="title of my video"> accessibility concerns use the title attribute on an embed element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. the title's value should concisely describe the embed...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
al special styling considerations for <fieldset>. its display value is block by default, and it establishes a block formatting context. if the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. by default there is a 2px groove border surrounding the contents, and a small amount of default padding. the element has min-inline-
size: min-content by default. if a <legend> is present, it is placed over the block-start border. the <legend> shrink-wraps, and also establishes a formatting context. the display value is blockified. (for example, display: inline behaves as block.) there will be an anonymous box holding the contents of the <fieldset>, which inherits certain properties from the <fieldset>. if the <fieldset> is style...
<frame> - HTML: Hypertext Markup Language
, <iframe> may be preferred. attributes like all other html elements, this element supports the global attributes. src this attribute specifies the document that will be displayed by the frame. name this attribute is used for labeling frames. without labeling, every link will open in the frame that it’s in – the closest parent frame. see the target attribute for more information. nore
size this attribute prevents resizing of frames by users. scrolling this attribute defines the existence of a scrollbar. if this attribute is not used, the browser adds a scrollbar when necessary. there are two choices: "yes" for forcing a scrollbar even when it is not necessary and "no" for forcing no scrollbar even when it is necessary. marginheight this attribute defines the height of the marg...
<frameset> - HTML: Hypertext Markup Language
the html <frameset> element is used to contain <frame> elements. note: because the use of frames is now discouraged in favor of using <iframe>, this element is not typically used by modern web sites. attributes like all other html elements, this element supports the global attributes. cols this attribute specifies the number and
size of horizontal spaces in a frameset. rows this attribute specifies the number and
size of vertical spaces in a frameset. example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/frameset" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
<input type="date"> - HTML: Hypertext Markup Language
ted — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget. note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make saturdays selectable). however, this does not seem to be in any implementation at the time of writing. controlling input
size <input type="date"> doesn't support form sizing attributes such as
size. prefer css for sizing it. validation by default, <input type="date"> doesn't validate the entered value beyond its format. the interfaces generally don't let you enter anything that isn't a date — which is helpful — but you can leave the field empty or enter an invalid date in browsers where the input falls back to ty...
<input type="month"> - HTML: Hypertext Markup Language
the result here is that: only months between in january 1900 and december 1999 can be selected; months outside that range can't be scrolled to in the control. depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). controlling input
size <input type="month"> doesn't support form sizing attributes such as
size. you'll have to resort to css for sizing needs. validation by default, <input type="month"> does not apply any validation to entered values. the ui implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still submit the form with the month input empty, or enter an inv...
<input type="time"> - HTML: Hypertext Markup Language
type="time">, then offer advice on mitigating the browser support issue later on (see handling browser support). basic uses of time the simplest use of <input type="time"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="appt-time">choose an appointment time: </label> <input id="appt-time" type="time" name="appt-time"> </form> controlling input
size <input type="time"> doesn't support form sizing attributes such as
size, since times are always about the same number of characters long. you'll have to resort to css for sizing needs. using the step attribute you can use the step attribute to vary the amount of time jumped whenever the time is incremented or decremented (for example, so the time moves by 10 minutes at a time when clicking the...
<input type="week"> - HTML: Hypertext Markup Language
f <input type="week">, then offer advice on mitigating the browser support issue later on (see handling browser support). basic uses of week the simplest use of <input type="week"> involves a basic <input> and <label> element combination, as seen below: <form> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week"> </form> controlling input
size <input type="week"> doesn't support form sizing attributes such as
size. you'll have to resort to css for sizing needs. using the step attribute you should be able to use the step attribute to vary the number of weeks jumped whenever they are incremented or decremented, however it doesn't seem to have any effect on supporting browsers. validation by default, <input type="week"> does not appl...
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
annotation on the other hand is delimited by two <rt> elements. note that we could also write this example with the two base text parts annotated completely separately. in this case we don't need to include <rb> elements: <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> <ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> body { font-
size: 22px; } the output looks like so: the html above might look something like this when rendered by a browser without ruby support: 漢字 (kan ji) body { font-
size: 22px; } note: see the article about the <ruby> element for further examples. specifications specification status comment html5the definition of '<rb>' in that specification. recommen...
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
is used in the case of lack of <ruby> element support; the <rp> content provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses. examples this example uses ruby annotations to display the romaji equivalents for each character. <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> css body { font-
size: 22px; } the result looks like this in your browser: the html above rendered by a browser without ruby support might look like this: 漢 (kan) 字 (ji) body { font-
size: 22px; } see the article about the <ruby> element for further examples. specifications specification status comment html living standardthe definition of '<rp>' in that specification...
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
<ruby> element. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. examples this simple example provides romaji transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-
size: 22px; } the output looks like this in your browser: on a browser without ruby support, this example might look like this: 漢 kan 字 ji body { font-
size: 22px; } specifications specification status comment html living standardthe definition of '<rt>' in that specification. living standard html5the definition of '<rt>' in that speci...
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
uby> element. permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. examples <div class="info"> <ruby> <rbc> <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt> </rbc> <rtc>san francisco</rtc> </ruby> </div> .info { padding-top: 10px; font-
size: 36px; } specifications specification status comment html 5.2the definition of '<rtc>' in that specification. recommendation html 5.1the definition of '<rtc>' in that specification. recommendation html5the definition of '<rtc>' in that specification. recommendation initial definition. ...
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
valign deprecated since html4obsolete since html5 this attribute specifies the vertical alignment of the text within each row of cells of the table header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the
size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the css vertical-align prope...
<thead>: The Table Head element - HTML: Hypertext Markup Language
latest standard. valign in html 4, in html5 this attribute specifies the vertical alignment of the text within each row of cells of the table header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the
size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; top, which will put the text as close to the top of the cell as it is possible. note: do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the css vertical-align property ...
<tr>: The Table Row element - HTML: Hypertext Markup Language
the decimal point. this attribute is obsolete, and was never widely supported anyway. valignobsolete since html5 a domstring specifying the vertical alignment of the text within each cell in the row. possible values for this attribute are: baseline aligns each cell's content text as closely as possible to the bottom of the cell, handling alignment of different fonts and font
sizes by aligning the characters along the baseline of the font(s) used in the row. if all of the characters in the row are the same
size, the effect is the same as bottom. bottom, draws the text in each of the row's cells as closely as possible to the bottom edge of those cells. middle each cell's text is vertically centered. top each cell's text is drawn as closely as possible to the top...
itemref - HTML: Hypertext Markup Language
for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. example html <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>
size: <span itemprop="
size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "
size": 12 } } result specifications specification status comment html microdatathe definition of 'itemref' in that specification. working draft html living...
Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard l...
Evolution of HTTP - HTTP
other headers have been added, sometimes experimentally only. notable headers are do not track (dnt) header to control privacy, x-frame-options, or upgrade-insecure-requests but many more exist. http/2 – a protocol for greater performance over the years, web pages have become much more complex, even becoming applications in their own right. the amount of visual media displayed, the volume and
size of scripts adding interactivity, has also increased: much more data is transmitted over significantly more http requests. http/1.1 connections need requests sent in the correct order. theoretically, several parallel connections could be used (typically between 5 and 8), bringing considerable overhead and complexity. for example, http pipelining has emerged as a resource burden in web development...
Configuring servers for Ogg media - HTTP
part your key frames are, the longer this takes, so it's helpful to include key frames at regular intervals. by default, ffmpeg2theora uses one key frame every 64 frames (or about every 2 seconds at 30 frames per second), which works pretty well. note: of course, the more key frames you use, the larger your video file is, so you may need to experiment a bit to get the right balance between file
size and seek performance. consider using the preload attribute the html <audio> and <video> elements provide the preload attribute, which tells the browser to attempt to download the entire media when the page loads. without preload, the browser only downloads enough of the media to display the first video frame, and to determine the media's duration. preload is off by default, so if getting to vi...
Content-Encoding - HTTP
indicates which encodings were applied to the entity-body. it lets the client know how to decode in order to obtain the media-type referenced by the content-type header. the recommendation is to compress data as much as possible and therefore to use this field, but some types of resources, such as jpeg images, are already compressed. sometimes, using additional compression doesn't reduce payload
size and can even make the payload longer. header type entity header forbidden header name no syntax content-encoding: gzip content-encoding: compress content-encoding: deflate content-encoding: identity content-encoding: br // multiple, in the order in which they were applied content-encoding: gzip, identity content-encoding: deflate, gzip directives gzip a for...
Content-Length - HTTP
header type entity header forbidden header name yes syntax content-length: <length> directives <length> the length in decimal number of octets. ...
Content-Range - HTTP
the content-range response http header indicates where in a full body message a partial message belongs. header type response header forbidden header name no cors-safelisted response-header no syntax content-range: <unit> <range-start>-<range-end>/<
size> content-range: <unit> <range-start>-<range-end>/* content-range: <unit> */<
size> directives <unit> the unit in which ranges are specified. this is usually bytes. <range-start> an integer in the given unit indicating the beginning of the request range. <range-end> an integer in the given unit indicating the end of the requested range. <
size> the total
size of the document (or '*' if unknown). examples content-range: bytes 200-1000/67589 specifications specification ti...
Feature-Policy - HTTP
ith a notallowederror. midi controls whether the current document is allowed to use the web midi api. when this policy is disabled, the promise returned by navigator.requestmidiaccess() will reject with a domexception. navigation-override controls the availability of mechanisms that enables the page author to take control over the behavior of spatial navigation, or to cancel it outright. over
sized-images controls whether the current document is allowed to download and display large images. payment controls whether the current document is allowed to use the payment request api. when this policy is enabled, the paymentrequest() constructor will throw a securityerror domexception. picture-in-picture controls whether the current document is allowed to play a video in a picture-in-picture...
Index - HTTP
renced by the content-type header. 24 content-language http, headers, reference the content-language entity header is used to describe the language(s) intended for the audience, so that it allows a user to differentiate according to the users' own preferred language. 25 content-length http, headers, reference the content-length entity header indicates the
size of the entity-body, in bytes, sent to the recipient. 26 content-location http, reference, header the content-location header indicates an alternate location for the returned data. the principal use is to indicate the url of a resource transmitted as the result of content negotiation. 27 content-range http, http header, reference, response header, header t...
Large-Allocation - HTTP
to want to perform a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded document, for example. header type response header forbidden header name no syntax large-allocation: 0 large-allocation: <megabytes> directives 0 0 is a special value which represents uncertainty as to what the
size of the allocation is. <megabytes> the expected
size of the allocation to be performed, in megabytes. examples large-allocation: 0 large-allocation: 500 troubleshooting errors the large-allocation header throws warnings or error messages when used incorrectly. you'll encounter them in the web console. this page was loaded in a new process due to a large-allocation header. this message ...
Transfer-Encoding - HTTP
mends that the servers supporting this content-encoding should recognize x-gzip as an alias, for compatibility purposes. identity indicates the identity function (i.e. no compression, nor modification). this token, except if explicitly specified, is always deemed acceptable. examples chunked encoding chunked encoding is useful when larger amounts of data are sent to the client and the total
size of the response may not be known until the request has been fully processed. for example, when generating a large html table resulting from a database query or when transmitting large images. a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked 7\r\n mozilla\r\n 9\r\n developer\r\n 7\r\n network\r\n 0\r\n \r\n specifications specific...
Firefox user agent string reference - HTTP
given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for gecko — not firefox! whether this token appears is controlled by the "general.useragent.compatmode.firefox" boolean pref. mobile and tablet indicators only from firefox 11 onwards. the platform part of the ua string indicates if firefox is running on a phone-
sized or tablet device. when firefox runs on a device that has the phone form factor, there is a mobile; token in the platform part of the ua string. when firefox runs on a tablet device, there is a tablet; token in the platform part of the ua string instead. for example: mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/4...
HTTP Messages - HTTP
lure. this start-line is always a single line. an optional set of http headers specifying the request, or describing the body included in the message. a blank line indicating all meta-information for the request has been sent. an optional body containing data associated with the request (like content of an html form), or the document associated with a response. the presence of the body and its
size is specified by the start-line and http headers. the start-line and http headers of the http message are collectively known as the head of the requests, whereas its payload is known as the body. http requests start line http requests are messages sent by the client to initiate an action on the server. their start-line contain three elements: an http method, a verb (like get, put or post...
HEAD - HTTP
a response to a head method should not have a body. ...
A typical HTTP session - HTTP
nt request, a server response is formed of text directives, separated by crlf, though divided into three blocks: the first line, the status line, consists of an acknowledgment of the http version used, followed by a status request (and its brief meaning in human-readable text). subsequent lines represent specific http headers, giving the client information about the data sent (e.g. type, data
size, compression algorithm used, hints about caching). similarly to the block of http headers for a client request, these http headers form a block ending with an empty line. the final block is a data block, which contains the optional data. example responses successful web page response: http/1.1 200 ok content-type: text/html; charset=utf-8 content-length: 55743 connection: keep-alive cache-co...
Indexed collections - JavaScript
d and write the contents of the buffer. typed array views typed array views have self descriptive names and provide views for all the usual numeric types like int8, uint32, float64 and so forth. there is one special typed array view, {jsxref("uint8clampedarray")}}, which clamps the values between 0 and 255. this is useful for canvas data processing, for example. ...
Text formatting - JavaScript
imalrmbinchina = new intl.numberformat('zh-cn-u-nu-hanidec', { style: 'currency', currency: 'cny' }); console.log(handecimalrmbinchina.format(1314.25)); // ¥ 一,三一四.二五 collation the collator object is useful for comparing and sorting strings. for example, there are actually two different sort orders in german, phonebook and dictionary. phonebook sort empha
sizes sound, and it’s as if “ä”, “ö”, and so on were expanded to “ae”, “oe”, and so on prior to sorting. const names = ['hochberg', 'hönigswald', 'holzman']; const germanphonebook = new intl.collator('de-de-u-co-phonebk'); // as if sorting ["hochberg", "hoenigswald", "holzman"]: console.log(names.sort(germanphonebook.compare).join(', ')); // logs "hochberg, hönigswald, holzman...
Working with objects - JavaScript
expressions are instances of object. the following statement creates an object and assigns it to the variable x if and only if the expression cond is true: if (cond) var x = {greeting: 'hi there'}; the following example creates myhonda with three properties. note that the engine property is also an object with its own properties. var myhonda = {color: 'red', wheels: 4, engine: {cylinders: 4,
size: 2.2}}; you can also use object initializers to create arrays. see array literals. using a constructor function alternatively, you can create an object with these two steps: define the object type by writing a constructor function. there is a strong convention, with good reason, to use a capital initial letter. create an instance of the object with new. to define an object type, create ...
Memory Management - JavaScript
le. as of 2019, it is not possible to explicitly or programmatically trigger garbage collection in javascript. node.js node.js offers additional options and tools for configuring and debugging memory issues that may not be available for javascript executed within a browser environment. ...
InternalError: too much recursion - JavaScript
what went wrong? a function that calls itself is called a recursive function. once a condition is met, the function stops calling itself. this is called a base case. in some ways, recursion is analogous to a loop. both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case). ...
Array.prototype.every() - JavaScript
is the result of calling callbackfn // and argument list containing kvalue, k, and o. if(t) testresult = callbackfn.call(t, kvalue, k, o); else testresult = callbackfn(kvalue,k,o) // iii. if toboolean(testresult) is false, return false. if (!testresult) { return false; } } k++; } return true; }; } examples testing
size of all array elements the following example tests whether all elements in the array are bigger than 10. function isbigenough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isbigenough); // false [12, 54, 18, 130, 44].every(isbigenough); // true using arrow functions arrow functions provide a shorter syntax for the same test. [12, 5, 8, 130, 44].every(x => x >...
Array.prototype.filter() - JavaScript
function isbigenough(value) { return value >= 10 } let filtered = [12, 5, 8, 130, 44].filter(isbigenough) // filtered is [12, 130, 44] find all prime numbers in an array the following example returns all pri...
Array - JavaScript
property/element description example input read only the original string against which the regular expression was matched. "cdbbdbsbz" index read only the zero-based index of the match in the string. 1 [0] read only the last matched characters. "dbbd" [1], ...[n] read only elements that specify the parenthe
sized substring matches (if included) in the regular expression. the number of possible parenthe
sized substrings is unlimited. [1]: "bb" [2]: "d" constructor array() creates a new array object. static properties get array[@@species] the constructor function is used to create derived objects. static methods array.from() creates a new array instance from an array-like or it...
ArrayBuffer() constructor - JavaScript
the arraybuffer() constructor is used to create arraybuffer objects. 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 new arraybuffer(length) parameters length the
size, in bytes, of the array buffer to create. return value a new arraybuffer object of the specified
size. its contents are initialized to 0. exceptions a rangeerror is thrown if the length is larger than number.max_safe_integer (>= 2 ** 53) or negative. compatibility notes starting with ecmascript 2015, arraybuffer constructors require to be constructed with a new operator. calling an arraybuffer constructor as a function without new...
ArrayBuffer - JavaScript
ybuffer() creates a new arraybuffer object. static properties get arraybuffer[@@species] the constructor function that is used to create derived objects. static methods arraybuffer.isview(arg) returns true if arg is one of the arraybuffer views, such as typed array objects or a dataview. returns false otherwise. instance properties arraybuffer.prototype.bytelength the read-only
size, in bytes, of the arraybuffer. this is established when the array is constructed and cannot be changed. instance methods arraybuffer.prototype.slice() returns a new arraybuffer whose contents are a copy of this arraybuffer's bytes from begin (inclusive) up to end (exclusive). if either begin or end is negative, it refers to an index from the end of the array, as opposed to from the beginnin...
Atomics - JavaScript
t index. atomics.and() computes a bitwise and on the value at the specified index of the array with the provided value. returns the old value at that index. atomics.compareexchange() stores a value at the specified index of the array, if it equals a value. returns the old value. atomics.exchange() stores a value at the specified index of the array. returns the old value. atomics.islockfree(
size) an optimization primitive that can be used to determine whether to use locks or atomic operations. returns true if an atomic operation on arrays of the given element
size will be implemented using a hardware atomic operation (as opposed to a lock). experts only. atomics.load() returns the value at the specified index of the array. atomics.notify() notifies agents that are waiting on the spe...
BigInt.asIntN() - JavaScript
bigint value to a signed integer between -2width-1 and 2width-1-1. 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 bigint.asintn(width, bigint); parameters width the amount of bits available for the integer
size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as a signed integer. examples staying in 64-bit ranges the bigint.asintn() method can be useful to stay in the range of 64-bit arithmetic. const max = 2n ** (64n - 1n) - 1n; bigint.asintn(64, max); // ↪ 9223372036854775807n bigint.asintn(64, max + 1n); // ↪ -9223372036854775807n //...
BigInt.asUintN() - JavaScript
rap a bigint value to an unsigned integer between 0 and 2width-1. 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 bigint.asuintn(width, bigint); parameters width the amount of bits available for the integer
size. bigint the integer to clamp to fit into the supplied bits. returns the value of bigint modulo 2width as an unsigned integer. examples staying in 64-bit ranges the bigint.asuintn() method can be useful to stay in the range of 64-bit arithmetic. const max = 2n ** 64n - 1n; bigint.asuintn(64, max); // ↪ 18446744073709551615n bigint.asuintn(64, max + 1n); // ↪ 0n // zero because of ov...
BigInt64Array() constructor - JavaScript
ements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). syntax new bigint64array(); new bigint64array(length); new bigint64array(typedarray); new bigint64array(object); new bigint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
BigInt64Array - JavaScript
order is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). constructor bigint64array() creates a new bigint64array object. static properties bigint64array.bytes_per_element returns a number value of the element
size. 8 in the case of a bigint64array. bigint64array.name returns the string value of the constructor name. in the case of the bigint64array type, this is "bigint64array". static methods bigint64array.from() creates a new bigint64array from an array-like or iterable object. see also array.from(). bigint64array.of() creates a new bigint64array with a variable number of arguments. see also ar...
BigUint64Array() constructor - JavaScript
s in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). syntax new biguint64array(); new biguint64array(length); new biguint64array(typedarray); new biguint64array(object); new biguint64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
BigUint64Array - JavaScript
der is needed, use dataview instead. the contents are initialized to 0n. once established, you can reference elements in the array using the object's methods, or by using standard array index syntax (that is, using bracket notation). constructor biguint64array() creates a new biguint64array object. static properties biguint64array.bytes_per_element returns a number value of the element
size. 8 in the case of a biguint64array. biguint64array.name returns the string value of the constructor name. in the case of the biguint64array type this is "biguint64array". static methods biguint64array.from() creates a new biguint64array from an array-like or iterable object. see also array.from(). biguint64array.of() creates a new biguint64array with a variable number of arguments. see ...
DataView - JavaScript
(!number.issafeinteger(combined)) console.warn(combined, 'exceeds max_safe_integer. precision may be lost'); return combined; } alternatively, if you need full 64-bit range, you can create a bigint. further, although native bigints are much faster than user-land library equivalents, bigints will always be much slower than 32-bit integers in javascript due to the nature of their variable
size. const bigint = window.bigint, bigthirtytwo = bigint(32), bigzero = bigint(0); function getuint64bigint(dataview, byteoffset, littleendian) { // split 64-bit number into two 32-bit (4-byte) parts const left = bigint(dataview.getuint32(byteoffset|0, !!littleendian)>>>0); const right = bigint(dataview.getuint32((byteoffset|0) + 4|0, !!littleendian)>>>0); // combine the two 32-bit values a...
Float32Array() constructor - JavaScript
the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new float32array(); // new in es2017 new float32array(length); new float32array(typedarray); new float32array(object); new float32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Float32Array - JavaScript
er byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor float32array() creates a new float32array object. static properties float32array.bytes_per_element returns a number value of the element
size. 4 in the case of an float32array. float32array.name returns the string value of the constructor name. in the case of the float32array type: "float32array". static methods float32array.from() creates a new float32array from an array-like or iterable object. see also array.from(). float32array.of() creates a new float32array with a variable number of arguments. see also array.of(). ins...
Float64Array() constructor - JavaScript
the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new float64array(); // new in es2017 new float64array(length); new float64array(typedarray); new float64array(object); new float64array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Float64Array - JavaScript
er byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor float64array() creates a new float64array object. static properties float64array.bytes_per_element returns a number value of the element
size. 8 in the case of an float64array. float64array.name returns the string value of the constructor name. in the case of the float64array type: "float64array". static methods float64array.from() creates a new float64array from an array-like or iterable object. see also array.from(). float64array.of() creates a new float64array with a variable number of arguments. see also array.of(). ins...
Function.name - JavaScript
yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well. javascript compressors and minifiers warning: be careful when using function.name and source code transformations, such as those carried out by javascript compressors (minifiers) or obfuscators. these tools are often used as part of a javascript build pipeline to reduce the
size of a program prior to deploying it to production. such transformations often change a function's name at build-time. source code such as: function foo() {}; let foo = new foo(); if (foo.constructor.name === 'foo') { console.log("'foo' is an instance of 'foo'"); } else { console.log('oops!'); } may be compressed to: function a() {}; let b = new a(); if (b.constructor.name === 'foo') { ...
Function.prototype.toString() - JavaScript
examples comparing actual source code and tostring results function function.prototype.tostring result function f(){} "function f(){}" class a { a(){} } "class a { a(){} }" function* g(){} "function*...
Generator.prototype.next() - JavaScript
he object that the next method returns: function* gen() { yield 1; yield 2; yield 3; } const g = gen(); // "generator { }" g.next(); // "object { value: 1, done: false }" g.next(); // "object { value: 2, done: false }" g.next(); // "object { value: 3, done: false }" g.next(); // "object { value: undefined, done: true }" using next() with a list function* getpage(page
size = 1, list) { let output = []; let index = 0; while (index < list.length) { output = []; for (let i = index; i < index + page
size; i++) { if (list[i]) { output.push(list[i]); } } yield output; index += page
size; } } list = [1, 2, 3, 4, 5, 6, 7, 8] var page = getpage(3, list); // generator { } page.next(); ...
Int16Array() constructor - JavaScript
lements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int16array(); // new in es2017 new int16array(length); new int16array(typedarray); new int16array(object); new int16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Int16Array - JavaScript
rol over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int16array() creates a new int16array object. static properties int16array.bytes_per_element returns a number value of the element
size. 2 in the case of an int16array. int16array.name returns the string value of the constructor name. in the case of the int16array type: "int16array". static methods int16array.from() creates a new int16array from an array-like or iterable object. see also array.from(). int16array.of() creates a new int16array with a variable number of arguments. see also array.of(). instance properties...
Int32Array() constructor - JavaScript
lements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int32array(); // new in es2017 new int32array(length); new int32array(typedarray); new int32array(object); new int32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Int32Array - JavaScript
rol over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int32array() creates a new int32array object. static properties int32array.bytes_per_element returns a number value of the element
size. 4 in the case of an int32array. int32array.name returns the string value of the constructor name. in the case of the int32array type: "int32array". static methods int32array.from() creates a new int32array from an array-like or iterable object. see also array.from(). int32array.of() creates a new int32array with a variable number of arguments. see also array.of(). instance properties...
Int8Array() constructor - JavaScript
nce elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new int8array(); // new in es2017 new int8array(length); new int8array(typedarray); new int8array(object); new int8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Int8Array - JavaScript
ents an array of twos-complement 8-bit signed integers. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor int8array() creates a new int8array object. static properties int8array.bytes_per_element returns a number value of the element
size. 1 in the case of an int8array. int8array.name returns the string value of the constructor name. in the case of the int8array type: "int8array". static methods int8array.from() creates a new int8array from an array-like or iterable object. see also array.from(). int8array.of() creates a new int8array with a variable number of arguments. see also array.of(). instance properties int8...
Map.prototype.clear() - JavaScript
from a map object. 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 mymap.clear(); return value undefined. examples using clear() var mymap = new map(); mymap.set('bar', 'baz'); mymap.set(1, 'foo'); mymap.
size; // 2 mymap.has('bar'); // true mymap.clear(); mymap.
size; // 0 mymap.has('bar') // false specifications specification ecmascript (ecma-262)the definition of 'map.prototype.clear' in that specification. ...
RegExp.lastParen ($+) - JavaScript
regexp.$+ is an alias for this property. description the lastparen property is static, it is not a property of an individual regular expression object. instead, you always use it as regexp.lastparen or regexp['$+']. the value of the lastparen property is read-only and modified whenever a successful match is made. you can not use the shorthand alias with the dot property accessor (regexp.$+), because the parser expects an expression with "+" in that case and a syntaxerror is thrown. ...
RegExp.$1-$9 - JavaScript
the legacy regexp $1, $2, $3, $4, $5, $6, $7, $8, $9 properties are static and read-only properties of regular expressions that contain parenthe
sized substring matches. description the $1, ..., $9 properties are static, they are not a property of an individual regular expression object. instead, you always use them as regexp.$1, ..., regexp.$9. the values of these properties are read-only and modified whenever successful matches are made. the number of possible parenthe
sized substrings is unlimited, but the regexp object can only hold the first nine. you can access all parenthe
sized substrings through the returned array's indexes. these properties can be used in the replacement text for the string.replace method. when used this way, do not prepend them with regexp. the example below illu...
Set.prototype.clear() - JavaScript
ements from a set object. 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 myset.clear(); return value undefined. examples using the clear method var myset = new set(); myset.add(1); myset.add('foo'); myset.
size; // 2 myset.has('foo'); // true myset.clear(); myset.
size; // 0 myset.has('bar') // false specifications specification ecmascript (ecma-262)the definition of 'set.prototype.clear' in that specification. ...
SharedArrayBuffer() constructor - JavaScript
object representing a generic, fixed-length raw binary data buffer, similar to the arraybuffer object. 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 new sharedarraybuffer([length]) parameters length the
size, in bytes, of the array buffer to create. return value a new sharedarraybuffer object of the specified
size. its contents are initialized to 0. examples always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator. calling a sharedarraybuffer constructor as a function without new will throw a typeerror. var sab ...
SharedArrayBuffer - JavaScript
lling a sharedarraybuffer constructor as a function without new will throw a typeerror. var sab = sharedarraybuffer(1024); // typeerror: calling a builtin sharedarraybuffer constructor // without new is forbidden var sab = new sharedarraybuffer(1024); constructor sharedarraybuffer() creates a new sharedarraybuffer object. instance properties sharedarraybuffer.prototype.bytelength the
size, in bytes, of the array. this is established when the array is constructed and cannot be changed. read only. instance methods sharedarraybuffer.prototype.slice(begin, end) returns a new sharedarraybuffer whose contents are a copy of this sharedarraybuffer's bytes from begin, inclusive, up to end, exclusive. if either begin or end is negative, it refers to an index from the end of the array,...
TypedArray.BYTES_PER_ELEMENT - JavaScript
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. property attributes of typedarray.bytes_per_element writable no enumerable no configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. ...
TypedArray.prototype.every() - JavaScript
sarg parameter is provided to every, it will be passed to callback when invoked, for use as its this value. otherwise, the value undefined will be passed for use as its this value. the this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function. every does not mutate the typed array on which it is called. examples testing
size of all typed array elements the following example tests whether all elements in the typed array are bigger than 10. function isbigenough(element, index, array) { return element >= 10; } new uint8array([12, 5, 8, 130, 44]).every(isbigenough); // false new uint8array([12, 54, 18, 130, 44]).every(isbigenough); // true testing typed array elements using arrow functions arrow functions provide...
TypedArray.name - JavaScript
configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. the name property describes of what data type the array consists. the first part can be int for "integer" or uint for an "unsigned integer", also float for "floating point" is used. the second part is a number describing the bit-
size of the array. finally, the object type is array, with clampedarray as a special case. please see uint8clampedarray for more details. examples using name int8array.name; // "int8array" uint8array.name; // "uint8array" uint8clampedarray.name; // "uint8clampedarray" int16array.name; // "int16array" uint16array.name; // "uint16array" int32array.name; // "int32arr...
TypedArray.prototype.some() - JavaScript
.github.io/ecma262/#sec-%typedarray%.prototype.some if (!uint8array.prototype.some) { object.defineproperty(uint8array.prototype, 'some', { value: array.prototype.some }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable. examples testing
size of all typed array elements the following example tests whether any element in the typed array is bigger than 10. function isbiggerthan10(element, index, array) { return element > 10; } new uint8array([2, 5, 8, 1, 4]).some(isbiggerthan10); // false new uint8array([12, 5, 8, 1, 4]).some(isbiggerthan10); // true testing typed array elements using arrow functions arrow functions provide a sho...
Uint16Array() constructor - JavaScript
the uint16array() typed array constructor creates an array of 16-bit unsigned integers in the platform byte order. syntax new uint16array(); // new in es2017 new uint16array(length); new uint16array(typedarray); new uint16array(object); new uint16array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Uint16Array - JavaScript
over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint16array() creates a new uint16array object. static properties uint16array.bytes_per_element returns a number value of the element
size. 2 in the case of an uint16array. uint16array.name returns the string value of the constructor name. in the case of the uint16array type: "uint16array". static methods uint16array.from() creates a new uint16array from an array-like or iterable object. see also array.from(). uint16array.of() creates a new uint16array with a variable number of arguments. see also array.of(). instance pr...
Uint32Array() constructor - JavaScript
ts in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new uint32array(); // new in es2017 new uint32array(length); new uint32array(typedarray); new uint32array(object); new uint32array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Uint32Array - JavaScript
over byte order is needed, use dataview instead. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint32array() creates a new uint32array object. static properties uint32array.bytes_per_element returns a number value of the element
size. 4 in the case of an uint32array. uint32array.name returns the string value of the constructor name. in the case of the uint32array type: "uint32array". static methods uint32array.from() creates a new uint32array from an array-like or iterable object. see also array.from(). uint32array.of() creates a new uint32array with a variable number of arguments. see also array.of(). instance pr...
Uint8Array() constructor - JavaScript
lements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). syntax new uint8array(); // new in es2017 new uint8array(length); new uint8array(typedarray); new uint8array(object); new uint8array(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Uint8Array - JavaScript
rray represents an array of 8-bit unsigned integers. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint8array() creates a new uint8array object. static properties uint8array.bytes_per_element returns a number value of the element
size. 1 in the case of an uint8array. uint8array.name returns the string value of the constructor name. in the case of the uint8array type: "uint8array". static methods uint8array.from() creates a new uint8array from an array-like or iterable object. see also array.from(). uint8array.of() creates a new uint8array with a variable number of arguments. see also array.of(). instance properties...
Uint8ClampedArray() constructor - JavaScript
ct's methods, or using standard array index syntax (that is, using bracket notation). syntax new uint8clampedarray(); // new in es2017 new uint8clampedarray(length); new uint8clampedarray(typedarray); new uint8clampedarray(object); new uint8clampedarray(buffer [, byteoffset [, length]]); parameters length when called with a length argument, an internal array buffer is created in memory, of
size length multiplied by bytes_per_element bytes, containing zeros. typedarray when called with a typedarray argument, which can be an object of any of the typed array types (such as int32array), the typedarray gets copied into a new typed array. each value in typedarray is converted to the corresponding type of the constructor before being copied into the new array. the length of the new typed arr...
Uint8ClampedArray - JavaScript
he nearest integer will be set. the contents are initialized to 0. once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation). constructor uint8clampedarray() creates a new uint8clampedarray object. static properties uint8clampedarray.bytes_per_element returns a number value of the element
size. 1 in the case of an uint8clampedarray. uint8clampedarray.name returns the string value of the constructor name. in the case of the uint8clampedarray type: "uint8clampedarray". static methods uint8clampedarray.from() creates a new uint8clampedarray from an array-like or iterable object. see also array.from(). uint8clampedarray.of() creates a new uint8clampedarray from a variable number ...
WebAssembly.Memory.prototype.grow() - JavaScript
the grow() protoype method of the memory object increases the
size of the memory instance by a specified number of webassembly pages. syntax memory.grow(number); parameters number the number of webassembly pages you want to grow the memory by (each one is 64kib in
size). return value the previous
size of the memory, in units of webassembly pages. examples using grow the following example creates a new webassembly memory instance with an initial
size of 1 page (64kib), and a maximum
size of 10 pages (640kib). var memory = new webassembly.memory({initial:1, maximum:10}); we can then grow the instance by one page like so: const bytesperpage = 64 * 1024; console.log(memory.buffer.bytelength / bytesperpage); // "1" console.log(memory.grow(1)); // "1" con...
WebAssembly.Memory - JavaScript
by a webassembly instance. a memory created by javascript or in webassembly code will be accessible and mutable from both javascript and webassembly. constructor webassembly.memory() creates a new memory object. instance properties memory.prototype.buffer an accessor property that returns the buffer contained in the memory. instance methods memory.prototype.grow() increases the
size of the memory instance by a specified number of webassembly pages (each one is 64kb in
size). examples creating a new memory object there are two ways to get a webassembly.memory object. the first way is to construct it from javascript. the following example creates a new webassembly memory instance with an initial
size of 10 pages (640kib), and a maximum
size of 100 pages (6.4mib). its buffe...
WebAssembly.Table.prototype.grow() - JavaScript
the grow() prototype method of the webassembly.table object increases the
size of the table instance by a specified number of elements. syntax table.grow(number); parameters number the number of elements you want to grow the table by. return value the previous length of the table. exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown. examples using grow the following example creates a new webassembly table instance with an initial
size of 2 and a maximum
size of 10. var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specifica...
WebAssembly.Table.prototype.length - JavaScript
the length prototype property of the webassembly.table object returns the length of the table, i.e. the number of elements in the table. syntax table.length; examples using length the following example creates a new webassembly table instance with an initial
size of 2 and a maximum
size of 10. var table = new webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification. browser compatibility the compatibility table on this page is generated from structured data. if you'd like t...
WebAssembly.Table.prototype.set() - JavaScript
wrapper for an underlying wasm function. return value void. exceptions if index is greater than or equal to table.prototype.length, a rangeerror is thrown. if value is not an exported webassembly function or null, a typeerror is thrown. examples using table.set the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial
size of 2 references. we then print out the table length and contents of the two indexes (retrieved via table.prototype.get()) to show that the length is two, and the indexes currently contain no function references (they currently return null). var tbl = new webassembly.table({initial:2, element:"anyfunc"}); console.log(tbl.length); console.log(tbl.get(0)); console.log(tbl.get(1)); we then create a...
WebAssembly.Table - JavaScript
store function references, but this will likely be expanded in the future. constructor webassembly.table() creates a new table object. instance properties table.prototype.length returns the length of the table, i.e. the number of elements. instance methods table.prototype.get() accessor function — gets the element stored at a given index. table.prototype.grow() increases the
size of the table instance by a specified number of elements. table.prototype.set() sets an element stored at a given index to a given value. examples creating a new webassembly table instance the following example (see table2.html source code and live version) creates a new webassembly table instance with an initial
size of 2 elements. we then print out the table length and contents of the two ...
eval() - JavaScript
( date ); } console.log(runcodewithdatefunction( "function(date){ return date(5) }" )) the code above may seem inefficiently slow because of the triple nested function, but let's analyze the benefits of the above efficient method: it allows the code in the string passed to runcodewithdatefunction() to be minified. function call overhead is minimal, making the far smaller code
size well worth the benefit function() more easily allows your code to utilize the performance buttering "use strict"; the code does not use eval(), making it orders of magnitude faster than otherwise. lastly, let's examine minification. with using function() as shown above, you can minify the code string passed to runcodewithdatefunction() far more efficiently because the function arguments names...
Object initializer - JavaScript
is reminiscent of the bracket notation of the property accessor syntax, which you may have used to read and set properties already. now you can use a similar syntax in object literals, too: // computed property names (es2015) let i = 0 let a = { ['foo' + ++i]: i, ['foo' + ++i]: i, ['foo' + ++i]: i } console.log(a.foo1) // 1 console.log(a.foo2) // 2 console.log(a.foo3) // 3 let param = '
size' let config = { [param]: 12, ['mobile' + param.charat(0).touppercase() + param.slice(1)]: 4 } console.log(config) // {
size: 12, mobile
size: 4} spread properties the rest/spread properties for ecmascript proposal (stage 4) adds spread properties to object literals. it copies own enumerable properties from a provided object onto a new object. shallow-cloning (excluding prototype) or merging...
with - JavaScript
in the scope chain, then the name is bound to the property and the object containing the property. otherwise a referenceerror is thrown. using with is not recommended, and is forbidden in ecmascript 5 strict mode. the recommended alternative is to assign the object whose properties you want to access to a temporary variable. performance pro & contra pro: the with statement can help reduce file
size by reducing the need to repeat a lengthy object reference without performance penalty. the scope chain change required by 'with' is not computationally expensive. use of 'with' will relieve the interpreter of parsing repeated object references. note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object. contra: the with...
screenshots - Web app manifests
type object mandatory no the screenshots member defines an array of screenshots intended to showcase the application. these images are intended to be used by progressive web app stores. examples "screenshots" : [ { "src": "screenshot1.webp", "
sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "
sizes": "1280x720", "type": "image/webp" } ] specification specification status comment feedback web app manifestthe definition of 'screenshots' in that specification. working draft initial definition. web app manifest working group drafts ...
Values - MathML
mathml accepts different units and constants for specifying lengths. units unit description em font-relative unit ex font-relative unit. (the "x"-height of the element, 1ex ≈ 0.5em in many fonts) px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value. ...
<mi> - MathML
mark up terms. attributes class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). 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. math
size the
size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this logical class of the identifier, which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, which might or migh...
<mn> - MathML
ample "eleven". attributes class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). 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. math
size the
size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this attribute specifies the logical class of the number which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an expression, ...
<mpadded> - MathML
attributes class, id, style provided for use with stylesheets. depth sets or increments the depth. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . height sets or increments the height. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . href used to set a hyperlink to a specified uri. lspace sets or increments the horizontal position. possible values: any length or an increment/decrement (a length prefixed with "+" or "-") . ...
<ms> - MathML
possible values are either ltr (left to right) or rtl (right to left). lquote the opening quote character (depends on dir) to enclose the content. the default value is """. 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. math
size the
size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this attribute specifies the logical class of the identifier, which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an express...
<mspace> - MathML
attributes class, id, style provided for use with stylesheets. depth the desired depth (below the baseline) of the space (see length for values and units). height the desired height (above the baseline) of the space (see length for values and units). linebreak indicates a line-break at the space. possible values: auto (default value), newline, nobreak, goodbreak, badbreak. starting with mathml 3, it is preferred to use <mo> to control linebreaking. mathbackground the background color. you can use #rgb, #rrggbb and html color names. width the desired width of the space (see length for values and units). ...
<mtext> - MathML
d <mo> instead. attributes class, id, style provided for use with stylesheets. dir the text direction. possible values are either ltr (left to right) or rtl (right to left). 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. math
size the
size of the content. see length for possible values. deprecated values are: small, normal and big. these will be removed in the future. mathvariant this attribute specifies the logical class of the identifier, which varies in typography. that is, although the names suggest the typographic style for the class, semantically, items with the same class are treated "the same" within an express...
Web media technologies
can be placed within an <audio> or <video> element to provide a reference to a webvtt format subtitle or caption track to be used when playing the media. accessible from javascript as htmltrackelement objects. <source> the html <source> element is used within an <audio> or <video> element to specify source media to present. multiple sources can be used to provide the media in different formats,
sizes, or resolutions. accessible from javascript as htmlsourceelement objects. apis media capabilities api the media capabilities api lets you determine the encoding and decoding capabilities of the device your app or site is running on. this lets you make real-time decisions about what formats to use and when. media capture and streams api a reference for the api which makes it possible to s...
Performance fundamentals - Web Performance
a queries allow these compromises to be restricted only to devices that need them. many applications use transitions or animations through "pages", or "panels". for example, the user taps a "settings" button to transition into an application configuration screen, or a settings menu "pops up". firefox is highly optimized to transition and animate scenes that: use pages/panels approximately the
size of the device screen or smaller transition/animate the css transform and opacity properties transitions and animations that adhere to these guidelines can be offloaded to the system compositor and run maximally efficiently. memory and power usage improving memory and power usage is a similar problem to speeding up startup: don't do unneeded work or lazily load uncommonly-used ui resources. d...
Add to Home screen - Progressive web apps (PWAs)
e aware that chrome requires this before it will display the install banner, whereas firefox doesn't require it for showing the home-with-a-plus icon. the manifest for our sample app looks like this: { "background_color": "purple", "description": "shows random fox pictures. hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "
sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192 px icon for use in our app. you can include more
sizes if you want; android will choose the most appropriate
size for each different use case. you could...
Progressive web app structure - Progressive web apps (PWAs)
xample, an offline mode with the help of service workers is just an extra trait that makes the website experience better, but it's still perfectly usable without it. responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile devices. there are so many varied devices with browsers — it's important to prepare your website so it works on different screen
sizes, viewports or pixel densities, using technologies like viewport meta tag, css media queries, flexbox, and css grid. different concept: streams an entirely different approach to server- or client-side rendering can be achieved with the streams api. with a little help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources to b...
Progressive loading - Progressive web apps (PWAs)
initial website access. it's not unusual to have megabytes of image data to download before announcing the site is ready, but this again creates a bad perception of performance. we don't need all of the images in the best possible quality at the very beginning of viewing the site. this can be optimized. first of all, you should use tools or services similar to tinypng, which will reduce the file
size of your images without altering the quality too much. if you're past that point, then you can start thinking about optimizing the image loading using javascript. we'll expain this below. placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
to work on, and receive the result whenever it is ready using a promise-based approach. they can do a lot more than "just" offering offline capabilities, including handling notifications, performing heavy calculations on a separate thread, etc. service workers are quite powerful as they can take control over network requests, modify them, serve custom responses retrieved from the cache, or synthe
size responses completely. security because they are so powerful, service workers can only be executed in secure contexts (meaning https). if you want to experiment first before pushing your code to production, you can always test on a localhost or setup github pages — both support https. offline first the "offline first" — or "cache first" — pattern is the most popular strategy for serving ...
Graphic design for responsive sites - Progressive web apps (PWAs)
matic graphics (e.g. css3 drop shadows and gradients), you may want to simplify or remove certain assets for the site's mobile layout, or even provide smaller assets to suit the smaller screen better. this is because in general mobile devices will have less processing power and bandwidth available, so you want to reduce the processing and downloads. in addition, mobile devices have smaller screen
sizes, so it makes sense to reduce visual clutter on a mobile layout. css media queries allow us to serve different css rules dependant on viewport dimensions, and you should consider using mobile first media queries where possible. this means that the default layout before any media queries are encountered in the css is the small screen/mobile layout, not the wide screen/desktop layout. so when the ...
Structural overview of progressive web apps - Progressive web apps (PWAs)
xample, an offline mode with the help of service workers is just an extra trait that makes the website experience better, but it's still perfectly usable without it. responsive: responsive web design also applies to progressive web apps, as both are mainly for mobile devices. there are so many varied devices with browsers — it's important to prepare your website so it works on different screen
sizes, viewports or pixel densities, using technologies like the viewport meta tag, css media queries, flexbox, and css grid. another approach: streams an entirely different approach to server- or client-side rendering can be achieved with the streams api. with a little help from service workers, streams can greatly improve the way we parse content. the app shell model requires all the resources t...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
{ width: 300px; border: 1px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css. the clip path can be assigned to any element with the target class. you can make changes to the svg in real time and see them immediately affect the rendering of the html. for example, you can re
size the circle in the clip path established above: function toggleradius() { var circle = document.getelementbyid("circle"); circle.r.baseval.value = 0.40 - circle.r.baseval.value; } example: filtering this demonstrates applying a filter to html content using svg. it establishes several filters, which are applied with css to three elements in both the normal and mouse hover states. <p clas...
begin - SVG: Scalable Vector Graphics
all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, re
size, scroll, beginevent, endevent, and repeatevent. an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation start time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function re...
cursor - SVG: Scalable Vector Graphics
xcept that if the browser supports the <cursor> element, you should be able to use it with the <funciri> notation. as a presentation attribute, it also can be used as a property directly inside a css stylesheet, see css cursor for further information. usage context categories presentation attribute value [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-re
size | ne-re
size | nw-re
size | n-re
size | se-re
size | sw-re
size | s-re
size | w-re
size| text | wait | help ]] | inherit animatable yes normative document svg 1.1 (2nd edition) <funciri> functional notation for a reference. the syntax for this reference is the same as the css uri. elements the following elements can use the cursor attribute container elements » ...
end - SVG: Scalable Vector Graphics
all valid events (not necessarily supported by all elements) are defined by the dom and html specifications. those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforeinput, input, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, re
size, scroll, beginevent, endevent, and repeatevent . an optional offset value as defined in <offset-value> can be appended. <repeat-value> this value defines a qualified repeat event. the element animation end time is defined relative to the time that the repeat event is raised with the specified iteration value. a valid repeat value consists of an element id followed by a dot and the function rep...
image-rendering - SVG: Scalable Vector Graphics
has effect only on the following element: <image> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed. optimizespeed indicates that the user agent shall empha
size rendering speed over quality. optimizequality indicates that the user agent shall empha
size quality over rendering speed. specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification. candidate recommendation definition in css scalable vector graphics (svg) 2the definition of 'image-r...
markerUnits - SVG: Scalable Vector Graphics
n place for the graphic object referencing the marker (i.e., the user coordinate system for the element referencing the <marker> element via a marker, marker-start, marker-mid, or marker-end property). strokewidth this value specifies that the markerwidth and markerunits attributes and the contents of the <marker> element represent values in a coordinate system which has a single unit equal the
size in user units of the current stroke width (see the stroke-width attribute) in place for the graphic object referencing the marker. specifications specification status comment scalable vector graphics (svg) 2the definition of 'markerunits' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second e...
mask - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default...
media - SVG: Scalable Vector Graphics
the media attribute specifies a media query that must be matched for a style sheet to apply. only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">re
size the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied. if not specified, the style sheet is applied unconditionally. specifica...
order - SVG: Scalable Vector Graphics
the order attribute indicates the
size of the matrix to be used by a <feconvolvematrix> element. only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emb...
overflow - SVG: Scalable Vector Graphics
ets what to do when an element's content is too big to fit in its block formatting context. it has the same parameter values and meaning as the css overflow property, however, the following additional points apply: if it has a value of visible, the attribute has no effect (i.e., a clipping rectangle is not created). if the overflow property has the value hidden or scroll, a clip of the exact
size of the svg viewport is applied. when scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the svg viewport whether or not any of its content is clipped. within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip. although the initial value for overfl...
paint-order - SVG: Scalable Vector Graphics
ample <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-
size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status comment ...
r - SVG: Scalable Vector Graphics
0" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <rect x="20" y="120" width="60" height="60" fill="url(#mygradient000)" /> <rect x="120" y="120" width="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its
size. with a value lower or equal to zero the circle won't be drawn at all. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, r is a geometry property meaning this attribute can also be used as a css property for circles. radialgradient for <radialgradient>, r defines the radius of the end circle for the radial gradient...
requiredFeatures - SVG: Scalable Vector Graphics
g/tr/svg11/feature#basicfilter the browser supports the <filter>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <feoffset>, <fetile>, <fefuncr>, <fefuncg>, <fefuncb> and <fefunca> elements http://www.w3.org/tr/svg11/feature#documenteventsattribute the browser supports the onunload, onabort, onerror, onre
size, onscroll and onzoom attributes http://www.w3.org/tr/svg11/feature#graphicaleventsattribute the browser supports the onfocusin, onfocusout, onactivate, onclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout and onload attributes http://www.w3.org/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://w...
spreadMethod - SVG: Scalable Vector Graphics
radient fills the shape beyond the gradient's edges. reflect this value indicates that the gradient repeats in reverse beyond its edges. repeat this value specifies that the gradient repeats in the original order beyond its edges. defining a gradient's edges by default, a gradient reaches to the edges of the shape being filled. to see the effects of this attribute, you will need to set the
size of the gradient smaller than the shape. in the case of a linear gradient, the edges may be defined as a rectangle by the x1, x2, y1 and y2 attributes. in the case of a radial gradient, the edges may be defined as outer and inner circles by the cx, cy and r (outer) and fx, fy and fr (inner) attributes. examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http...
text-anchor - SVG: Scalable Vector Graphics
it is not applicable to other types of auto-wrapped text. for those cases you should use text-align. for multi-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. ...
xChannelSelector - SVG: Scalable Vector Graphics
cementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-
size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-
size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used t...
yChannelSelector - SVG: Scalable Vector Graphics
cementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-
size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-
size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the input image defined in in2 will be used t...
<a> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker...
<circle> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<circle>' in...
<ellipse> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<ellipse>' i...
<font-face> - SVG: Scalable Vector Graphics
the <font-face> svg element corresponds to the css @font-face rule. it defines a font's outer properties. usage context categoriesfont elementpermitted contentany number of descriptive elements » and at most one <font-face> element, in any order. ...
<g> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobjec...
<line> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<line>' in t...
<marker> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker...
<polygon> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<polygon>' i...
<polyline> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<polyline>' ...
<rect> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<rect>' in t...
<svg> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobjec...
<symbol> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobjec...
<textPath> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification ...
<tspan> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status comment ...
<use> - SVG: Scalable Vector Graphics
aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-set
size, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scala...
Basic Transformations - SVG: Scalable Vector Graphics
x="0" y="0" width="10" height="10" transform="translate(30,40) rotate(45)" /> </svg> this example shows again the small square shown above that this time is also rotated by 45 degrees. skewing to make a rhombus out of our rectangle, the skewx() and skewy() transformations are available. each one takes an angle that determines how far the element will be skewed. scaling scale() changes the
size of an element. it takes two numbers, the first being the x scale factor and the second being the y scale factor. the factors are taken as the ratio of the transformed dimension to the original. for example, 0.5 shrinks by 50%. if the second number is omitted, it is assumed to be equal to the first. complex transformations with matrix() all the above transformations can be expressed by a 2x3 tra...
Paths - SVG: Scalable Vector Graphics
of basic shapes. it can be used to create lines, curves, arcs, and more. paths create complex shapes by combining multiple straight lines or curved lines. complex shapes composed only of straight lines can be created as <polyline>s. while <polyline>s and <path>s can create similar-looking shapes, <polyline>s require a lot of small straight lines to simulate curves, and don't scale well to larger
sizes. a good understanding of paths is important when drawing svgs. while creating complex paths using an xml editor or text editor is not recommended, understanding how they work will allow to identify and repair display issues in svgs. the shape of a <path> element is defined by one parameter: d. (see more in basic shapes.) the d attribute contains a series of commands and parameters used by thos...
Texts - SVG: Scalable Vector Graphics
oring 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 counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-
size, font-
size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable...